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

:root, [data-theme="light"] {
  /* ─── Palette (Bubblegum Web — locked) ─── */
  --paper:       #fce8ee;
  --paper-hi:    #ffeff4;
  --ink:         #2a1a2a;
  /* 0.55 measured 3.6:1 on paper — under WCAG AA for body text. 0.66 is
     5.0:1 and still reads clearly as de-emphasised. */
  --dim:         rgba(42, 26, 42, 0.66);
  --line:        rgba(42, 26, 42, 0.25);

  /* accent and accent-2 sat at 4.18:1 and 4.22:1 on paper — just under AA,
     both as text on paper and as button fills carrying paper-coloured
     text. Darkened one step each: 4.8:1 and 5.0:1, same hue family. */
  --accent:      #c8195f;  /* primary (hot magenta) */
  --accent-2:    #0c6f78;  /* secondary (teal) */
  --tertiary:    #f4a261;  /* warm (orange) — fill only, ink text on top */
  --soft:        #8ac6d1;  /* soft teal (success, calm) — fill only */

  /* Text colours for the fixed-hue fills above. Those surfaces stay light
     in both themes, so anything printed on them must stay dark in both
     themes too — inheriting --ink puts light-pink text on mid-teal in
     dark mode at 2:1. Deliberately not redefined in the dark block. */
  --on-fill:     #2a1a2a;
  --on-fill-dim: rgba(42, 26, 42, 0.82);

  --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;

  /* Display sizes are fluid rather than stepped at breakpoints: the group
     masthead sets a group's name at display-xl, and a fixed 52px clipped
     "Weekly Jams" on a 390px phone. clamp() lets the same token serve the
     phone and the 1680px desktop without a media query per component. */
  --fs-display-xl: clamp(34px, 7.5vw, 52px);
  --fs-display-lg: clamp(26px, 5vw, 34px);
  --fs-display-md: clamp(20px, 3.4vw, 24px);
  --fs-display-sm: 18px;

  /* Single source of truth for the page gutter. Components that need to
     bleed to the page edge (sticky bars, full-bleed rules) reference this
     instead of re-deriving the same steps. */
  --page-pad: 32px;

  --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;
}

/* ─── Dark mode (Bubblegum Web — Night) ───
 * Explicit dark via toggle, OR OS-dark when no explicit preference. The boot
 * script in base.html sets data-theme to "light"/"dark" only on explicit
 * choice; "auto" leaves the attribute absent so the media query below applies. */
[data-theme="dark"] {
  --paper:       #1a0e1a;
  --paper-hi:    #2a1a2a;
  --ink:         #fce8ee;
  --dim:         rgba(252, 232, 238, 0.55);
  --line:        rgba(252, 232, 238, 0.22);

  --accent:      #ff4d8f;
  --accent-2:    #4cc7d4;
  --tertiary:    #ffb37a;
  --soft:        #6fb1bd;

  --noise-opacity: 0.08;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper:       #1a0e1a;
    --paper-hi:    #2a1a2a;
    --ink:         #fce8ee;
    --dim:         rgba(252, 232, 238, 0.55);
    --line:        rgba(252, 232, 238, 0.22);

    --accent:      #ff4d8f;
    --accent-2:    #4cc7d4;
    --tertiary:    #ffb37a;
    --soft:        #6fb1bd;

    --noise-opacity: 0.08;
  }
}

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

/* Page gutter steps down with the viewport. Declared after the theme
   blocks so both themes inherit the same geometry. */
@media (max-width: 900px) { :root { --page-pad: 24px; } }
@media (max-width: 620px) { :root { --page-pad: 16px; } }
@media (max-width: 400px) { :root { --page-pad: 12px; } }