/* QuantBase design tokens, v2 "meme noir" (2026-10-25).
 *
 * ONE source for colour, type, spacing, radius, elevation, texture and motion,
 * shared by quantbase.live and app.quantbase.live (the app keeps the same
 * names in its :root block, so either side can import this file).
 *
 * The look: the gold-lit lounge upstairs while the crowd queues at the ticket
 * booth below. Ink black ground, warm gold light, blood red for heat, and
 * newsprint off-white for the light sections. Grain and torn paper are used
 * with restraint; there are no grid or dot background patterns anywhere.
 *
 * Contrast (WCAG 2.x) on --canvas / --raised-3, the lightest dark surface:
 *   --ink 16.7 / 13.2, --ink-2 13.1 / 10.4, --ink-3 8.9 / 7.0, --ink-4 6.7 / 5.3;
 *   --qb (gold) as text 10.4 / 8.3; --on-accent on --qb 10.4 (the primary button);
 *   --blood-hi as text 5.1 on --canvas; --ink on --blood 6.9;
 *   --gain 10.4, --loss 8.1, --warn 11.6 on --canvas. All AA.
 *   On --paper: --paper-ink 15.1, -2 8.3, -3 5.8, --qb-deep 5.3, --blood 6.6.
 *   --ink-5 is 3.4: decoration and disabled states only, never copy.
 *
 * Fonts, self-hosted Latin WOFF2, SIL OFL 1.1 (licences beside the files):
 *   Anton (the poster face: big display lines only, always uppercase-friendly),
 *   Host Grotesk (UI and body, variable 300-800), Geist Mono (labels, numbers).
 */
@font-face { font-family: "Anton"; src: url("/fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Host Grotesk"; src: url("/fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- colour: surfaces (ink black, warm) ---- */
  --canvas: #0C0A09;
  --sunk: #070605;
  --raised: #16120F;
  --raised-2: #1F1915;
  --raised-3: #2A221D;
  --cocoa: #3A2A1E;

  /* ---- colour: text (ink is ALWAYS text, never a background) ---- */
  --ink: #F4EBDD;
  --ink-2: #DDD1BF;
  --ink-3: #B9AC98;
  --ink-4: #A29580;
  --ink-5: #6E6355;

  /* ---- colour: lines ---- */
  --line: rgba(244, 235, 221, .08);
  --line-2: rgba(244, 235, 221, .14);
  --line-3: #7A6C5B;

  /* ---- colour: brand (gold light; the old orange #FF6D29 retired for gold) ---- */
  --qb: #E9B44C;
  --qb-hi: #F6D58A;
  --qb-lo: #B8842A;
  --qb-hover: #F2C25F;
  --qb-dim: rgba(233, 180, 76, .13);
  --qb-edge: rgba(233, 180, 76, .45);
  --on-accent: #0C0A09;
  --qb-deep: #7F5408;        /* gold for text and icons on --paper (5.3:1) */

  /* ---- colour: blood red (heat, danger, the velvet rope) ---- */
  --blood: #9E1620;
  --blood-hi: #E5484D;       /* red as text on the dark ground (5.1:1) */
  --blood-deep: #2A0709;     /* the tinted band behind the PAPER story */
  --ember-deep: var(--blood-deep);

  /* ---- colour: newsprint (the light sections) ---- */
  --paper: #EFE6D5;
  --paper-2: #E4D8C2;
  --paper-ink: #16110D;
  --paper-ink-2: #4A3F35;
  --paper-ink-3: #62564A;
  --paper-line: rgba(22, 17, 13, .16);

  /* ---- colour: status (risk levels map onto these) ---- */
  --gain: #8FC9A0;   --gain-dim: rgba(143, 201, 160, .13);
  --loss: #F08A80;   --loss-dim: rgba(240, 138, 128, .14);
  --warn: #E8C17C;   --warn-dim: rgba(232, 193, 124, .14);
  --info: #B8B2D9;   --info-dim: rgba(184, 178, 217, .14);
  --live: var(--gain); --neg: var(--loss);

  /* ---- colour: the brand mark (design-system/brand/mark-inline.svg) ---- */
  --accent: var(--qb);
  --mark-dim: #6E6355; --mark-hurdle: #F4EBDD; --mark-halo: rgba(233, 180, 76, .35);

  /* ---- type ---- */
  --sans: "Host Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: var(--sans);
  --poster: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --type-label: 11px;
  --type-small: 13px;
  --type-body: 14px;
  --type-body-lg: 16px;
  --type-lede: 18px;
  --type-h3: 20px;
  --type-h2: clamp(28px, 2.2vw + 18px, 40px);
  --type-title: 32px;
  --type-display: clamp(48px, 6.4vw + 14px, 112px);
  --type-big: clamp(40px, 4.2vw + 18px, 80px);
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --lh-poster: .92;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --tracking-tight: -0.02em; --tracking-display: -0.01em; --tracking-label: 0.12em; --tracking-poster: .005em;

  /* ---- space: 4px base ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;  --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-24: 96px;
  --page-width: 1180px; --prose-width: 68ch; --header-height: 64px; --gutter: 16px;

  /* ---- radius: sharper than before; posters and tickets, not bubbles ---- */
  --r-xs: 3px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 32px -16px rgba(0, 0, 0, .85);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, .55), 0 34px 70px -26px rgba(0, 0, 0, .95);
  --glow-gold: 0 0 0 1px var(--qb-edge), 0 18px 60px -24px rgba(233, 180, 76, .45);
  --lift: var(--shadow-2);
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--qb-hi);

  /* ---- texture: film grain (fractal noise, not a pattern) ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- motion ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms;
}

@media (min-width: 720px) { :root { --gutter: 32px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}