/* ==========================================================================
   Design tokens
   The single source of truth for colour, type, space and motion.
   Change a value here and it propagates across every page.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  /* One hue per letter of the wordmark; also used to colour-code content. */
  --brand-b: #ff4b3e; /* red    — music   */
  --brand-t: #ffc531; /* amber  — accents */
  --brand-m: #3ddc84; /* green  — art     */
  --brand-o: #4d9fff; /* blue   — writing */

  /* --- Surfaces --------------------------------------------------------- */
  --surface-base: #08080b;
  --surface-sunken: #050507;
  --surface-raised: #101015;
  --surface-overlay: rgba(8, 8, 11, 0.88);
  --surface-glass: rgba(255, 255, 255, 0.04);
  --surface-glass-strong: rgba(255, 255, 255, 0.08);

  /* Cards are printed pieces pinned to the dark page, not glass panels. */
  --paper: #f6f3ec;
  --paper-shade: #e7e2d6;
  --ink: #14141a;

  /* --- Text ------------------------------------------------------------- */
  --text-primary: #f4f4f7;
  --text-secondary: #b6b6c2;
  --text-muted: #75757f;
  --text-inverse: #08080b;

  /* --- Lines ------------------------------------------------------------ */
  --line-subtle: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Squada One", "Arial Narrow", sans-serif;
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;

  /* Fluid scale: min at 360px viewport, max at 1440px. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.11rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.28rem + 0.7vw, 1.86rem);
  --step-3: clamp(1.73rem, 1.46rem + 1.16vw, 2.39rem);
  --step-4: clamp(2.07rem, 1.66rem + 1.82vw, 3.06rem);
  --step-5: clamp(2.49rem, 1.86rem + 2.79vw, 3.93rem);

  /* --- Space (4px base) -------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  /* --- Elevation --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 64px -24px rgba(0, 0, 0, 0.8);

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;

  /* --- Layout ------------------------------------------------------------ */
  --measure: 62ch; /* comfortable reading width */
  --container: 72rem;
  --container-narrow: 44rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- Z-index ----------------------------------------------------------- */
  --z-grain: 1;
  --z-header: 40;
  --z-modal: 50;
  --z-skip-link: 60;
}

/*
 * Category theming. Every card sets `data-category`, which swaps --accent;
 * all downstream styling reads --accent rather than a hard-coded hue.
 * Adding a category means adding one block here plus one entry in content.js.
 */
[data-category] {
  --accent: var(--brand-t);
}
[data-category="music"] {
  --accent: var(--brand-b);
}
[data-category="art"] {
  --accent: var(--brand-m);
}
[data-category="writing"] {
  --accent: var(--brand-o);
}
[data-category="game"] {
  --accent: var(--brand-t);
}