/* MoJo Diecast — design tokens
   Source of truth: Branding/06-Brand-Guidelines (palette, type roles, stripe order).
   Contrast (WCAG 2.x, 4.5:1 needed for body text, 3:1 for large text and UI edges):
     navy on cream 13.0   charcoal on cream 12.6   cream on navy 13.0
     red on cream 5.0     cream on red 5.0         gold on navy 6.2
     gold on cream 2.1  -> decoration only (stripes, rules), never text or focus rings
     red on navy 2.6    -> decoration only (stripes), never text or focus rings
*/
:root {
  color-scheme: light;

  /* ---- Brand palette (hex from the guidelines) */
  --navy: #0E2A44;
  --red: #C62828;
  --gold: #D4A017;
  --cream: #F8F1E3;
  --charcoal: #2B2B2B;
  --paper: #FFFCF5;          /* form fields and raised surfaces on cream */

  /* ---- Roles on the default cream ground */
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--charcoal);
  --heading: var(--navy);
  --link: var(--navy);
  --link-underline: var(--red);
  --link-hover: var(--red);
  --border: var(--navy);     /* inputs, outlines: 13:1 on cream */
  --error: var(--red);
  --focus: var(--red);       /* 5.0:1 on cream; switches to gold on navy */

  /* ---- Type */
  --font-display: "Bebas Neue", Impact, "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-sm: 0.875rem;                                   /* 14px: hints, legal */
  --fs-base: 1rem;                                     /* 16px: body (guidelines) */
  --fs-lg: 1.125rem;                                   /* 18px: lead paragraphs */
  --fs-label: 1rem;                                    /* nav, labels, buttons */
  --fs-h3: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);   /* Bebas */
  --fs-h2: clamp(2.375rem, 1.9rem + 2vw, 3.5rem);      /* Bebas */
  --fs-h1: clamp(3.25rem, 2.3rem + 4.2vw, 5.75rem);    /* Bebas */

  --lh-body: 1.6;
  --lh-display: 0.95;
  --measure: 68ch;                                     /* guidelines: under 75 */
  --track-menu: 0.05em;                                /* menu line: SemiBold, +5% */

  /* Headline lean (12°) is built into the italic Bebas face in fonts.css. */
  --skew-plate: -8deg;       /* buttons lean like the alternate badge plate */

  /* ---- Space (4px 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: 4.5rem;
  --s-9: 6rem;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --page-max: 72rem;

  /* ---- Shape */
  --radius-field: 6px;
  --radius-plate: 5px;
  --border-w: 2px;

  /* ---- House graphics */
  --band-h: 24px;            /* top/bottom stripe band, same proportion as the print pieces */
  --rule-h: 12px;            /* short stripe rule under a headline */
  --checker-sq: 12px;
  --stripes-on-cream: linear-gradient(to bottom,
      var(--gold) 0 30%, var(--red) 30% 68%, var(--navy) 68% 100%);
  --stripes-on-navy: linear-gradient(to bottom,
      var(--red) 0 30%, var(--gold) 30% 68%, var(--cream) 68% 100%);
  --checker: repeating-conic-gradient(var(--navy) 0 25%, var(--cream) 0 50%)
      0 0 / calc(var(--checker-sq) * 2) calc(var(--checker-sq) * 2);
}