/* ==========================================================================
   Haz Games — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing and the signature
   hard-offset shadows. Shared by every page on the site: change the brand
   here, once, and it changes everywhere regardless of how many pages exist.

   Values extracted from the Claude Design source (BrainWash: Zombie Cleanup Site.dc.html).
   ========================================================================== */

/* --- Self-hosted fonts ---------------------------------------------------
   Latin subsets only, pulled from Google Fonts and served from our own
   origin: no third-party request, no render-blocking round trip to
   fonts.googleapis.com, no layout shift. 67KB total.

   Inter ships as a single variable file; the three weight declarations below
   all point at it deliberately (this mirrors Google's own CSS and is correct
   whether the file is variable or static). It downloads once.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alfa-slab-one-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}

:root {
  /* --- Colour ----------------------------------------------------------- */
  --ink:          #33302c;  /* near-black: header, footer, borders, body text */
  --orange:       #d97a5c;  /* primary accent: CTAs, headline, links          */
  --blue:         #7fa8b8;  /* secondary accent: shadows, countdown digits    */
  --cream:        #f4ecdd;  /* page background                                */
  --cream-light:  #f9f3e7;  /* raised panel background                        */
  --paper:        #f7f1e4;  /* light text on ink                              */
  --sand:         #e8ddc8;  /* muted light text on ink (nav)                  */
  --muted:        #a89a86;  /* de-emphasised text on ink (footer, captions)   */
  --halftone:     #ece0cb;  /* hero diagonal-stripe texture                   */
  --stripe-a:     #e3d4b8;  /* placeholder tile stripes                       */
  --stripe-b:     #d4c0a0;

  --body-text:    rgb(51 48 44 / 0.85);
  --body-text-dim:rgb(51 48 44 / 0.6);

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Alfa Slab One', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid display sizes — the design was fixed-width desktop only.
     Lower bounds are phone sizes, upper bounds are the original values. */
  --fs-display: clamp(2.25rem, 1.20rem + 5.2vw, 4.5rem);   /* 36 -> 72 */
  --fs-h2:      clamp(1.5rem,  1.10rem + 1.6vw, 2.25rem);  /* 24 -> 36 */
  --fs-h3:      clamp(1.35rem, 1.10rem + 1.0vw, 1.75rem);  /* 22 -> 28 */
  --fs-lead:    clamp(1rem,    0.93rem + 0.35vw, 1.125rem);/* 16 -> 18 */
  --fs-digit:   clamp(1.75rem, 1.35rem + 1.6vw, 2.125rem); /* 28 -> 34 */
  --fs-body:    0.9375rem;  /* 15 */
  --fs-sm:      0.875rem;   /* 14 */
  --fs-xs:      0.8125rem;  /* 13 */
  --fs-2xs:     0.75rem;    /* 12 */
  --fs-3xs:     0.6875rem;  /* 11 */

  /* --- Spacing ---------------------------------------------------------- */
  --space-section: clamp(2.5rem, 1.5rem + 4vw, 4.375rem);  /* 40 -> 70 */
  --space-gutter:  clamp(1.25rem, 0.6rem + 2.5vw, 2.5rem); /* 20 -> 40 */

  --w-wide:   1200px;
  --w-mid:     900px;
  --w-narrow:  560px;

  /* --- Borders & the signature hard offset shadows ---------------------- */
  --bw-thin:  2px;
  --bw:       3px;
  --bw-thick: 4px;

  --shadow-sm: 3px 3px 0;
  --shadow-md: 5px 5px 0;
  --shadow-lg: 8px 8px 0;

  /* --- Texture ---------------------------------------------------------- */
  --texture-halftone:
    repeating-linear-gradient(135deg,
      var(--halftone) 0px, var(--halftone) 2px,
      transparent 2px, transparent 24px);
  --texture-placeholder:
    repeating-linear-gradient(45deg,
      var(--stripe-a) 0px, var(--stripe-a) 10px,
      var(--stripe-b) 10px, var(--stripe-b) 20px);
}