/* Design tokens. The only file that may hold raw colour, font, size or motion values.
   Dark ("Graphite") is the default in :root. Light ("Vellum") overrides under [data-theme="light"].
   Source: docs/frontend-design.md section 2. */

/* ===== Dark theme and shared values ===== */
:root {
    color-scheme: dark;

    /* 1. Primitives (section 2.1) */
    --ink-0: #0E0F11;
    --ink-1: #15171A;
    --ink-2: #1C1F23;
    --ink-3: #252A2F;
    --rule: #2C3136;
    --rule-strong: #3A4047;
    --paper-hi: #ECE7DD;
    --paper: #C8C3B8;
    --paper-lo: #8D8980;
    --paper-faint: #5E5B55;

    /* 2. Brand (section 2.1a) */
    --brand-lime: #8DC63F;
    --brand-lime-deep: #6E9E18;
    --brand-purple: #8A5CC4;
    --brand-smoke: #A19CA0;

    /* 3. Status (section 2.3). Fixed per theme, never re-pointed by game */
    --ok: var(--brand-lime);
    --caution: #E0953A;
    --fault: #E26060;
    --info: var(--paper-lo);

    /* 4. Code highlighting (section 2.4) */
    --code-bg: #111316;
    --code-keyword: #D7A86E;
    --code-type: #8FC1B5;
    --code-string: #B5C77A;
    --code-number: #E39A7B;
    --code-comment: #959188;
    --code-attr: #9DA9C9;

    /* 5. Typography (section 2.5) */
    --font-ui: "IBM Plex Sans", ui-sans-serif, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --font-display: "Big Shoulders Display", "IBM Plex Sans", sans-serif;
    --t-xs: 12px;
    --lh-xs: 16px;
    --t-sm: 13.5px;
    --lh-sm: 20px;
    --t-md: 15.5px;
    --lh-md: 26px;
    --t-lg: 18.5px;
    --lh-lg: 28px;
    --t-xl: clamp(22px, 2.4vw, 28px);

    /* 6. Space, radius, elevation, motion (section 2.6) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --r-1: 2px;
    --r-2: 4px;
    --r-pill: 999px;
    --e-0: none;
    --e-overlay: 0 1px 0 var(--rule-strong), 0 12px 32px rgb(0 0 0 / .45);
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --d-fast: 120ms;
    --d-med: 200ms;
    --d-slow: 320ms;

    /* 7. Layout constants */
    --rail-w: 264px;
    --rail-w-collapsed: 56px;
    --topbar-h: 48px;
    --drawer-w: min(85vw, 320px);   /* mobile/tablet navigation drawer */
    --tap: 44px;                     /* minimum touch target */

    /* 7a. Stacking order (low → high). Every z-index in component CSS uses one of these. */
    --z-raised: 10;        /* sticky in-page bars, pills */
    --z-topbar: 800;       /* the fixed mobile top bar and the page actions shown in it */
    --z-panel: 850;        /* tablet evidence overlay, inspector sheet */
    --z-scrim: 900;        /* backdrop under drawers and sheets */
    --z-drawer: 950;       /* navigation drawer, evidence bottom sheet */
    --z-dialog: 1000;      /* dialogs, Go to palette, toasts */
    --col-max: 760px;
    --panel-w: 440px;
    --inspector-w: 300px;
    --row-h: 28px;
    --tree-indent: 14px;
    --bar: 2px;
    --bar-cite: 3px;
    --icon: 16px;
    --hit: 44px;
    --swatch: 10px;
    --focus-w: 2px;
    --focus-offset: 2px;

    /* 8. Background texture */
    --grid-dot: rgb(255 255 255 / .045);
    --grid-size: 24px;

    /* 9. The only static game accent (section 2.2). Other games are served by /css/games.css */
    --g-all: #8A5CC4;
    --g-all-ink: #B18BE0;
    --g-all-wash: rgb(138 92 196 / .14);
    --on-all: #FFFFFF;
    --accent: var(--g-all);
    --accent-ink: var(--g-all-ink);
    --accent-wash: var(--g-all-wash);
    --on-accent: var(--on-all);
}

/* ===== Light theme overrides ===== */
[data-theme="light"] {
    color-scheme: light;

    /* 1. Primitives */
    --ink-0: #F3F0E8;
    --ink-1: #FAF8F3;
    --ink-2: #FFFFFF;
    --ink-3: #ECE8DE;
    --rule: #DCD6C8;
    --rule-strong: #C5BEAE;
    --paper-hi: #1C1A16;
    --paper: #3A372F;
    --paper-lo: #6E695E;
    --paper-faint: #A29C8F;

    /* 2. Brand */
    --brand-lime: #4E7A12;
    --brand-lime-deep: #3D6010;
    --brand-purple: #5E3A8C;
    --brand-smoke: #6E696D;

    /* 3. Status */
    --caution: #A35F0F;
    --fault: #B3322F;

    /* 4. Code highlighting */
    --code-bg: #F7F5EF;
    --code-keyword: #8A5A1C;
    --code-type: #2D6E62;
    --code-string: #5B6A1D;
    --code-number: #A0482A;
    --code-comment: #68645A;
    --code-attr: #4A5683;

    /* 6. Elevation */
    --e-overlay: 0 1px 0 var(--rule-strong), 0 12px 32px rgb(0 0 0 / .12);

    /* 8. Background texture */
    --grid-dot: rgb(0 0 0 / .06);

    /* 9. The static game accent */
    --g-all: #5E3A8C;
    --g-all-ink: #4E2F77;
    --g-all-wash: rgb(94 58 140 / .10);
    --on-all: #FFFFFF;
    --accent: var(--g-all);
    --accent-ink: var(--g-all-ink);
    --accent-wash: var(--g-all-wash);
    --on-accent: var(--on-all);
}

/* Game re-pointing. Only "all" is static; other games get their accent from /css/games.css */
[data-game="all"] {
    --accent: var(--g-all);
    --accent-ink: var(--g-all-ink);
    --accent-wash: var(--g-all-wash);
    --on-accent: var(--on-all);
}