/* Design tokens — Swiss4Wirn.
 * Source: mockups/swiss4wirn.ch/c2-alpengluehen.html (approved 2026-10-23, round 1).
 * The mockup's :root values moved here as they are; lines marked "added" are not
 * in the mockup (states, focus, errors, layers, container).
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #15121A;          /* deep aubergine graphite */
  --surface-1: #1C1822;
  --surface-2: #24202C;
  --surface-3: #2E2937;
  --color-brand: #FF6B4A;       /* alpenglow coral — primary action */
  --color-glow: #FFB36B;        /* only inside the dawn glow and gradients */
  --color-accent: #8FE3CF;      /* glacier mint — trust, live, limits, success */
  --color-text: #F5F3F0;
  --color-muted: #A9A3B3;       /* 7.3:1 on --color-bg */
  --color-on-brand: #1A0F0C;    /* text on coral */
  --color-line: color-mix(in oklab, #F5F3F0 9%, transparent);
  --color-line-2: color-mix(in oklab, #F5F3F0 16%, transparent);
  --color-field-line: #7A7383;  /* added: input borders, 3.4:1 on --surface-2 (WCAG 1.4.11) */
  --brand-tint: color-mix(in oklab, var(--color-brand) 14%, transparent);
  --mint-tint: color-mix(in oklab, var(--color-accent) 14%, transparent);
  --hatch: repeating-linear-gradient(135deg, color-mix(in oklab, #fff 3.2%, transparent) 0 1px, transparent 1px 7px);

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 88%, #fff);
  --color-error: #FF8A7A;       /* readable on the dark surfaces, 7:1 */
  --color-error-tint: color-mix(in oklab, #FF8A7A 14%, transparent);
  --color-success: var(--color-accent);
  --color-warn: #FFD27A;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Big Shoulders", "Big Shoulders Fallback", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
  --fs-h1: clamp(3.4rem, 1.8rem + 4.8vw, 6.6rem);
  --fs-h2: clamp(2.2rem, 1.5rem + 2vw, 3.6rem);
  --fs-h3: clamp(1.45rem, 1.1rem + .9vw, 2rem);
  --fs-kin: clamp(2.4rem, 1.3rem + 3.2vw, 4.4rem);
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: .8125rem;
  --fs-micro: .6875rem;
  --lh-tight: .9;
  --lh-base: 1.55;
  --wdth-body: 92;              /* Archivo width axis */
  --wdth-ui: 80;                /* buttons, chips */

  /* ── Shape: from the mockup (C2: no radii, chamfered corners) ────────── */
  --radius: 0;
  --cut: 14px;
  --cut-s: 8px;
  --chamfer: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  --chamfer-s: polygon(0 0, calc(100% - var(--cut-s)) 0, 100% var(--cut-s), 100% 100%, var(--cut-s) 100%, 0 calc(100% - var(--cut-s)));

  /* ── Space ───────────────────────────────────────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;

  /* ── Layout: from the mockup ─────────────────────────────────────────── */
  --rail: 76px;
  --gutter: 32px;
  --top-h: 68px;
  --container: 1400px;          /* .wrap in the mockup */
  --container-text: 780px;      /* added: legal and long-read column */

  /* ── Motion: from the mockup ─────────────────────────────────────────── */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;

  /* ── Layers: added ───────────────────────────────────────────────────── */
  --z-top: 30;
  --z-rail: 40;
  --z-overlay: 900;
  --z-cookie: 950;             /* below the age gate: the age question comes first */
  --z-gate: 1000;
  --z-toast: 1100;
}

@media (max-width: 960px) { :root { --gutter: 20px; } }
@media (max-width: 760px) { :root { --gutter: 16px; --top-h: 60px; } }

/* Breakpoints (mockup): 1200 — wall tile hides, 960 — 2-column bento,
   760 — rail becomes the bottom tab bar. Reference widths: 1440 / 390. */