/* tokens.css — Song of the Week · Bubblegum Web
 * Copy into /static/css/ as-is. All other stylesheets reference these tokens. */

:root {
  /* ─── Palette (Bubblegum Web — locked) ─── */
  --paper:       #fce8ee;
  --paper-hi:    #ffeff4;
  --ink:         #2a1a2a;
  --dim:         rgba(42, 26, 42, 0.55);
  --line:        rgba(42, 26, 42, 0.25);

  --accent:      #d81b6a;  /* primary (hot magenta) */
  --accent-2:    #0e7c86;  /* secondary (teal) */
  --tertiary:    #f4a261;  /* warm (orange) */
  --soft:        #8ac6d1;  /* soft teal (success, calm) */

  --noise-opacity: 0.14;

  /* ─── Typography ─── */
  --font-display: "Shrikhand", "Caveat Brush", "Marker Felt", cursive;
  --font-sans:    "Nunito", "Space Grotesk", "Helvetica Neue", sans-serif;
  --font-hand:    "Caveat", "Marker Felt", cursive;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --fs-display-xl: 52px;
  --fs-display-lg: 34px;
  --fs-display-md: 24px;
  --fs-display-sm: 18px;

  --fs-body-lg: 16px;
  --fs-body:    14px;
  --fs-body-sm: 13px;

  --fs-micro:    11px;
  --fs-micro-sm: 10px;
  --fs-micro-xs:  9px;

  --fs-hand-md: 22px;

  /* ─── Spacing (8-pt scale) ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ─── Borders & shadows ─── */
  --border-width:       1.5px;
  --border-width-thick: 2px;

  --shadow-card: 3px 3px 0 var(--ink);
  --shadow-btn:  2px 2px 0 var(--ink);
  --shadow-sm:   1px 1px 0 var(--ink);

  /* Accent shadow — used on picked vote cards, urgent group cards */
  --shadow-card-accent: 3px 3px 0 var(--accent);
  --shadow-card-lg-accent: 5px 5px 0 var(--accent);
  --shadow-card-lg:        5px 5px 0 var(--ink);

  /* ─── Letter-spacing presets ─── */
  --ls-mono-sm:   1px;
  --ls-mono-lg:   2px;
  --ls-display:  -0.5px;
  --ls-display-tight: -1px;
}

/* Keep square corners everywhere — override with radius on avatars only. */