/* DefenseClaw Spaces: design tokens ("Control room").
   Source of truth: design/tokens.md. Charts read every color from these
   properties via getComputedStyle; never hard-code hex elsewhere.

   Theme resolution:
     :root                       dark values (default), color-scheme: dark
     prefers-color-scheme light  light values, unless data-theme="dark"
     :root[data-theme="light"]   light values (explicit toggle)

   Derived tokens added beyond tokens.md (all built from tokens.md values):
     --page-pattern  the 24px dot field (dark only; "none" in light)
     --bar-bg        translucent page color behind the blurred utility bar
     --shadow        card shadow ("none" on dark, the single light shadow)
     --glow-a/-b     hero glow: --confirm at 6% over --s1 at 5%
     --selection     text selection wash (--s1 based)
     --other         alias of --s2 for SkillSpector marks */

:root {
    color-scheme: dark;

    /* Surfaces and text */
    --page: #0B1118;
    --dot: rgba(231, 238, 244, .06);
    --page-pattern: radial-gradient(var(--dot) 1px, transparent 1px);
    --surface: #121B25;
    --raised: #1A2633;
    --line: rgba(231, 238, 244, .10);
    --grid: #1E2A37;
    --axis: #2B3A4A;
    --ink: #E7EEF4;
    --ink-2: #B6C4D1;
    --muted: #7F93A6;
    --link: #8CC4FF;
    --focus: #F2B441;

    /* Decisions (always paired with a label or icon) */
    --allow: #3ED6A4;
    --confirm: #F2B441;
    --block: #FF5C8A;
    --allow-text: #3ED6A4;
    --confirm-text: #F2B441;
    --block-text: #FF5C8A;

    /* Cascade tiers (ordinal ramp) */
    --tier-1: #9EC5F4;
    --tier-2: #3987E5;
    --tier-3: #184F95;

    /* Model series: fixed order, never cycled */
    --s1: #3987E5;
    --s2: #D95926;
    --s3: #199E70;
    --s4: #C98500;
    --s5: #D55181;
    --s6: #008300;
    --s7: #9085E9;
    --s8: #E66767;
    --other: var(--s2);

    /* Sequential (one hue, heatmaps) + diverging midpoint */
    --seq-1: #CDE2FB;
    --seq-2: #9EC5F4;
    --seq-3: #5598E7;
    --seq-4: #2A78D6;
    --seq-5: #184F95;
    --mid: #2A3745;

    /* Derived */
    --bar-bg: rgba(11, 17, 24, .86);
    --shadow: none;
    --glow-a: rgba(242, 180, 65, .06);
    --glow-b: rgba(57, 135, 229, .05);
    --selection: rgba(57, 135, 229, .35);

    /* Type families */
    --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    /* Type scale (px) */
    --fs-caption: 13px;
    --fs-small: 14px;
    --fs-body: 16px;
    --fs-lede: 18px;
    --fs-h3: 22px;
    --fs-h2: 28px;
    --fs-h1-mobile: 40px;
    --fs-h1: 56px;
    --fs-hero: 64px;
    --lh-body: 1.6;
    --lh-display: 1.1;
    --measure: 72ch;

    /* Spacing scale */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* Radius */
    --r-card: 10px;
    --r-control: 6px;
    --r-pill: 999px;

    /* Layout */
    --shell-max: 1360px;
    --shell-pad: 24px;
    --rail-w: 200px;
    --rail-gap: 48px;
    --content-max: 1120px;
    --bar-h: 56px;
    --rail-bar-h: 48px;
    --header-offset: var(--bar-h);

    /* Motion: only in response to the user; one 600ms page-load reveal */
    --dur-fast: 150ms;
    --dur: 200ms;
    --dur-reveal: 600ms;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 959.98px) {
    :root {
        --header-offset: calc(var(--bar-h) + var(--rail-bar-h));
    }
}

@media (max-width: 639.98px) {
    :root {
        --shell-pad: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
        --dur-reveal: 0ms;
    }
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    
        /* Surfaces and text */
        --page: #F2F4F6;
        --dot: rgba(14, 22, 32, .07);
        --page-pattern: none;
        --surface: #FFFFFF;
        --raised: #E9EDF1;
        --line: rgba(14, 22, 32, .10);
        --grid: #E3E8EE;
        --axis: #C9D2DC;
        --ink: #0E1620;
        --ink-2: #3B4A58;
        --muted: #6C7E90;
        --link: #1D5FB8;
        --focus: #9A6200;
    
        /* Decisions */
        --allow: #0B7A5E;
        --confirm: #9A6200;
        --block: #D81B60;
        --allow-text: #07614D;
        --confirm-text: #7A4E00;
        --block-text: #B3144F;
    
        /* Cascade tiers (ordinal ramp) */
        --tier-1: #86B6EF;
        --tier-2: #2A78D6;
        --tier-3: #104281;
    
        /* Model series */
        --s1: #2A78D6;
        --s2: #EB6834;
        --s3: #1BAF7A;
        --s4: #EDA100;
        --s5: #E87BA4;
        --s6: #008300;
        --s7: #6250D6;
        --s8: #E34948;
    
        /* Sequential + diverging */
        --seq-1: #CDE2FB;
        --seq-2: #9EC5F4;
        --seq-3: #5598E7;
        --seq-4: #256ABF;
        --seq-5: #0D366B;
        --mid: #E6EAEE;
    
        /* Derived (not in tokens.md tables; see notes at top) */
        --bar-bg: rgba(242, 244, 246, .88);
        --shadow: 0 1px 2px rgba(14, 22, 32, .06);
        --glow-a: rgba(154, 98, 0, .06);
        --glow-b: rgba(42, 120, 214, .05);
        --selection: rgba(42, 120, 214, .22);
    }
}

:root[data-theme="light"] {
    color-scheme: light;

    /* Surfaces and text */
    --page: #F2F4F6;
    --dot: rgba(14, 22, 32, .07);
    --page-pattern: none;
    --surface: #FFFFFF;
    --raised: #E9EDF1;
    --line: rgba(14, 22, 32, .10);
    --grid: #E3E8EE;
    --axis: #C9D2DC;
    --ink: #0E1620;
    --ink-2: #3B4A58;
    --muted: #6C7E90;
    --link: #1D5FB8;
    --focus: #9A6200;

    /* Decisions */
    --allow: #0B7A5E;
    --confirm: #9A6200;
    --block: #D81B60;
    --allow-text: #07614D;
    --confirm-text: #7A4E00;
    --block-text: #B3144F;

    /* Cascade tiers (ordinal ramp) */
    --tier-1: #86B6EF;
    --tier-2: #2A78D6;
    --tier-3: #104281;

    /* Model series */
    --s1: #2A78D6;
    --s2: #EB6834;
    --s3: #1BAF7A;
    --s4: #EDA100;
    --s5: #E87BA4;
    --s6: #008300;
    --s7: #6250D6;
    --s8: #E34948;

    /* Sequential + diverging */
    --seq-1: #CDE2FB;
    --seq-2: #9EC5F4;
    --seq-3: #5598E7;
    --seq-4: #256ABF;
    --seq-5: #0D366B;
    --mid: #E6EAEE;

    /* Derived (not in tokens.md tables; see notes at top) */
    --bar-bg: rgba(242, 244, 246, .88);
    --shadow: 0 1px 2px rgba(14, 22, 32, .06);
    --glow-a: rgba(154, 98, 0, .06);
    --glow-b: rgba(42, 120, 214, .05);
    --selection: rgba(42, 120, 214, .22);
}