:root {
    /* =========================================================
       BATTLEFY ZONE — DESIGN TOKENS
       Light/dark are the only user-selectable themes. The initial state follows the device system preference.
       ========================================================= */

    /* ---------- Typography ---------- */
    --font-family-base: 'Titillium Web', Geneva, Tahoma, sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    --line-height-tight: 1.15;
    --line-height-snug: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* ---------- Core colors ---------- */
    --bg-primary: #F4FAFB;
    --bg-secondary: #E8F5F7;
    --surface: #FFFFFF;

    --accent: #00AFCB;
    --accent-hover: #008FA8;
    --accent-contrast: #FFFFFF;

    --text-primary: #10232B;
    --text-secondary: #60757D;
    --text-disabled: #93A5AB;

    --border: #B9D9DF;
    --border-strong: #8EBEC7;
    --border-subtle: rgba(185, 217, 223, 0.55);

    /* ---------- Semantic colors ---------- */
    --success: #16A36A;
    --success-bg: #E8F7F0;
    --warning: #D99A19;
    --warning-bg: #FFF5DA;
    --danger: #D94A4A;
    --danger-bg: #FDECEC;
    --info: #008FA8;
    --info-bg: #E6F7FA;

    /* ---------- Surfaces ---------- */
    --surface-raised: var(--surface);
    --surface-sunken: var(--bg-secondary);
    --surface-hover: rgba(0, 175, 203, 0.07);
    --surface-active: rgba(0, 175, 203, 0.13);
    --surface-overlay: rgba(16, 35, 43, 0.52);

    /* ---------- Sidebar ---------- */
    --sidebar-bg: #10232B;
    --sidebar-surface: #16323B;
    --sidebar-text: #F4F7F8;
    --sidebar-text-muted: #9EB1B8;
    --sidebar-border: rgba(255, 255, 255, 0.10);
    --sidebar-active-bg: var(--accent);
    --sidebar-active-text: #06202A;

    /* ---------- Radius ---------- */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* ---------- Borders ---------- */
    --border-width-thin: 1px;
    --border-width-default: 2px;

    /* ---------- Shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(16, 35, 43, 0.06);
    --shadow-sm: 0 3px 10px rgba(16, 35, 43, 0.08);
    --shadow-md: 0 8px 24px rgba(16, 35, 43, 0.10);
    --shadow-lg: 0 16px 40px rgba(16, 35, 43, 0.14);

    /* Physical button interaction from the approved reference style. */
    --shadow-button-offset: 0 5px 0 var(--text-primary);
    --shadow-button-offset-small: 0 3px 0 var(--text-primary);

    /* ---------- Spacing ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ---------- Controls ---------- */
    --control-height-sm: 36px;
    --control-height-md: 44px;
    --control-height-lg: 52px;
    --control-padding-inline: 1.15rem;

    /* ---------- Layout ---------- */
    --sidebar-width: 264px;
    --sidebar-width-collapsed: 76px;
    --mobile-header-height: 64px;
    --content-max-width: 1600px;
    --page-padding: clamp(1rem, 2vw, 2rem);

    /* ---------- Z-index ---------- */
    --z-base: 0;
    --z-sidebar: 100;
    --z-header: 200;
    --z-dropdown: 500;
    --z-drawer: 700;
    --z-overlay: 800;
    --z-modal: 900;
    --z-toast: 1000;

    /* ---------- Motion ---------- */
    --duration-fast: 150ms;
    --duration-normal: 220ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---------- Focus ---------- */
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);

    /* ---------- Skeleton ---------- */
    --skeleton-base: #E8F5F7;
    --skeleton-highlight: #F8FDFE;
}

[data-theme="dark"] {
    /* ---------- Core colors ---------- */
    --bg-primary: #06141D;
    --bg-secondary: #08232D;
    --surface: #0B2B35;

    --accent: #00C8E8;
    --accent-hover: #13D9F5;
    --accent-contrast: #06141D;

    --text-primary: #F4F7F8;
    --text-secondary: #8B9AA3;
    --text-disabled: #5E727B;

    --border: #17404B;
    --border-strong: #28606C;
    --border-subtle: rgba(23, 64, 75, 0.65);

    /* ---------- Semantic colors ---------- */
    --success: #31C58A;
    --success-bg: #0B3329;
    --warning: #F0B84B;
    --warning-bg: #3A2D0F;
    --danger: #F06A6A;
    --danger-bg: #3B171B;
    --info: #13D9F5;
    --info-bg: #07343E;

    /* ---------- Surfaces ---------- */
    --surface-hover: rgba(0, 200, 232, 0.08);
    --surface-active: rgba(0, 200, 232, 0.14);
    --surface-overlay: rgba(0, 0, 0, 0.66);

    /* ---------- Sidebar ---------- */
    --sidebar-bg: #041018;
    --sidebar-surface: #0A2029;
    --sidebar-text: #F4F7F8;
    --sidebar-text-muted: #8B9AA3;
    --sidebar-border: rgba(255, 255, 255, 0.09);
    --sidebar-active-bg: var(--accent);
    --sidebar-active-text: #06141D;

    /* ---------- Shadows ---------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.34);

    --skeleton-base: #0E3440;
    --skeleton-highlight: #174754;
}

/* Initial system preference fallback when no explicit light/dark choice is stored. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-primary: #06141D;
        --bg-secondary: #08232D;
        --surface: #0B2B35;
        --accent: #00C8E8;
        --accent-hover: #13D9F5;
        --accent-contrast: #06141D;
        --text-primary: #F4F7F8;
        --text-secondary: #8B9AA3;
        --text-disabled: #5E727B;
        --border: #17404B;
        --border-strong: #28606C;
        --border-subtle: rgba(23, 64, 75, 0.65);
        --surface-hover: rgba(0, 200, 232, 0.08);
        --surface-active: rgba(0, 200, 232, 0.14);
        --surface-overlay: rgba(0, 0, 0, 0.66);
        --sidebar-bg: #041018;
        --sidebar-surface: #0A2029;
        --sidebar-text: #F4F7F8;
        --sidebar-text-muted: #8B9AA3;
        --sidebar-border: rgba(255, 255, 255, 0.09);
        --sidebar-active-bg: var(--accent);
        --sidebar-active-text: #06141D;
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22);
        --shadow-sm: 0 3px 12px rgba(0, 0, 0, 0.24);
        --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.28);
        --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.34);
        --skeleton-base: #0E3440;
        --skeleton-highlight: #174754;
    }
}