/* ============================================================
   TOKENS — the whole design system in one file.

   Two surface families rather than two themes. A page moves
   between them deliberately: light for reading, dark for
   cinematic moments. Both are always available, so a dark
   section can sit inside a light page without a theme switch.

   Every accent has a light-surface and a dark-surface variant
   so contrast never drops below WCAG AA in either context.
   ============================================================ */

:root {
    color-scheme: light dark;

    /* ---------- Neutral ramp (warm, not blue-grey) ---------- */
    --stone-0:   #FFFFFF;
    --stone-25:  #FBFBFA;
    --stone-50:  #F7F6F4;
    --stone-100: #F0EEEB;
    --stone-150: #E7E5E2;
    --stone-200: #D9D6D1;
    --stone-300: #BFBAB3;
    --stone-400: #9C968D;
    --stone-500: #78716C;
    --stone-600: #57534E;
    --stone-700: #3F3B37;
    --stone-800: #292623;
    --stone-850: #1C1A18;
    --stone-900: #141312;
    --stone-950: #0C0B0B;
    --ink:       #08080A;
    --ink-raised:#131316;
    --ink-sunken:#0C0C0F;
    --ink-line:  #1F1F24;

    /* ---------- Brand accents ---------- */
    /* Cyan is retained as identity but disciplined into an accent.
       The -on-light values are darkened for 4.5:1 against white. */
    --signal-on-light:        #0E7490;
    --signal-on-dark:         #22D3EE;
    --signal-quiet-on-light:  #ECFEFF;
    --signal-quiet-on-dark:   #0B3B45;

    --hazard-on-light:        #B45309;
    --hazard-on-dark:         #FBBF24;
    --field-on-light:         #6D28D9;
    --field-on-dark:          #A78BFA;
    --verified-on-light:      #047857;
    --verified-on-dark:       #34D399;
    --fault-on-light:         #B91C1C;
    --fault-on-dark:          #F87171;

    /* ---------- Type ---------- */
    --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-display-1: clamp(3rem, 8.5vw, 7.5rem);
    --text-display-2: clamp(2.25rem, 5vw, 4rem);
    --text-h1:        clamp(2rem, 4vw, 3rem);
    --text-h2:        clamp(1.5rem, 2.6vw, 1.875rem);
    --text-h3:        1.375rem;
    --text-lg:        1.125rem;
    --text-base:      1rem;
    --text-sm:        0.875rem;
    --text-xs:        0.8125rem;
    --text-micro:     0.6875rem;

    --leading-display: 1.02;
    --leading-tight:   1.18;
    --leading-snug:    1.4;
    --leading-body:    1.65;

    --tracking-display: -0.03em;
    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-label:   0.16em;
    --tracking-mono:    0.08em;

    --measure: 68ch;

    /* ---------- Space (4px base) ---------- */
    --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;     --s-5: 1.25rem;
    --s-6:  1.5rem;   --s-8:  2rem;     --s-10: 2.5rem;  --s-12: 3rem;
    --s-16: 4rem;     --s-20: 5rem;     --s-24: 6rem;    --s-32: 8rem;
    --s-40: 10rem;    --s-48: 12rem;

    /* Generous vertical rhythm is the cheapest luxury signal there is. */
    --section-y: clamp(5rem, 11vw, 11rem);
    --section-y-tight: clamp(3.5rem, 7vw, 6rem);

    /* ---------- Layout ---------- */
    --container:      1280px;
    --container-wide: 1440px;
    --container-prose: 720px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* ---------- Motion ---------- */
    --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
    --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
    --ease-in-out:    cubic-bezier(.65, 0, .35, 1);
    --dur-fast:  160ms;
    --dur:       320ms;
    --dur-slow:  620ms;
    --dur-reveal: 900ms;

    /* ---------- Z ---------- */
    --z-base: 1;
    --z-sticky: 40;
    --z-nav: 50;
    --z-overlay: 80;
    --z-modal: 90;
    --z-toast: 100;
}

/* ============================================================
   SURFACE CONTEXTS

   Anything inside .surface-light or .surface-dark resolves its
   colours from that context. Components never hard-code a
   colour — they use --bg / --fg / --accent and inherit.
   ============================================================ */

