/* 7Chances — design system: cinematic monochrome, editorial type. Use these variables only; no raw colours elsewhere.
   Geist Sans for display + interface, Geist Mono only as a technical accent (times, prices, coordinates, indexes).
   Surfaces are separated by tone and 1px hairlines, not by shadows. One restrained signal colour (--signal): the
   recording dot. Contrast on --bg: text 17.6:1 · text-2 7.0:1 · text-3 4.6:1 (small labels only). */
:root {
  /* colour */
  --bg: #0B0B0B;
  --surface: #121212;
  --surface-2: #191919;
  --surface-3: #222222;
  --text: #F2F0EB;
  --text-2: #A09F9B;
  --text-3: #7E7D79;            /* meta / disabled text — never body copy */
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .28);
  --signal: #E5483A;            /* the recording dot only */
  --accent: #F2F0EB;            /* primary button fill */
  --accent-ink: #0B0B0B;
  --tint: rgba(255, 255, 255, .04);
  --ok: #8FD3A8;
  --danger: #FF8A7A;

  /* type */
  --font-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  /* scale (fluid, 390 → 1440) */
  --fs-display: clamp(3.5rem, 1.6rem + 8.4vw, 10rem);    /* hero headline */
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5.5rem);        /* section titles */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;                                      /* mono labels */
  --lh-tight: .92;
  --lh-heading: 1.04;
  --lh-body: 1.55;
  --tr-display: -.045em;
  --tr-heading: -.03em;
  --tr-mono: .02em;

  /* space (8pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --gutter: 20px;
  --max: 1360px;
  --measure: 58ch;
  --section-y: var(--s9);
  --header-h: 64px;

  /* shape + motion */
  --radius: 2px;
  --radius-panel: 4px;
  --pill: 999px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms;
  --t-ui: 280ms;
  --t-slow: 900ms;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; --section-y: var(--s10); } }

/* scroll-craft engine tokens (css/scrollcraft.css), mapped onto ours. --sc-canvas is what data-sc-drift interpolates.
   One accent: the warm tungsten of the photographs (focus ring, pointer light, selection), never a fill. */
:root {
  --sc-canvas: #0B0B0B;
  --sc-surface: var(--surface);
  --sc-ink: var(--text);
  --sc-ink-soft: var(--text-2);
  --sc-accent: #E9B872;
  --sc-accent-ink: #0B0B0B;
  --sc-font-display: var(--font-sans);
  --sc-font-text: var(--font-sans);
  --sc-font-mono: var(--font-mono);
  --sc-shadow-color: 30 20% 2%;
}