/* ==========================================================================
   Curio — Circuit Pilgrim Design System
   Phase 1 deliverable · v0.1 · 2026-05-06
   ========================================================================== */

:root {

    /* ── PALETTE / NAVY (background system) ─────────────────────────────── */
    --navy:           #0D0D1A;   /* page background, dominant */
    --navy-deep:      #08081A;   /* deep wells, vignette */
    --navy-elev-1:    #11112A;   /* slight elevation (cards) */
    --navy-elev-2:    #15152F;   /* more elevation */
    --navy-elev-3:    #1B1B33;   /* highest elevation (chips, hover) */

    /* ── PALETTE / CIRCUIT (the brand-defining range) ────────────────────── */
    --circuit-active:    #E8550A;  /* lit traces, brand orange, CTAs */
    --circuit-glow:      #FF8B4F;  /* halo around active elements */
    --circuit-warm-core: #FFE6D5;  /* hot center of the pilgrim, near-white */
    --circuit-rest:      rgba(232, 85, 10, 0.18);  /* unlit traces visible */
    --circuit-dim:       #3A1F0F;  /* deeply unlit, almost-off traces */
    --apricot:           #F28A4C;  /* secondary warm accent */

    /* ── PALETTE / INK (text levels on navy) ─────────────────────────────── */
    --ink-100: rgba(255, 255, 255, 1);     /* titles */
    --ink-70:  rgba(255, 255, 255, 0.70);  /* body */
    --ink-50:  rgba(255, 255, 255, 0.50);  /* captions */
    --ink-30:  rgba(255, 255, 255, 0.30);  /* mute, decorative */
    --rule:    rgba(255, 255, 255, 0.07);  /* dividers */

    /* ── TYPOGRAPHY / FAMILIES ───────────────────────────────────────────── */
    --font-display: 'Syne', 'Times New Roman', serif;
    --font-body:    'DM Sans', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;  /* circuit labels, coordinates */

    /* ── TYPOGRAPHY / SCALE (modular ratio 1.333, responsive clamps) ─────── */
    --t-mega:  clamp(64px, 9.5vw, 168px);   /* hero title */
    --t-h1:    clamp(48px, 6.4vw, 104px);   /* section title */
    --t-h2:    clamp(32px, 4.2vw, 64px);    /* feature title */
    --t-h3:    clamp(22px, 2.4vw, 32px);    /* card title */
    --t-lede:  clamp(18px, 1.5vw, 22px);    /* lede paragraph */
    --t-body:  17px;                        /* body */
    --t-cap:   13px;                        /* caption */
    --t-mono:  11px;                        /* circuit annotations, eyebrow */

    --lh-tight:  0.94;
    --lh-snug:   1.15;
    --lh-base:   1.55;
    --lh-relax:  1.7;

    --tr-tight:  -0.035em;   /* hero */
    --tr-snug:   -0.025em;   /* h1/h2 */
    --tr-base:   -0.01em;
    --tr-mono:   0.18em;     /* eyebrows, labels */

    /* ── SPACING (8pt grid) ──────────────────────────────────────────────── */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  16px;
    --s-4:  24px;
    --s-5:  32px;
    --s-6:  48px;
    --s-7:  64px;
    --s-8:  96px;
    --s-9:  144px;
    --s-10: 200px;

    --pad-x: clamp(20px, 5vw, 80px);
    --pad-y-section: clamp(80px, 12vh, 160px);

    /* ── RADII ───────────────────────────────────────────────────────────── */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   24px;
    --r-xl:   38px;     /* phone screen inner */
    --r-pill: 999px;

    /* ── SHADOWS / GLOWS (the brand atmosphere) ──────────────────────────── */
    --glow-xs: 0 0 6px rgba(232, 85, 10, 0.5);
    --glow-sm: 0 0 12px var(--circuit-active);
    --glow-md: 0 0 18px var(--circuit-active),
               0 0 36px rgba(232, 85, 10, 0.35);
    --glow-lg: 0 0 32px var(--circuit-active),
               0 0 80px rgba(232, 85, 10, 0.45),
               0 0 140px rgba(232, 85, 10, 0.18);
    --shadow-deep:   0 40px 80px rgba(0, 0, 0, 0.55),
                     0 16px 32px rgba(0, 0, 0, 0.4);
    --shadow-phone:  0 60px 120px rgba(0, 0, 0, 0.65),
                     0 30px 60px rgba(0, 0, 0, 0.4),
                     inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* ── MOTION TOKENS ───────────────────────────────────────────────────── */
    --ease-out-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-circuit:   cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-back:      cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-mech:   cubic-bezier(0.65, 0, 0.35, 1);

    --d-fast:    180ms;
    --d-base:    600ms;
    --d-slow:    1200ms;
    --d-burst:   2400ms;     /* the Transformers decomposition */
    --d-pilgrim: 1800ms;     /* one segment of pilgrim travel */

    /* ── LAYOUT ──────────────────────────────────────────────────────────── */
    --max-w:        1280px;
    --max-w-wide:   1440px;
    --max-w-narrow: 720px;

    /* ── Z-LAYERS ────────────────────────────────────────────────────────── */
    --z-circuit:    1;     /* SVG circuit master, base layer */
    --z-content:    10;    /* page content */
    --z-pilgrim:    50;    /* the pilgrim sits above content */
    --z-annotation: 60;    /* annotations point to content */
    --z-nav:        100;
    --z-overlay:    9999;  /* grain, modals */

}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --d-fast:    0.01ms;
        --d-base:    0.01ms;
        --d-slow:    0.01ms;
        --d-burst:   0.01ms;
        --d-pilgrim: 0.01ms;
    }
}