/* STACK design tokens — README §1. Single source of truth. Match exactly. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root {
  /* colour */
  --char: #101210;
  --char-raised: #1A1D19;
  --slate: #2A2E29;
  --slate-mid: #3A3F38;
  --volt: #CBFF3C; /* fills only (buttons, chips, BLOK's body) — carries its own dark ink/backing, so it never needs to change per theme */
  --volt-text: #CBFF3C; /* Volt used as bare text/icon colour directly on the page/card background — needs real contrast against whatever's behind it, see the light-theme override below */
  --ink: #101210; /* always dark — for text/icons that must read against a bright Volt fill, in either theme */
  --ember: #FF6A4D;
  --bone: #F4F1E8;
  --text-secondary: #9AA197;
  --text-tertiary: #7C837A;
  --haze: #B9A7F5;
  --chill: #7FD4F5;
  --beam: #FFD84D;

  /* type */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;

  /* radius */
  --r-bar: 999px;
  --r-tile: 16px;
  --r-card: 24px;
  --r-chip: 8px;
  --r-container: 4px;

  /* spacing (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
}

/* Light mode (secondary), same 10% Volt ceiling — deliberately NOT a literal
   swap of --char/--bone's hex values. BLOK and the logo mark are hardcoded to
   Bone (#F4F1E8) and never recolour (locked brand rule) — a ground or card
   surface that happened to equal that exact cream would make them vanish.
   So the ground here is a muted putty tone and cards are true white: neither
   matches Bone's cream closely enough for BLOK or the logo to disappear
   against either. Screens that call logoSVG('char') for the dark-ground
   variant switch to logoSVG('bone') in light mode (see call sites) since the
   ground is no longer dark. */
:root[data-theme="light"] {
  --char: #E7E3D8;
  --char-raised: #FFFFFF;
  --slate: #D8D3C4;
  --slate-mid: #B6AF9B;
  --bone: #101210;
  --text-secondary: #55564E;
  --text-tertiary: #767468;
  /* --volt itself is NOT overridden here on purpose — buttons, chips and
     BLOK's body all pair Volt with their own dark ink/backing (a filled
     shape), so the true brand green still looks right regardless of what's
     behind it. Only bare text/icon uses of Volt directly on the page or a
     card (nav icon, "Edit" links, the ★ favourite) actually go invisible on a
     light ground — --volt-text covers just those, deepened to the same
     lime-olive hue so it still reads as "the same accent", just legible. */
  --volt-text: #5A7300;
}