.surface-light,
:root {
    --bg:          var(--stone-25);
    --bg-raised:   var(--stone-0);
    --bg-sunken:   var(--stone-50);
    --bg-inset:    var(--stone-100);
    --line:        var(--stone-150);
    --line-strong: var(--stone-200);

    --fg:          var(--stone-900);
    --fg-muted:    var(--stone-600);
    --fg-subtle:   var(--stone-500);
    --fg-faint:    var(--stone-400);

    --accent:        var(--signal-on-light);
    --accent-quiet:  var(--signal-quiet-on-light);
    --hazard:        var(--hazard-on-light);
    --field:         var(--field-on-light);
    --verified:      var(--verified-on-light);
    --fault:         var(--fault-on-light);

    --lift-1: 0 1px 2px rgb(20 19 18 / .04), 0 2px 6px rgb(20 19 18 / .04);
    --lift-2: 0 2px 4px rgb(20 19 18 / .04), 0 8px 20px rgb(20 19 18 / .06);
    --lift-3: 0 4px 8px rgb(20 19 18 / .05), 0 18px 44px rgb(20 19 18 / .09);
    --lift-4: 0 8px 16px rgb(20 19 18 / .06), 0 32px 80px rgb(20 19 18 / .14);

    --selection-bg: var(--signal-quiet-on-light);
    --selection-fg: var(--stone-900);
}

.surface-dark {
    --bg:          var(--ink);
    --bg-raised:   var(--ink-raised);
    --bg-sunken:   var(--ink-sunken);
    --bg-inset:    #0A0A0D;
    --line:        var(--ink-line);
    --line-strong: #2A2A31;

    --fg:          #FAFAF9;
    --fg-muted:    #A8A29E;
    --fg-subtle:   #7C7671;
    --fg-faint:    #57534E;

    --accent:        var(--signal-on-dark);
    --accent-quiet:  var(--signal-quiet-on-dark);
    --hazard:        var(--hazard-on-dark);
    --field:         var(--field-on-dark);
    --verified:      var(--verified-on-dark);
    --fault:         var(--fault-on-dark);

    /* Elevation on dark reads as light, not shadow. */
    --lift-1: 0 0 0 1px rgb(255 255 255 / .04);
    --lift-2: 0 0 0 1px rgb(255 255 255 / .06), 0 8px 24px rgb(0 0 0 / .5);
    --lift-3: 0 0 0 1px rgb(255 255 255 / .07), 0 18px 44px rgb(0 0 0 / .6);
    --lift-4: 0 0 0 1px rgb(255 255 255 / .09), 0 32px 80px rgb(0 0 0 / .7);

    --selection-bg: var(--signal-on-dark);
    --selection-fg: var(--ink);
}

/* ============================================================
   THEME

   data-theme is stamped on <html> before first paint by the
   inline script in head.php, so there is never a flash.
   In dark theme the page default flips to the dark surface —
   but an explicit .surface-light section still wins.
   ============================================================ */

html[data-theme="dark"] {
    --bg:          var(--ink);
    --bg-raised:   var(--ink-raised);
    --bg-sunken:   var(--ink-sunken);
    --bg-inset:    #0A0A0D;
    --line:        var(--ink-line);
    --line-strong: #2A2A31;

    --fg:          #FAFAF9;
    --fg-muted:    #A8A29E;
    --fg-subtle:   #7C7671;
    --fg-faint:    #57534E;

    --accent:        var(--signal-on-dark);
    --accent-quiet:  var(--signal-quiet-on-dark);
    --hazard:        var(--hazard-on-dark);
    --field:         var(--field-on-dark);
    --verified:      var(--verified-on-dark);
    --fault:         var(--fault-on-dark);

    --lift-1: 0 0 0 1px rgb(255 255 255 / .04);
    --lift-2: 0 0 0 1px rgb(255 255 255 / .06), 0 8px 24px rgb(0 0 0 / .5);
    --lift-3: 0 0 0 1px rgb(255 255 255 / .07), 0 18px 44px rgb(0 0 0 / .6);
    --lift-4: 0 0 0 1px rgb(255 255 255 / .09), 0 32px 80px rgb(0 0 0 / .7);

    --selection-bg: var(--signal-on-dark);
    --selection-fg: var(--ink);
}

/* In dark theme a "light" section becomes a raised dark panel rather
   than a jarring white slab — the contrast still reads, the eye doesn't
   get burned at night. */
html[data-theme="dark"] .surface-light {
    --bg:          var(--ink-raised);
    --bg-raised:   #191920;
    --bg-sunken:   var(--ink);
    --bg-inset:    #0A0A0D;
    --line:        #26262D;
    --line-strong: #34343C;

    --fg:          #FAFAF9;
    --fg-muted:    #A8A29E;
    --fg-subtle:   #7C7671;
    --fg-faint:    #57534E;

    --accent:        var(--signal-on-dark);
    --accent-quiet:  var(--signal-quiet-on-dark);
    --hazard:        var(--hazard-on-dark);
    --field:         var(--field-on-dark);
    --verified:      var(--verified-on-dark);
    --fault:         var(--fault-on-dark);
}