/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ────────────────────────────────────────────────────────────────
   Single source of truth for spacing, colors, typography, and
   easing curves across the site. Every component and page CSS
   file should reach for these tokens instead of hardcoding values.

   Extracted from main_page_v111.html's :root block (the v111
   homepage iteration that finalized the spacing scale + color
   palette + easing vocabulary for the redesign).
   ════════════════════════════════════════════════════════════════ */

:root {
    /* ──── BACKGROUNDS / SURFACES ──── */
    --bg:                #ffffff;     /* v25 (2026-05-29): was #FAFAF8 warm off-white. Flattened to pure white so the whole light site is one tone (white + black, two tones total). */
    --bg-pure:           #ffffff;
    --bg-warm:           #F8F6F3;
    --bg-monolith:       #F4F4F5;
    --bg-card:           #f4f4f5;
    --bg-hover:          #E8E8E8;
    --dark-bg:           #000000;     /* main dark section surface — v22 trial of pure black, was #171620 cool-violet near-black */
    --dark-card:         #2A2826;
    --dark-border:       #3A3735;
    --canvas:            #34322e;
    --card:              #ffffff;

    /* ──── TEXT ──── */
    --text-primary:      #171620;
    --text-black:        #000000;
    --text-secondary:    #52525B;
    --text-tertiary:     #A1A1AA;
    --text-muted:        #999999;

    /* ──── BORDERS ──── */
    --border-premium:    rgba(0, 0, 0, 0.08);
    --border-soft:       #F0F0F0;
    --border:            rgb(219, 218, 215);
    --border-subtle:     #F0F0F0;

    /* ──── INK SCALE (grayscale ramp) ──── */
    --ink-100:           #171620;
    --ink-80:            #27272A;
    --ink-60:            #52525B;
    --ink-40:            #71717A;
    --ink-20:            #A1A1AA;
    --ink-10:            #D4D4D8;
    --ink-05:            #E4E4E7;
    --ink-02:            #F4F4F5;

    /* ──── ACCENT / BRAND ──── */
    --accent:            #F97316;     /* legacy orange (retired from logo, retained as warm accent) */
    --accent-soft:       #FFF7ED;
    --accent-glow:       rgba(249, 115, 22, 0.4);
    --accent-btn:        #FEE8D6;
    --brand-blue:        #5B7CFF;     /* new primary accent — convergence pulses, AI pills */
    --gold:              #D4A017;

    /* ──── STATUS COLORS ──── */
    --success:           #10B981;
    --success-soft:      #ECFDF5;
    --green:             #10B981;
    --green-soft:        rgba(16, 185, 129, 0.12);
    --amber:             #F59E0B;
    --amber-soft:        rgba(245, 158, 11, 0.12);
    --warning:           #f59e0b;
    --orange:            #F97316;
    --orange-soft:       rgba(249, 115, 22, 0.12);
    --alert:             #ef4444;
    --alert-soft:        #FEF2F2;
    --red:               #EF4444;
    --red-soft:          rgba(239, 68, 68, 0.12);

    /* ──── TYPOGRAPHY ──── */
    --font-sans:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui:           'Inter', sans-serif;
    --font-mono:         'Space Mono', monospace;

    /* ──── RADII ──── */
    --radius-sharp:      0px;
    --radius-machine:    2px;
    --radius-panel:      12px;
    --radius-sm:         2px;

    /* ──── SHADOWS ──── */
    --shadow-card:       0 1px 2px rgba(0,0,0,0.04);
    --shadow-float:      0 20px 40px -10px rgba(0, 0, 0, 0.08);

    /* ──── EASING CURVES ──── */
    --spring:            cubic-bezier(0.16, 1, 0.3, 1);
    --ease-monolith:     cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:       cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-cinematic:    cubic-bezier(0.16, 1, 0.3, 1);

    /* ──── SPACING SCALE — 8pt grid with 4pt half-steps ────
       Reach for the token that matches the *purpose* of the
       break you're creating, not the px number you guessed.

       TIGHT       — inside a card / form / row
         --space-1   4px   hairline gaps (icon ↔ label)
         --space-2   8px   tight inline pairs
         --space-3  12px   dense list rows
         --space-4  16px   default component padding
         --space-5  20px   comfortable list row
         --space-6  24px   comfortable component padding

       MEDIUM      — inside a section
         --space-8  32px   between related elements
         --space-10 40px   block + its supporting copy
         --space-12 48px   between unrelated elements in a section

       LARGE       — section structure
         --space-16 64px   between sub-sections
         --space-20 80px   between major beats of a section
         --space-24 96px   section interludes
         --space-32 128px  hard section breaks
         --space-40 160px  outer section padding (top/bottom) */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;
}