/* ============================================================
   ALEX v3 — DESIGN TOKENS (shared foundation)
   Derived from comp A (recordatorio medianoche, 19/20) + comp D
   (nota de voz, 19/20) per _intel/DIRECTION_LOCK.md.
   World: night-plum ground · flash white · guava notification
   light · periwinkle screen-light · muted rose intimate register.
   BANNED anywhere in this site: brass / ivory / espresso / bone /
   paper-cream values (the old house palette). Do not add them.
   ============================================================ */
:root{

  /* ---------- COLOUR · grounds ---------- */
  --night:      #170F18;               /* page ground: the dark room */
  --night-deep: #100A11;               /* deepest ground, scrims, hero edges */
  --night-2:    #201322;               /* lifted panel (cards, reminder ground) */
  --ink:        #221826;               /* text ON flash panels (mounted prints) */

  /* ---------- COLOUR · light ---------- */
  --flash:       #FFF8F5;              /* flash white — primary text */
  --flash-90:    rgba(255,248,245,.9); /* body text default */
  --flash-dim:   rgba(255,248,245,.62);/* secondary text */
  --flash-faint: rgba(255,248,245,.38);/* captions, cues */
  --line:        rgba(255,248,245,.12);/* hairlines, borders */
  --line-soft:   rgba(255,248,245,.08);/* quieter hairlines */

  /* ---------- COLOUR · accents ---------- */
  --guava:        #FF5C69;             /* notification light: CTA, live dot, ¿, timestamps */
  --guava-bright: #FF7580;             /* hover state of guava surfaces */
  --guava-glow:   rgba(255,92,105,.32);/* soft glow shadow around guava objects */
  --peri:         #7D78FF;             /* screen-light: links, focus, annotations */
  --peri-dim:     rgba(125,120,255,.45);
  --rose:         #E9B8C6;             /* her intimate register */
  --rose-70:      rgba(233,184,198,.72);
  --rose-dim:     rgba(233,184,198,.5);

  /* ---------- TYPE · families ---------- */
  /* Boska = display serif (v3 upgrade per lock) · General Sans = UI voice
     · Switzer = body + verified tnum numerals · Gambetta = intimate italic */
  --font-display: 'Boska','Gambetta',Georgia,serif;
  --font-sans:    'General Sans',-apple-system,'Segoe UI','Helvetica Neue',sans-serif;
  --font-body:    'Switzer',-apple-system,'Segoe UI','Helvetica Neue',sans-serif;
  --font-serif:   'Gambetta',Georgia,serif;

  /* ---------- TYPE · scale (mobile-first clamps) ---------- */
  --text-display: clamp(2.5rem, 9.6vw, 5.1rem);   /* h1 / hero question */
  --text-h2:      clamp(1.85rem, 6.4vw, 3rem);    /* section questions */
  --text-h3:      clamp(1.35rem, 4.8vw, 1.9rem);  /* sub-blocks */
  --text-quote:   clamp(1.35rem, 5.2vw, 2.1rem);  /* reminders, epigraphs */
  --text-lead:    clamp(1.02rem, 2.4vw, 1.18rem); /* ledes */
  --text-body:    1.0625rem;                      /* 17px running text */
  --text-small:   .9rem;
  --text-caption: .75rem;                          /* figcaptions, metas */
  --text-micro:   .7rem;                           /* smallest legal/cue text */

  /* ---------- TYPE · detail ---------- */
  --track-tight: -.018em;   /* display headlines */
  --track-caps:  .14em;     /* letterspaced caps/metas */
  --track-wide:  .2em;      /* scroll cues, tiny labels */
  --leading-tight: 1.08;    /* display */
  --leading-snug:  1.3;     /* quotes/reminders */
  --leading-body:  1.65;    /* running text */

  /* ---------- SPACE ---------- */
  --pad:        clamp(1.25rem, 4.5vw, 4rem);      /* section inline padding */
  --section-y:  clamp(4.5rem, 12vh, 8.5rem);      /* section block padding */
  --space-2xs:  .35rem;
  --space-xs:   .6rem;
  --space-s:    1rem;
  --space-m:    1.6rem;
  --space-l:    2.6rem;
  --space-xl:   4rem;
  --measure:       56ch;    /* running text max width */
  --measure-quote: 26ch;    /* reminders / pull lines */
  --measure-lede:  46ch;

  /* ---------- SHAPE ---------- */
  --radius:       2px;      /* the house radius — everything is 2px */
  --radius-round: 50%;

  /* ---------- ELEVATION ---------- */
  --shadow-plate: 0 30px 60px -30px rgba(0,0,0,.8);
  --shadow-page:  0 40px 80px -38px rgba(0,0,0,.9);
  --shadow-glow:  0 0 32px var(--guava-glow);

  /* ---------- MOTION ---------- */
  --dur-1: .25s;            /* hovers, toggles */
  --dur-2: .6s;             /* small entrances */
  --dur-3: 1.15s;           /* line reveals, card entrances */
  --dur-4: 2.2s;            /* spotlight lifts */
  --ease-out:   cubic-bezier(.16,1,.3,1);   /* expo-like arrival */
  --ease-inout: cubic-bezier(.65,0,.35,1);

  /* ---------- Z ---------- */
  --z-skip:   100;
  --z-nav:    90;
  --z-menu:   88;
  --z-ctabar: 85;
  --z-grain:  80;

  /* ---------- SPOTLIGHT ENGINE ---------- */
  /* --spot: 0 = the room is dark · 1 = fully lit.
     Default 1 so no-JS / reduced-motion / harness renders are LIT.
     site.js (motion mode) sets 0 and scrubs to 1 via ScrollTrigger. */
  --spot: 1;
  --spot-x: 50%;            /* spotlight centre, overridable per section */
  --spot-y: 40%;
  --spot-veil-core: rgba(16,10,17,.58);  /* darkness at the spot centre when closed */
  --spot-veil-edge: rgba(16,10,17,.985); /* darkness at the room edges when closed */
}

@media (min-width:900px){
  :root{
    --text-body: 1.09rem;
  }
}