/* ==========================================================================
   tokens.css — Polyphus design system.

   Surfaces, sky and the pastel accents come from the reference UI in
   ../wishlabs-clone (measured, not guessed). Two things are Polyphus's own
   and override it wherever they meet:

     1  --orange means alive, running or actionable. Never emphasis, never
        decoration. If everything is orange, nothing is running.
     2  --mono carries every label, kicker, status and log line. Body and
        headlines stay in DM Sans; chrome is monospace. Those two registers
        are how the eye separates chrome from content.

   Use the variables, never the literals.
   ========================================================================== */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --cream:        #faf7f0;   /* page background                             */
  --cream-2:      #f8f6f2;   /* the CTA panel, one step warmer              */
  --white:        #ffffff;
  --off-white:    #f3f2f1;   /* text on dark cards                          */
  --card:         #271c40;   /* deep purple card                            */
  --card-2:       #1d1533;   /* console wells inside a card                 */
  --black:        #121212;

  /* ---- Ink ------------------------------------------------------------- */
  --ink:          #271c40;
  --ink-soft:     #675151;
  --ink-muted:    #666666;
  --ink-plain:    #000000;

  /* ---- Accents --------------------------------------------------------- */
  --orange:       #f5431f;   /* alive / running / actionable — Polyphus     */
  --orange-soft:  rgba(245, 67, 31, 0.16);
  --lavender:     #d3c2ff;   /* kickers, footer type, dividers              */
  --lilac:        #f1d3fd;   /* button label on dark                        */
  --pink:         #ff81b2;
  --pink-soft:    #fec2df;
  --blue:         #708ff5;
  --blue-2:       #94c4ff;
  --purple:       #4a3a82;
  --sand:         #dbd1cd;
  --grey:         #999999;

  /* ---- Sky ------------------------------------------------------------- */
  --sky-back:  linear-gradient(#112f72 -25%, #6e8bf3 5%, #e891e3 55%, #6b50cf 100%);
  --sky-front: linear-gradient(#497def -5%, #778bf2 5%, #6e8bf3 10%, #e891e3 15%, #6b50cf 35%);
  --glow:      #728bf3;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-accent:  'Satoshi', 'DM Sans', Helvetica, Arial, sans-serif;
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display:  clamp(38px, 4.45vw, 64px);
  --fs-h2:       clamp(34px, 3.47vw, 50px);
  --fs-hero-lede:clamp(24px, 2.43vw, 35px);
  --fs-h5:       clamp(26px, 2.22vw, 32px);
  --fs-tagline:  clamp(22px, 2.22vw, 32px);
  --fs-card:     clamp(22px, 1.95vw, 28px);
  --fs-lead:     clamp(18px, 1.67vw, 24px);
  --fs-body:     clamp(17px, 1.53vw, 22px);
  --fs-quote:    clamp(17px, 1.39vw, 20px);
  --fs-nav:      clamp(15px, 1.18vw, 17px);
  --fs-btn:      17px;
  --fs-kicker:   13px;   /* mono runs optically larger than DM Sans         */
  --fs-ui:       16px;
  --fs-log:      13px;

  --lh-tight:  1.2;
  --lh-body:   1.3;
  --lh-ui:     1.6;

  --ls-display: -0.05em;
  --ls-h2:      -0.03em;
  --ls-h5:      -0.06em;
  --ls-tight:   -0.02em;
  --ls-kicker:   0.18em;   /* wide tracking on every uppercase label        */

  /* ---- Geometry -------------------------------------------------------- */
  --page:        1440px;
  --gutter:      clamp(20px, 5.55vw, 80px);
  --w-wide:      1360px;
  --w-main:      1200px;
  --w-inner:     1120px;
  --w-text:      1040px;
  --w-heading:   1032px;
  --w-stats:     1008px;
  --w-bento:     1000px;
  --w-cards:      700px;

  --hero-h:      1800px;

  --r-card:      25px;
  --r-tile:      24px;
  --r-well:      14px;
  --r-panel:     41px;
  --r-icon:      12px;
  --r-pill:      100px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       0.8s;
  --dur-fast:  0.35s;

  /* Parallax rates — translateY = scrollY × rate. Measured off the
     reference scene: far drifts down, near climbs, middle is locked. */
  --rate-far:   0.40;
  --rate-peak:  0.20;
  --rate-mid:   0.00;
  --rate-near: -0.10;
}