/* Balboa Studios brand tokens (D12). The ONE place to change colours, type, radius and spacing.
   Source: official Balboa Studios kit as relayed 24 Oct 2026, matching marius/pack/balboa_studios_pack/brand/studios_logo/README.md
   (Emerald Venom #0E7A52 -> #1DB86C -> #3DEB8A, text #EEF0F2) and the OG Pass site tokens (ogpass/site/public/index.html).
   The same file sits in the site (public/tokens.css) and the demo (tokens.css); keep both copies identical. */
:root {
  /* backgrounds */
  --bg-deep: #070908;      /* darkest: page edges, stage, video wells */
  --bg: #0B0E0D;           /* main background */
  --surface-1: #0F1312;    /* raised */
  --surface-2: #131817;    /* raised, second level */
  --panel: #16191A;        /* panels and cards */
  --line: rgba(205, 235, 220, .08);
  --line-2: rgba(205, 235, 220, .13);
  --line-3: rgba(205, 235, 220, .22);

  /* text */
  --tx: #EEF0F2;           /* primary */
  --tx-2: #8A948F;         /* secondary */
  --tx-3: #68736E;         /* muted */

  /* brand accent: Emerald Venom */
  --v-700: #0E7A52; --v-500: #1DB86C; --v-400: #3DEB8A;
  --accent: #21C273;       /* flat fallback for buttons and small UI */
  --accent-rgb: 33, 194, 115;
  --grad: linear-gradient(45deg, #0E7A52 0%, #1DB86C 50%, #3DEB8A 100%);
  --grad-btn: linear-gradient(160deg, #0E7A52 0%, #0A6343 100%);
  --grad-btn-h: linear-gradient(160deg, #119060 0%, #0B6B48 100%);

  /* secondary greens: hover, depth, quiet states */
  --g-deep: #0A6343; --g-moss: #23604A; --g-sage: #3A8166; --g-mist: #67A68C;
  --g-tint: rgba(33, 194, 115, .10); --g-tint-2: rgba(33, 194, 115, .18);

  /* game red: hits, damage numbers and the boss health bar (founder, 24 Oct: red is fine for these) */
  --hit-hi: #FF6B5E; --hit: #E8443A; --hit-mid: #B8281F; --hit-dk: #6E1410; --hit-deep: #2A0A08;
  --hit-trail: #FFD9A8;    /* damage trail: the chunk just lost, chips down after a beat */
  --hit-rgb: 232, 68, 58;
  /* warnings that are not damage (counter-attacks, failed or resisted hits) */
  --warn: #C2605A; --warn-rgb: 194, 96, 90; --warn-tint: rgba(194, 96, 90, .14);

  /* type: DM Sans for everything readable; the pixel face only for game display (titles, numbers, boss names) */
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-px: "Pixelify Sans", "DM Sans", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px;
  --px-sm: 16px; --px-md: 24px; --px-lg: 32px; --px-xl: 48px;   /* pixel face sizes: multiples of 8 stay crisp */

  /* shape and spacing: one radius family, a 4 px grid */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 8px 24px rgba(0, 0, 0, .35);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .28);
}