/* ============================================================
   Silver Thumb Games — Typography
   ------------------------------------------------------------
   Three display voices — Dusk (cold), Surge (hot), Warp (weird)
   — over JUST Sans for text/UI. Each Latin voice has a matched Arabic
   companion (see --font-arabic-*), numerals pinned to the Latin face.
   ============================================================ */

:root {
  /* ---- Families ---- */
  /* Dusk display — sturdy display, the cold voice (Rushen · single weight) */
  --font-dusk:   'Rushen', system-ui, sans-serif;
  /* Surge display — minimal, machined nameplate, the hot voice (Rushen) */
  --font-surge:  'Rushen', system-ui, sans-serif;
  /* Warp display — accent/glitch voice (Patuk Grent). Reserved for weird moments — 404s, drops, splash, stickers, marquees. Never body or small UI. Pairs with Arc teal + the phosphor glow. */
  --font-warp:   'Patuk Grent', system-ui, sans-serif;
  /* Text & UI — neutral, legible at every size (JUST Sans · ExLight–ExBold) */
  --font-text:   'JUST Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Arabic voice system — one companion per Latin voice. Numerals (0–9) are
     pinned to the Latin companion via the STDigits-* unicode-range slice in
     fonts.css, so digits match the Latin brand face even inside Arabic copy.
     --font-arabic is the Text/UI tier — the default for generic RTL content. */
  --font-arabic:       'STDigits-JustSans', 'Playpen Sans Arabic', system-ui, sans-serif;
  --font-arabic-dusk:  'STDigits-Rushen', 'Lalezar', system-ui, sans-serif;
  --font-arabic-surge: 'STDigits-Rushen', 'Lalezar', system-ui, sans-serif;
  --font-arabic-warp:  'STDigits-PatukGrent', 'Oi', 'Lalezar', system-ui, sans-serif;
  --font-arabic-mono:  'Cascadia Code', 'HFGipbay', ui-monospace, monospace;
  /* Mono — overlines, labels, technical eyebrows */
  --font-mono:   'HFGipbay', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rushen is single-weight — no lighter cut for Surge display */
  --font-surge-weight: 400;  /* @kind font */

  /* ---- Weights ---- */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-black:    800;  /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 84px;   /* hero sign-off          */
  --fs-display:    64px;   /* display · openers      */
  --fs-h1:         48px;
  --fs-h2:         40px;   /* H2 · 40/36             */
  --fs-h3:         24px;   /* H3 · 24/26             */
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;   /* body · 16/26           */
  --fs-sm:         14px;
  --fs-xs:         13px;
  --fs-label:      12px;   /* mono labels · 11–13    */

  /* ---- Line heights ---- */
  --lh-display: 1.0;     /* @kind font */
  --lh-heading: 1.1;     /* @kind font */
  --lh-snug:    1.3;     /* @kind font */
  --lh-body:    1.625;   /* @kind font */
  --lh-relaxed: 1.75;    /* @kind font */

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;  /* tight on display (−1 to −2%) · @kind font */
  --tracking-tight:   -0.01em;  /* @kind font */
  --tracking-normal:  0;        /* @kind font */
  --tracking-caps:    0.12em;   /* section headers · spaced caps · @kind font */
  --tracking-label:   0.15em;   /* mono overlines · +15% · @kind font */
}

/* ---- Optional ergonomic helpers (consumers may use the tokens directly) ---- */
.font-dusk   { font-family: var(--font-dusk); }
.font-surge  { font-family: var(--font-surge); }
.font-warp   { font-family: var(--font-warp); }
.font-text   { font-family: var(--font-text); }
.font-mono   { font-family: var(--font-mono); }
[dir="rtl"], .font-arabic { font-family: var(--font-arabic); }
.font-arabic-dusk  { font-family: var(--font-arabic-dusk); }
.font-arabic-surge { font-family: var(--font-arabic-surge); }
.font-arabic-warp  { font-family: var(--font-arabic-warp); }
.font-arabic-mono  { font-family: var(--font-arabic-mono); }