/*
  qumbaqa.com design tokens. Canonical source: src/css/ (copied to public/assets/css by scripts/build.mjs).
  Dark-first: the site is black by design (owner preference), so there is no light mode.
  Token names follow the repository-template roles (--color-ink, --color-paper, --color-primary ...).

  Three design variants (A/B/C), see DESIGN.md. They share the layout, the cyan "Signal" accent and the pointer-following
  hover glow (owner: must keep), and differ in background engine, shape language and text tone.
  Pick one, then delete the other two blocks and the draft variant switcher (plans/decisions-needed.md, D1).
*/

:root {
  /* Surfaces: black first, never white */
  --color-paper: #000000;
  --color-paper-raised: #07080d;
  --color-surface: rgba(255, 255, 255, 0.045);
  --color-surface-hover: rgba(255, 255, 255, 0.085);
  --color-line: rgba(255, 255, 255, 0.14);
  --color-line-strong: rgba(255, 255, 255, 0.28);

  /* Text: >= 4.5:1 on #000 */
  --color-ink: #f6f7f9;
  --color-muted: #aab0bd;
  /* Tone: kickers, small headings, breadcrumbs (varies per variant) */
  --color-tone: #0cb4b4;

  /* Brand accent: Signal cyan in every variant; also the hover-glow colour */
  --color-primary: #0cb4b4;
  --color-primary-deep: #3dd2d0;
  --color-on-primary: #000000;
  --color-bad: #ff8f86;

  /* Type: Urbanist is the website font. Canaro Book is reserved for the "qumbaqa" wordmark (class .wm). */
  --font-display: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Canaro", "Urbanist", system-ui, sans-serif;
  /* Merlo (the kingfisher quote); Biennale is still reserved, see plans/decisions-needed.md B3 */
  --font-accent: "Merlo", var(--font-display);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-kicker: var(--font-body);
  --h-weight: 800;
  --h-tracking: -0.02em;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout: limited width, easy scroll */
  --gutter: clamp(1rem, 4vw, 2rem);
  --max-content-width: 1200px;
  --max-prose-width: 46rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --btn-radius: 999px;
  --header-h: 4.25rem;
  --card-blur: 0px;
  --consent-w: 17rem;

  /* Moving background (mesh variants) */
  --mesh-1: #3b1d8f;
  --mesh-2: #5a2bd1;
  --mesh-3: #24106b;
  --mesh-4: #7a3df2;
  --mesh-a: 0.6;
}

/* Variant Aurora: Lumo-style soft, moving colour clouds (blue, violet, coral, magenta) behind a fine dot grid. Square, technical shapes, mono kickers. Default. */
:root,
:root[data-variant="aurora"] {
  --color-tone: #0cb4b4;
  --color-muted: #a9b6ba;
  --color-surface: rgba(255, 255, 255, 0.04);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --btn-radius: 8px;
  --font-kicker: var(--font-mono);
  --h-weight: 800;
  --h-tracking: -0.025em;
  --mesh-1: #4560e0;
  --mesh-2: #e07060;
  --mesh-3: #7a4fe0;
  --mesh-4: #c84aa8;
  --mesh-a: 1;
}

/* Variant Waves: slow, wide teal-blue horizontal waves with faint contour lines (WebGL), glass cards, medium radii */
:root[data-variant="waves"] {
  --color-tone: #9fd9d6;
  --color-muted: #a9bcc0;
  --color-surface: rgba(120, 220, 215, 0.06);
  --color-surface-hover: rgba(120, 220, 215, 0.12);
  --color-line: rgba(159, 217, 214, 0.18);
  --color-line-strong: rgba(159, 217, 214, 0.38);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --btn-radius: 999px;
  --card-blur: 12px;
  --h-weight: 700;
  --h-tracking: -0.02em;
  --mesh-1: #04465a;
  --mesh-2: #0a7a84;
  --mesh-3: #06303f;
  --mesh-4: #27b9b4;
  --mesh-a: 0.55;
}