/* ============================================================================
   tokens.css — Sentinel v2 design tokens.

   Custom properties only. No selectors that paint anything; consumers
   reference these via `var(--…)`. Anything visual lives in site.css or
   states.css.

   Phase 0 establishes:
     - the state palette from UI_UPGRADE_PLAN §5 (cold/low/good/warm/hot)
       in both light and dark variants
     - typography, spacing, radii, shadow, z-index scales
     - border + surface colors
     - motion timing
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* ---- typography ----------------------------------------------------- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  1rem;
    --fs-md:    1.0625rem;
    --fs-lg:    1.25rem;
    --fs-xl:    1.5rem;
    --fs-2xl:   2rem;
    --lh-tight: 1.2;
    --lh-base:  1.5;

    /* ---- spacing -------------------------------------------------------- */
    --space-0:  0;
    --space-1:  .25rem;
    --space-2:  .5rem;
    --space-3:  .75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;

    /* ---- radii / shadows / motion -------------------------------------- */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, .15);
    --motion-fast:   120ms;
    --motion-base:   200ms;
    --motion-slow:   320ms;
    --easing:        cubic-bezier(.2, .8, .2, 1);

    /* ---- z-index -------------------------------------------------------- */
    --z-topbar:    50;
    --z-dropdown:  60;
    --z-modal:     70;
    --z-toast:     80;
    --z-tooltip:   90;

    /* ---- surfaces / borders (light) ------------------------------------ */
    --surface-0:   #ffffff;        /* page background */
    --surface-1:   #f8fafc;        /* cards, raised surfaces */
    --surface-2:   #f1f5f9;        /* hover */
    --surface-3:   #e2e8f0;        /* selected */
    --ink-0:       #0f172a;        /* primary text */
    --ink-1:       #334155;        /* secondary text */
    --ink-2:       #64748b;        /* tertiary / hint */
    --ink-inv:     #ffffff;
    --border-0:    #e2e8f0;
    --border-1:    #cbd5e1;
    --focus:       #2563eb;
    --link:        #1d4ed8;
    --link-hover:  #1e40af;

    /* ---- state palette (UI_UPGRADE_PLAN §5) ---------------------------- */
    /* Each state has a foreground (text), a background (chip/cell), and a
       "border" used by tile head strips. */
    --state-cold-fg:   #1d4ed8;
    --state-cold-bg:   #dbeafe;
    --state-cold-bd:   #1d4ed8;

    --state-low-fg:    #0369a1;
    --state-low-bg:    #e0f2fe;
    --state-low-bd:    #0ea5e9;

    --state-good-fg:   #15803d;
    --state-good-bg:   #dcfce7;
    --state-good-bd:   #15803d;

    --state-warm-fg:   #b45309;
    --state-warm-bg:   #fef3c7;
    --state-warm-bd:   #b45309;

    --state-hot-fg:    #b91c1c;
    --state-hot-bg:    #fee2e2;
    --state-hot-bd:    #b91c1c;

    /* Auxiliary markers — track (stale), txf (tx fail), trigger, timeout */
    --marker-stale:    #6b7280;
    --marker-txfail:   #b91c1c;
    --marker-trigger:  #ea580c;
    --marker-timeout:  #6b21a8;

    /* Accent (used for the staging pill and primary buttons) */
    --accent:          #1d4ed8;
    --accent-fg:       #ffffff;
    --warning-bg:      #fef3c7;
    --warning-fg:      #78350f;
}

/* Dark mode — overrides; class names stay identical so consumers don't have
   to branch. The palette intentionally lifts saturation rather than changes
   hue, so glyph/ARIA cues stay legible. */
@media (prefers-color-scheme: dark) {
    :root {
        --surface-0: #0b1220;
        --surface-1: #111a2c;
        --surface-2: #18223a;
        --surface-3: #1f2c4a;
        --ink-0:     #e2e8f0;
        --ink-1:     #cbd5e1;
        --ink-2:     #94a3b8;
        --border-0:  #1f2c4a;
        --border-1:  #334155;
        --focus:     #60a5fa;
        --link:      #93c5fd;
        --link-hover:#bfdbfe;

        --state-cold-fg:   #93c5fd;
        --state-cold-bg:   #1e3a8a33;
        --state-cold-bd:   #60a5fa;

        --state-low-fg:    #7dd3fc;
        --state-low-bg:    #0c4a6e44;
        --state-low-bd:    #38bdf8;

        --state-good-fg:   #86efac;
        --state-good-bg:   #14532d33;
        --state-good-bd:   #22c55e;

        --state-warm-fg:   #fcd34d;
        --state-warm-bg:   #78350f33;
        --state-warm-bd:   #f59e0b;

        --state-hot-fg:    #fca5a5;
        --state-hot-bg:    #7f1d1d33;
        --state-hot-bd:    #ef4444;

        --marker-stale:    #94a3b8;
        --marker-txfail:   #f87171;
        --marker-trigger:  #fb923c;
        --marker-timeout:  #c084fc;

        --accent:          #60a5fa;
        --accent-fg:       #0b1220;
        --warning-bg:      #78350f55;
        --warning-fg:      #fde68a;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55);
    }
}

/* Manual override: <html class="theme-dark"> forces dark, regardless of the
   OS preference. Mirrors the v1 `DarkmodeEnabled` cookie behavior. */
html.theme-dark {
    color-scheme: dark;
}
html.theme-light {
    color-scheme: light;
}