/* Headbone Interactive — design tokens (sampled from the mockups).
   Change brand values here; everything else references these. */
:root {
  /* Palette */
  --c-orange:        #F16622;  /* red-orange: hero star, logo starburst, accents */
  --c-orange-dark:   #E0551A;
  --c-orange-nav:    #F48811;  /* lighter golden orange: nav bar (mockup) */
  --c-green:         #97C93C;
  --c-green-mid:     #6FA23C;
  --c-green-dark:    #4E7A2F;
  --c-olive:         #699911;
  --c-red:           #DB0303;
  --c-yellow:        #F2B214;
  --c-yellow-bright: #FFD200;
  --c-cream:         #F7EFD6;
  --c-purple:        #210C42;
  --c-purple-accent: #5B2A86;
  --c-ink:           #1C1406;
  --c-white:         #FFFFFF;

  /* Fonts — brand display faces are self-hosted (see fonts.css).
     Body + condensed are OFL/system substitutes for now (interim). */
  --f-display:   "ChineseRocks", "Arial Narrow", sans-serif;      /* GOES BUGZERK slab */
  --f-brush:     "BlizzardD", "Brush Script MT", cursive;         /* bold brush */
  --f-script:    "Cure", "Bradley Hand", cursive;                 /* handwriting */
  --f-fun:       "Boogaloo", system-ui, sans-serif;               /* playful headings */
  --f-bogus:     "Bogusflow", var(--f-fun);
  /* OFL substitutes (self-hosted): Oswald ~ Alt Gothic Cond, Source Sans 3 ~ Myriad Pro. */
  --f-condensed: "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --f-body:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Page green-zigzag background (the mockup art). */
  --bg-green: url("/assets/img/bg/zigzag-green.svg");

  /* Center orange burst (the mockup star). Procedural alternative:
     url("/assets/img/bg/sunburst-orange.svg") — see .hero__burst for the
     aspect-ratio/scale values it needs. */
  --bg-star: url("/assets/img/bg/star-orange.svg");

  /* Layout */
  --nav-h: 74px;
  --wrap: 1600px;

  /* Responsive breakpoints — ONE canonical set, shared by all three page
     flavors (home / game / content). @media can't read custom properties, so
     these are the source-of-truth *values*; use the exact numbers in site.css.
       --bp-stack: 900px  → tablet/portrait: collapse to single column, nav → compact
       --bp-phone: 560px  → phone: fine-tuning (type scale, spacing, tap targets)
     Desktop-first: base rules are the desktop layout; breakpoints override down. */
  --bp-stack: 900px;
  --bp-phone: 560px;
  /* Wordmark render height (aspect 614 : 93.35). The wordmark is centred below
     the bar, so the "I" of "Interactive" lands ~at viewport centre; the bulb
     logo is anchored there with a small calibrated nudge (see .nav__logo). */
  --wordmark-h: clamp(56px, 7vw, 88px);
}