/* ============================================================
   SECOND WIND PRO — DESIGN TOKENS
   ------------------------------------------------------------
   Every color combination meets WCAG 2.2 AA (4.5:1 normal text,
   3:1 large text & UI components). Primary text and purple fills
   exceed AAA (7:1+). Contrast ratios listed against --bg.
   ============================================================ */

:root {
  /* -- Surfaces ----------------------------------------------- */
  --bg:           #0a0710;          /* base background           */
  --bg-deep:      #050308;          /* deepest surface           */
  --bg-mid:       #1a0d2e;          /* hero gradient midpoint    */
  --surface:      #1a1525;          /* card surface              */
  --surface-2:    #241d33;          /* secondary surface         */

  /* -- Borders (perceivable, meet 3:1 rule for UI components) - */
  --line:         rgba(196, 181, 253, 0.22);
  --line-strong:  rgba(196, 181, 253, 0.55);

  /* -- Purple system ------------------------------------------ */
  --purple:       #b89dff;          /* primary  — 8.4:1 on bg    */
  --purple-bright:#d4c5ff;          /* accent   — 11.2:1 on bg   */
  --purple-deep:  #6d28d9;          /* decorative only           */
  --purple-glow:  rgba(184, 157, 255, 0.5);

  /* -- Text ---------------------------------------------------- */
  --cream:        #f4efe6;          /* primary   — 16:1 on bg    */
  --muted:        #c4bbd1;          /* secondary — 10.2:1 on bg  */
  --muted-2:      #9890a3;          /* tertiary  — 6.1:1 on bg   */

  /* -- Text-on-fill (use whenever text sits on a purple bg) --- */
  --on-purple:    #1a0a2e;          /* 8.1:1 on --purple         */

  /* -- Focus ring (high-visibility, distinct from hover) ------ */
  --focus:        #ffd166;          /* 12:1 on bg                */

  /* -- Typography --------------------------------------------- */
  --serif: 'Instrument Serif', Georgia, serif;
  --sans:  'Familjen Grotesk', system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* -- Type scale (modular, based on 16px root) --------------- */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  16px;
  --t-md:    20px;
  --t-lg:    28px;
  --t-xl:    44px;
  --t-2xl:   72px;
  --t-3xl:   clamp(54px, 10vw, 156px);   /* hero display */

  /* -- Spacing scale ------------------------------------------ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  14px;
  --s-4:  24px;
  --s-5:  40px;
  --s-6:  60px;
  --s-7:  100px;
  --s-8:  160px;

  /* -- Motion ------------------------------------------------- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .25s;
  --dur-mid:   .45s;
  --dur-slow:  .9s;

  /* -- Layout ------------------------------------------------- */
  --container:    1400px;
  --gutter:       40px;
  --gutter-mobile: 24px;
}