/* ============================================================
   jazzycalvina.com — TOKENS
   The single source of truth. Nothing below this file should
   hardcode a colour, size, duration, or easing.
   ============================================================ */

:root{

  /* ---- CORE PALETTE (locked) ------------------------------ */
  --c-ink:        #2b2b2b;   /* base surface                  */
  --c-paper:      #e4e2dd;   /* base text                     */
  --c-signal:     #7694b7;   /* the only accent               */

  /* ---- DERIVED SURFACES ----------------------------------- */
  /* Derived from --c-ink only. No new hues are introduced.    */
  --surface-0:    #212121;   /* deepest — hero, monument beats */
  --surface-1:    #2b2b2b;   /* default page surface           */
  --surface-2:    #323232;   /* raised — cards, panels         */
  --surface-3:    #3a3a3a;   /* highest — nested, hover        */
  --surface-sunk: #1c1c1c;   /* recessed — code, wells         */

  /* ---- TEXT ----------------------------------------------- */
  --text-primary:   #e4e2dd;
  --text-secondary: rgba(228,226,221,0.66);
  --text-tertiary:  rgba(228,226,221,0.42);
  --text-ghost:     rgba(228,226,221,0.10);
  --text-signal:    #7694b7;
  --text-on-signal: #1c1c1c;

  /* ---- SIGNAL SCALE --------------------------------------- */
  --signal-bright: #93abc8;
  --signal-base:   #7694b7;
  --signal-muted:  rgba(118,148,183,0.45);
  --signal-faint:  rgba(118,148,183,0.14);
  --signal-glow:   rgba(118,148,183,0.30);

  /* ---- LINES ---------------------------------------------- */
  --line-faint:  rgba(228,226,221,0.08);
  --line-base:   rgba(228,226,221,0.14);
  --line-strong: rgba(228,226,221,0.26);

  /* ---- TYPEFACES (locked) --------------------------------- */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body:    'Roboto', system-ui, sans-serif;
  --font-ui:      'Rubik', system-ui, sans-serif;

  /* ---- TYPE SCALE (fluid) --------------------------------- */
  --t-mono:    0.72rem;
  --t-micro:   0.78rem;
  --t-small:   0.88rem;
  --t-body:    1rem;
  --t-lead:    clamp(1.05rem, 1.6vw, 1.25rem);
  --t-h4:      clamp(1.1rem, 2vw, 1.35rem);
  --t-h3:      clamp(1.3rem, 2.8vw, 1.8rem);
  --t-h2:      clamp(1.7rem, 4.2vw, 2.7rem);
  --t-h1:      clamp(2.3rem, 6.5vw, 4.4rem);
  --t-monument: clamp(2.6rem, 11vw, 8rem);

  --lh-tight: 1.06;
  --lh-snug:  1.25;
  --lh-body:  1.62;

  --ls-caps:  0.09em;
  --ls-wide:  0.14em;
  --ls-tight: -0.01em;

  /* ---- SPACE (8px base) ----------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 44px;  --s-8: 64px;
  --s-9: 88px;  --s-10: 120px;

  --pad-section-y: clamp(64px, 9vw, 128px);
  --pad-section-x: clamp(22px, 7vw, 104px);
  --measure:       68ch;   /* max reading width */
  --measure-tight: 46ch;

  /* ---- RADIUS + DEPTH ------------------------------------- */
  --r-sm: 2px;  --r-md: 4px;  --r-lg: 8px;  --r-pill: 999px;
  --shadow-raise: 0 2px 20px rgba(0,0,0,0.28);
  --shadow-lift:  0 12px 44px rgba(0,0,0,0.40);

  /* ---- MOTION --------------------------------------------- */
  /* Durations describe intent, not milliseconds.              */
  --d-instant: 120ms;   /* state feedback: hover, focus        */
  --d-quick:   240ms;   /* small transitions                   */
  --d-base:    420ms;   /* standard entrances                  */
  --d-slow:    760ms;   /* deliberate reveals                  */
  --d-glacial: 1600ms;  /* ambient, atmospheric                */

  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);      /* decelerate — entrances  */
  --e-in:    cubic-bezier(0.64, 0, 0.78, 0);      /* accelerate — exits      */
  --e-soft:  cubic-bezier(0.45, 0, 0.55, 1);      /* symmetrical             */
  --e-snap:  cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot        */

  /* Distance an element travels on entrance. */
  --travel-sm: 10px;
  --travel-md: 22px;
  --travel-lg: 44px;

  /* ---- LAYERS --------------------------------------------- */
  --z-base: 1;      --z-raised: 10;   --z-spine: 40;
  --z-nav: 60;      --z-menu: 70;     --z-grain: 90;

  /* ---- FOCUS ---------------------------------------------- */
  --focus-ring: 2px solid var(--signal-bright);
  --focus-offset: 3px;
}

/* ============================================================
   REDUCED MOTION
   Collapse durations to near-zero and travel to zero at the
   token level, so every component inherits the behaviour
   without writing its own media query.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  :root{
    --d-instant: 1ms; --d-quick: 1ms; --d-base: 1ms;
    --d-slow: 1ms;    --d-glacial: 1ms;
    --travel-sm: 0px; --travel-md: 0px; --travel-lg: 0px;
  }
}