/* ==========================================================================
   Burnt Out Games — Design Tokens
   The single source of truth for colour, type, space and motion.
   Documented in brand/BRAND-SYSTEM.md. Change values here, not in site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Display font is served from this site, not from Google. It is the brand
   voice on every heading, so it must not depend on a third party being
   reachable: when fonts.googleapis.com is blocked or slow, a webfont link
   silently falls back to Georgia and the whole page stops looking like BOG.
   Body text still comes from Google, where the fallback (the system UI sans)
   is close enough that a failure is invisible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Alfa Slab One';
  src: url('/assets/fonts/alfa-slab-one-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}

:root {
  /* --- Brand palette (from BOG-Brand-Guide.pdf) ------------------------- */
  --fiery-red:     #E34521;
  --firewood:      #532111;
  --warm-peach:    #F9CA96;
  --golden-ember:  #F59D24;
  --burnt-orange:  #DB7727;
  --light-glow:    #FEF5EB;
  --white:         #FFFFFF;
  --black:         #000000;

  /* --- Derived, for screen contrast (see BRAND-SYSTEM.md §1) ------------ */
  --red-deep:      #B53417;  /* buttons on light. white on it: 6.05:1        */
  --red-900:       #912A12;  /* links on Warm Peach: 5.47:1                  */
  --red-800:       #8E2A12;  /* button hover fill. white on it: 8.43:1       */
  --red-bright:    #E8674A;  /* links + accent text on dark. on ink: 5.86:1  */
  --ink:           #1A0D07;  /* darkest surface. Warm Peach on it: 12.60:1   */
  --ash:           #2B1710;  /* raised dark surface                          */
  --ash-hi:        #3A2118;  /* dark surface borders                         */
  --peach-dim:     #D9A97C;  /* muted text on ink: 8.6:1                     */
  --firewood-dim:  #7A4A33;  /* muted text on Warm Peach: 4.87:1             */
  --peach-line:    #C99264;  /* borders on a Warm Peach surface              */
  --link-bright:   #FFA640;  /* body links on dark. on ink: 9.42:1            */

  /* --- Surfaces ----------------------------------------------------------
     The page alternates between three real brand colours. There is no
     near-white page background: Light Glow is a text and accent colour now,
     not a surface, which is what the brand guide's tier list actually says.
     --------------------------------------------------------------------- */
  --bg-ink:        var(--ink);
  --bg-firewood:   var(--firewood);
  --bg-peach:      var(--warm-peach);

  --text-on-ink:      var(--warm-peach);
  --text-on-firewood: var(--warm-peach);
  --text-on-peach:    var(--firewood);

  --accent:        var(--fiery-red);

  /* --- Type -------------------------------------------------------------- */
  /* Nexa Rust Slab is licensed. Alfa Slab One stands in. See BRAND-SYSTEM §2. */
  --font-display: 'Alfa Slab One', 'Nexa Rust Slab', Rockwell, Georgia, serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-label:   'Roboto Condensed', 'Roboto', system-ui, sans-serif;

  /* Display sizes came down after review: game-page headings were enormous. */
  --fs-display: clamp(2.5rem, 1.45rem + 5.2vw, 5rem);
  --fs-h1:      clamp(1.95rem, 1.35rem + 3.0vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 1.25rem + 1.5vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 1.10rem + 0.5vw, 1.45rem);
  --fs-lead:    clamp(1.0625rem, 1.0rem + 0.35vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.98rem + 0.10vw, 1.0625rem);
  --fs-small:   clamp(0.875rem, 0.86rem + 0.08vw, 0.9375rem);
  --fs-label:   clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem);

  --lh-display: 0.98;
  --lh-heading: 1.12;
  --lh-body:    1.65;

  --measure: 66ch;
  /* A ch-based measure changes width with the element's font size, which is why
     the hero paragraph and the EXO paragraph came out 840px and 714px while
     both said "66ch". Where two blocks must match, use this instead. */
  --measure-fixed: 840px;

  /* --- Space (8px base) --------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --section-pad: clamp(3.5rem, 8vw, 7rem);
  --max-width:   1240px;

  /* --- Patterns -----------------------------------------------------------
     One fixed motif height everywhere, so a pattern is the same size whether
     it sits in a tall divider or a thin seam. Scaling the motif with the strip
     height was the inconsistency: short bands rendered a tiny, noisy pattern.
     --------------------------------------------------------------------- */
  --pattern-motif: 210px;
  --band-h:        clamp(4.5rem, 7vw, 6.5rem);
  --seam-h:        22px;

  /* --- Radius ------------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* --- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(0.2, 0, 0, 1);
  --dur-fast:  120ms;
  --dur:       160ms;
  --dur-slow:  240ms;
  --hero-scroll: 48s;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-card: 0 2px 4px rgba(10, 5, 2, 0.14), 0 12px 28px rgba(10, 5, 2, 0.18);
  --shadow-card-hover: 0 4px 10px rgba(10, 5, 2, 0.20), 0 22px 46px rgba(10, 5, 2, 0.28);

  /* --- Layers -------------------------------------------------------------- */
  --z-pattern: 0;
  --z-content: 1;
  --z-header:  100;
  --z-menu:    200;
  --z-skip:    300;
}