:root {
    /* UI primitives */
    --ui-border-thin: 1px;
    --ui-radius-xs: 2px;
    --ui-radius-sm: 4px;

    /* Spacing scale */
    --space-2xs: 4px;
    --space-xs: 6px;
    --space-sm: 8px;
    --space-md: 10px;
    --space-lg: 12px;

    /* Semantic color aliases */
    --color-black: #000;
    --color-white: #fff;
    --text-muted: #666;
    --text-dim: #888;
    --text-subtle: #ccc;
    --border-neutral: #444;
    --border-subtle: #333;
    --status-critical: #ff0000;
    --status-ok: #00ff00;

    /* Generic utility tints */
    --white-02: rgba(255, 255, 255, 0.02);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-20: rgba(255, 255, 255, 0.2);
    
    --black-10: rgba(0, 0, 0, 0.1);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-80: rgba(0, 0, 0, 0.8);

    --overlay-dark: rgba(0, 0, 0, 0.9);

    /* Typography scale */
    --text-2xs: 0.625rem;
    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.5rem;
    --text-2xl: 3rem;

    /* Line-height scale */
    --lh-icon: 1;
    --lh-tight: 1.2;
    --lh-snug: 1.25;
    --lh-base: 1.4;
    --lh-relaxed: 1.5;
    --lh-loose: 1.6;
    --lh-zoom-control: 1.625rem;
    --lh-cluster-count: 30px;

    /* Decorative scanline colors */
    --scanline-dark: rgba(18, 16, 16, 0);
    --scanline-red: rgba(255, 0, 0, 0.03);
    --scanline-green: rgba(0, 255, 0, 0.01);
    --scanline-blue: rgba(0, 0, 255, 0.03);

    /* Motion */
    --transition-fast: all 225ms ease;

    /* Font families */
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* Relative color tints derived from active theme base colors */

    --primary-60: rgb(from var(--primary) r g b / 0.6);

    --secondary-05: rgb(from var(--secondary) r g b / 0.05);
    --secondary-10: rgb(from var(--secondary) r g b / 0.1);
    --secondary-20: rgb(from var(--secondary) r g b / 0.2);
    --secondary-30: rgb(from var(--secondary) r g b / 0.3);
    --secondary-40: rgb(from var(--secondary) r g b / 0.4);
    --secondary-50: rgb(from var(--secondary) r g b / 0.5);

    --tertiary-05: rgb(from var(--tertiary) r g b / 0.05);
    --tertiary-30: rgb(from var(--tertiary) r g b / 0.3);
    --tertiary-40: rgb(from var(--tertiary) r g b / 0.4);

    --gray-40: rgb(from var(--gray) r g b / 0.4);

    /* Cluster colors (10 steps, 0..100 count range) */
    --cluster-bg-saturation: 84%;
    --cluster-bg-lightness: 64%;
    --cluster-bg-alpha: 0.6;
    --cluster-inner-saturation: 100%;
    --cluster-inner-lightness: 46%;
    --cluster-inner-alpha: 0.65;
}

html.theme-night-corp {
    --primary: #0a192f;
    --secondary: #00f0ff;
    --tertiary: #ffb300;

    --gray: #8892b0;

    --white: #e6f1ff;
    --dark-accent: #112240;

    /* Themed surfaces */
    --surface-panel: rgba(10, 25, 47, 0.95);
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-panel-90: rgba(10, 25, 47, 0.9);
    --surface-tooltip-95: rgba(5, 10, 14, 0.95);
    --surface-tooltip-85: rgba(5, 10, 14, 0.85);
    --surface-nav-80: rgba(0, 20, 40, 0.8);
    --white-78: rgba(230, 241, 255, 0.78);
    --white-86: rgba(230, 241, 255, 0.86);

    /* Theme category colors */
    --category-location-overhaul: var(--secondary);
    --category-location-overhaul-glow: var(--secondary-40);
    --category-new-location: var(--tertiary);
    --category-new-location-glow: var(--tertiary-40);
    --category-other: var(--gray);
    --category-other-glow: var(--gray-40);

    /* 3D scene mesh colors — terrain/cliffs from game BaseColorScale RGB(86,108,136) */
    --scene-terrain: #566c88;
    --scene-water:   #2a3f57;
    --scene-cliffs:  #566c88;

}

