/* ============================================================
   Dead Zed's Revenge — Design Tokens
   Ported verbatim from game-design/archive/design-handoff/design-reference/
   tokens/* (colours, spacing, radius, typography, font
   families). The ONE deliberate change vs the handoff: the
   Google Fonts @import in tokens/fonts.css is dropped and the
   three families are self-hosted below via @font-face so a
   strict CSP needs no external font origin and the app works
   offline. If a value isn't a token, it's a bug.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS — Pirata One / Cinzel / Oswald.
   Replaces the design handoff's Google Fonts @import so the
   CSP can stay strict (no external font origin) and the app
   works offline. woff2 files live in wwwroot/fonts/.
   Cinzel and Oswald are variable fonts (one file per subset,
   a weight range covers every step).
   ============================================================ */
@font-face {
  font-family: "Pirata One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pirata-one-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pirata One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pirata-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cinzel-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cinzel-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   FONTS — three families, three jobs. Never add a fourth.
   Self-hosted above (see @font-face). Same stacks as the
   handoff's tokens/fonts.css, minus the Google Fonts @import.
   ------------------------------------------------------------
   Pirata One  -> display / decorative horror headlines
   Cinzel      -> engraved proper names (survivors, killers)
   Oswald      -> EVERYTHING else (UI, body, numbers, labels)
   ============================================================ */
:root {
  --font-display: "Pirata One", "Cinzel", serif;   /* horror poster voice — headlines & CTAs */
  --font-name:    "Cinzel", "Pirata One", serif;   /* engraved nameplates — proper names only */
  --font-ui:      "Oswald", system-ui, -apple-system, sans-serif; /* the workhorse */
}

/* ============================================================
   TYPOGRAPHY SCALE — 8 named steps + 1 special "counter".
   Small steps (micro->title) fixed; large display steps fluid
   with clamp() so headlines/heroes/tally scale on phones.
   ============================================================ */
:root {
  /* ---- size scale ---- */
  --text-micro:    10px;
  --text-label:    12px;
  --text-body-sm:  14px;
  --text-body:     16px;
  --text-title:    20px;
  --text-heading:  clamp(20px, 2.6vw, 24px);
  --text-display:  clamp(25px, 3.6vw, 32px);
  --text-hero:     clamp(30px, 5.4vw, 48px);
  --text-counter:  clamp(44px, 11vw, 80px);

  /* ---- line-height ramp ---- */
  --leading-counter: 0.8;   /* huge numerals, optical tight */
  --leading-display: 0.95;  /* Pirata One headlines */
  --leading-heading: 1.1;   /* headings & stat numbers */
  --leading-snug:    1.25;  /* titles, single-line labels */
  --leading-body:    1.5;   /* paragraphs */

  /* ---- weights — 4 collapsed to 3 (300 -> 400, 500 -> 600) ---- */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- letter-spacing — 11 collapsed to 3 ---- */
  --tracking-normal:  0;
  --tracking-label:   1.5px;
  --tracking-eyebrow: 2.5px;
}

/* ============================================================
   COLOUR — near-black violet surface ramp + Twitch-purple
   brand + four two-tone semantic accents. Use the SEMANTIC
   tokens in product code.
   ============================================================ */
:root {
  /* ---------- surfaces: near-black violet ramp ---------- */
  --bg-base:     #0e0b15;  /* page background (deepest) */
  --bg-deep:     #14101c;  /* deepest card / portrait well */
  --surface-1:   #1a1426;  /* default card */
  --surface-2:   #1e1830;  /* raised panel / row */
  --surface-3:   #241d34;  /* inset chip / empty segment */

  /* ---------- borders / hairlines ---------- */
  --border-subtle: #2a2040;
  --border:        #342a4a;
  --border-strong: #4a4060;

  /* ---------- text ---------- */
  --text-primary:    #ece8f3;  /* near-white lavender — headings & key values */
  --text-secondary:  #b6a9cf;  /* secondary copy */
  --text-muted:      #8b7fa6;  /* labels, captions (most-used UI grey) */
  --text-faint:      #6f6488;  /* footnotes, disabled, dividers-as-text */
  --text-on-color:   #ffffff;  /* on brand/action fills */
  --text-on-light:   #0e0b15;  /* on teal/amber fills */

  /* ---------- brand: Twitch purple ---------- */
  --brand:        #9146ff;  /* primary brand / Morf_ identity */
  --brand-muted:  #6d4f9c;  /* secondary buttons, perk diamonds, borders */
  --brand-light:  #c79cff;  /* accents, links, Tears currency */
  --brand-deep:   #4a3570;  /* deep purple panel borders */

  /* ---------- semantic accents ---------- */
  --success:      #5ee0bd;  /* ESCAPE / Bones currency / positive */
  --success-dim:  #3ccfa6;  /* success secondary */
  --success-deep: #2a9e80;  /* success border / gradient end */

  --danger:       #ff7a68;  /* DEATH / failure / negative */
  --danger-deep:  #e0503f;  /* danger border / gradient end */
  --danger-blood:      #c8181e;  /* cinematic game-over red (death screen only) */
  --danger-blood-deep: #8a0c14;  /* blood CTA gradient end (death screen) */

  --warning:      #e8a33a;  /* CHALLENGE / amber emphasis */
  --warning-deep: #b8941a;  /* meta-perk gold border */

  --action:       #f0742f;  /* START MATCH primary CTA orange */
  --action-deep:  #d24823;  /* CTA gradient end / pressed */

  /* ---------- currency aliases (semantic of semantic) ---------- */
  --bones: var(--success);      /* 🦴 Bones — the run economy */
  --tears: var(--brand-light);  /* 💧 Tears — the perk economy */

  /* ---------- difficulty tiers ---------- */
  --tier-easy: var(--success-dim);
  --tier-med:  var(--warning);
  --tier-hard: var(--danger-deep);
}

/* ============================================================
   SPACING — 4px base grid. Snap every gap/padding/margin.
   ============================================================ */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* common container rhythm */
  --gutter:        30px;  /* page side padding */
  --section-gap:   20px;  /* space between major sections */
  --card-pad:      22px;  /* default card interior padding */
}

/* ============================================================
   RADIUS — 6 steps.
   ============================================================ */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 999px;
}