@layer tokens {
    :root {
        --je-container-max: 1280px;
        --je-pad: 16px;
        --je-gap-m: 12px;
        --je-gap-d: 16px;

        --paper: #F5F6F8;
        --surface: #FFFFFF;
        --border: #E1E4EA;
        --border-strong: #C9CEDA;
        --text: #1B212C;
        --text-muted: #5B6472;
        --text-faint: #8991A0;
        --brand: #3B6FE0;
        --brand-strong: #2952B3;
        --brand-wash: #EAF0FE;
        --success: #1F9D6C;
        --success-bg: #E3F5EC;
        --warning: #B5760F;
        --warning-bg: #FBEEDA;
        --critical: #C4433F;
        --critical-bg: #FBE8E7;
        --sidebar-bg: #171B22;
        --sidebar-text: #A7AEBB;
        --sidebar-text-active: #F3F5F8;
        --sidebar-active-bg: rgba(90, 138, 235, 0.16);
        --sidebar-border: #262B34;
        --radius-sm: 6px;
        --radius: 10px;
        --radius-lg: 14px;
        --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05);
        --shadow-card: 0 1px 3px rgba(20, 24, 31, 0.06), 0 1px 1px rgba(20, 24, 31, 0.04);
        --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
        --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

        /* Tells the browser to render native form controls (date/time picker
           icon, scrollbars, etc.) for a light background. Without this, an
           input[type="date"]'s calendar icon is always drawn dark-on-dark by
           default and becomes invisible once --paper/--surface go dark below
           -- color-scheme is the standards-based fix (works in Firefox too,
           unlike a webkit-only ::-webkit-calendar-picker-indicator filter
           hack), so it must be flipped everywhere the palette itself flips. */
        color-scheme: light;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;
            --paper: #0D0F13;
            --surface: #171B22;
            --border: #262C36;
            --border-strong: #333A47;
            --text: #E7EAEF;
            --text-muted: #949CAC;
            --text-faint: #6B7280;
            --brand: #5A8AEB;
            --brand-strong: #7FA5F0;
            --brand-wash: rgba(90, 138, 235, 0.14);
            --success-bg: rgba(31, 157, 108, 0.16);
            --warning-bg: rgba(181, 118, 15, 0.18);
            --critical-bg: rgba(196, 67, 63, 0.16);
            --sidebar-bg: #0A0C10;
            --sidebar-border: #1C2028;
        }
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --paper: #0D0F13; --surface: #171B22;
        --border: #262C36; --border-strong: #333A47;
        --text: #E7EAEF; --text-muted: #949CAC; --text-faint: #6B7280;
        --brand: #5A8AEB; --brand-strong: #7FA5F0; --brand-wash: rgba(90, 138, 235, 0.14);
        --success-bg: rgba(31, 157, 108, 0.16); --warning-bg: rgba(181, 118, 15, 0.18);
        --critical-bg: rgba(196, 67, 63, 0.16);
        --sidebar-bg: #0A0C10; --sidebar-border: #1C2028;
    }

    :root[data-theme="light"] {
        color-scheme: light;
        --paper: #F5F6F8; --surface: #FFFFFF;
        --border: #E1E4EA; --border-strong: #C9CEDA;
        --text: #1B212C; --text-muted: #5B6472; --text-faint: #8991A0;
        --brand: #3B6FE0; --brand-strong: #2952B3; --brand-wash: #EAF0FE;
        --success-bg: #E3F5EC; --warning-bg: #FBEEDA; --critical-bg: #FBE8E7;
        --sidebar-bg: #171B22; --sidebar-border: #262B34;
    }

    /* Back-compat aliases: a few not-yet-migrated pages still reference the old
       --je-* names; keep them mapped to the new tokens rather than duplicating
       a second palette. */
    :root {
        --je-brand: var(--brand);
        --je-fg: var(--text);
        --je-muted: var(--text-muted);
        --je-bg: var(--paper);
    }
}