html.theme-arasaka {
    --primary: #110d0e;
    --secondary: #e60000;
    --tertiary: #ffb300;

    --gray: #8892b0;
    
    --white: #e6f1ff;
    --dark-accent: #1a1a1a;

    /* Themed surfaces */
    --surface-panel: rgba(16, 16, 16, 0.95);
    --surface-hover: rgba(230, 0, 0, 0.08);
    --surface-panel-90: rgba(16, 16, 16, 0.9);
    --surface-tooltip-95: rgba(8, 8, 8, 0.95);
    --surface-tooltip-85: rgba(8, 8, 8, 0.85);
    --surface-nav-80: rgba(16, 16, 16, 0.8);
    --white-78: rgba(230, 241, 255, 0.78);
    --white-86: rgba(230, 241, 255, 0.86);

    /* Theme category colors */
    --category-location-overhaul: var(--secondary);
    --category-location-overhaul-glow: var(--secondary-40);
    --category-new-location: var(--tertiary);
    --category-new-location-glow: var(--tertiary-40);
    --category-other: var(--gray);
    --category-other-glow: var(--gray-40);

    /* 3D scene mesh colors — warm gray shift for Arasaka dark/red */
    --scene-terrain: #6b5f5c;
    --scene-water:   #2e2525;
    --scene-cliffs:  #6b5f5c;

}

html.theme-militech {
    --primary: #2c3023;
    --secondary: #fac901;
    --tertiary: #ee6b00;

    --gray: #93a58b;
    
    --white: #e6f1ff;
    --dark-accent: #1a1a1a;

    /* Themed surfaces */
    --surface-panel: rgba(16, 16, 16, 0.95);
    --surface-hover: rgba(250, 234, 0, 0.08);
    --surface-panel-90: rgba(16, 16, 16, 0.9);
    --surface-tooltip-95: rgba(8, 8, 8, 0.95);
    --surface-tooltip-85: rgba(8, 8, 8, 0.85);
    --surface-nav-80: rgba(16, 16, 16, 0.8);
    --white-78: rgba(230, 241, 255, 0.78);
    --white-86: rgba(230, 241, 255, 0.86);

    /* Theme category colors */
    --category-location-overhaul: var(--secondary);
    --category-location-overhaul-glow: var(--secondary-40);
    --category-new-location: var(--tertiary);
    --category-new-location-glow: var(--tertiary-40);
    --category-other: var(--gray);
    --category-other-glow: var(--gray-40);

    /* 3D scene mesh colors — olive shift for Militech military/yellow */
    --scene-terrain: #5e6448;
    --scene-water:   #1e3040;
    --scene-cliffs:  #5e6448;

}

html.theme-aldecaldos {
    --primary: #101518;
    --secondary: #dd612c;
    --tertiary: #be8f27;

    --gray: #545d7c;
    
    --white: #e6f1ff;
    --dark-accent: #424a63;

    /* Themed surfaces */
    --surface-panel: rgba(16, 21, 24, 0.95);
    --surface-hover: rgba(84, 93, 124, 0.12);
    --surface-panel-90: rgba(16, 21, 24, 0.9);
    --surface-tooltip-95: rgba(45, 50, 66, 0.95);
    --surface-tooltip-85: rgba(45, 50, 66, 0.85);
    --surface-nav-80: rgba(66, 74, 99, 0.8);
    --white-78: rgba(230, 241, 255, 0.78);
    --white-86: rgba(230, 241, 255, 0.86);

    /* Theme category colors */
    --category-location-overhaul: var(--secondary);
    --category-location-overhaul-glow: var(--secondary-40);
    --category-new-location: var(--tertiary);
    --category-new-location-glow: var(--tertiary-40);
    --category-other: var(--gray);
    --category-other-glow: var(--gray-40);

    /* 3D scene mesh colors — cool slate shift for Aldecaldos desert/orange */
    --scene-terrain: #52606e;
    --scene-water:   #253340;
    --scene-cliffs:  #52606e;

}

/* Global reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base page shell */
body {
    background-color: var(--primary);
    color: var(--white);
    font-family: var(--font-body);
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) transparent;
}

/* Scrollbar Styling (Webkit) */
::-webkit-scrollbar {
    width: var(--space-sm);
    height: var(--space-sm);
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--dark-accent);
    border: var(--ui-border-thin) solid var(--secondary);
    border-radius: var(--ui-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Generic form fields */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    background: var(--black-30);
    border: var(--ui-border-thin) solid var(--gray);
    color: var(--white);
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-md);
    outline: none;
    transition: var(--transition-fast);

    &:focus {
        border-color: var(--secondary);
        box-shadow: 0 0 var(--space-sm) var(--secondary-30);
    }
}

select option {
    background-color: var(--primary);
    color: var(--white);
}

input[type="checkbox"] {
    accent-color: var(--secondary);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}