/* ==========================================================================
   WFL — RINGLICHT design tokens
   Dark-first. There is no light theme: the only light surface is the
   deliberate paper section (.paper) in --bot (brief §2.3).
   ========================================================================== */

/* Size-adjusted local fallbacks keep CLS at zero while Google Fonts swap in */
@font-face { font-family: "BSD Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow"), local("Roboto Condensed"), local("Arial"); font-weight: 800 900; size-adjust: 82%; ascent-override: 105%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 98%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia Italic"), local("Georgia"); font-style: italic; size-adjust: 88%; ascent-override: 98%; }

:root {
  color-scheme: dark;

  /* ---- Palette (§2.3) ------------------------------------------------- */
  --nacht: #07070A;          /* page background, the dark room */
  --zaal: #101014;           /* surface 1: header after scroll, kassa, rail, menu */
  --doek: #18181E;           /* surface 2: panels, tale of the tape, forms */
  --touw: #2B2B33;           /* 1px hairlines ("ropes") */
  --rook: #8C8A93;           /* secondary text, meta, labels (5.9:1) */
  --bot: #F1EEE8;            /* primary text + paper background */
  --bot-80: rgba(241, 238, 232, .82); /* running body text */
  --bot-2: #E2DED5;          /* zebra rows / rules on paper */
  --inkt: #141416;           /* text on paper */
  --inkt-zacht: #625F58;     /* loser text on paper (C11) — darkened from the brief’s #8A877F (3.1:1) to ≥ 4.5:1 on --bot and --bot-2 */
  --rood: #EA0017;           /* red corner + action; text only ≥ 32px */
  --rood-signaal: #FF3B4A;   /* small red text on dark */
  --rood-diep: #7A000C;
  --blauw: #0033FF;          /* blue corner as light/fill only — never text on dark */
  --blauw-signaal: #5C7CFF;  /* blue text on dark */
  --blauw-diep: #000E5C;
  --zilver: #C9CCD2;         /* Zilveren inline: champions only */
  --wit: #FFFFFF;            /* only for text on --rood / --blauw fills */

  /* ---- Light recipes (§2.3) -------------------------------------------- */
  --licht-rood: radial-gradient(60% 80% at 0% 50%, rgba(234, 0, 23, .45), rgba(122, 0, 12, .15) 45%, transparent 70%);
  --licht-blauw: radial-gradient(60% 80% at 100% 50%, rgba(0, 51, 255, .45), rgba(0, 14, 92, .15) 45%, transparent 70%);
  --licht-rust: .15;         /* corner light at rest */
  --licht-piek: .45;         /* corner light at peak */
  --licht-scherm: .18;       /* corner light inside screens */
  --vignet: radial-gradient(ellipse at center, transparent 55%, rgba(7, 7, 10, .6));
  --tekstveilig-onder: linear-gradient(to top, rgba(7, 7, 10, .78) 0%, rgba(7, 7, 10, .5) 22%, rgba(7, 7, 10, 0) 45%);
  --tekstveilig-links: linear-gradient(to right, rgba(7, 7, 10, .78) 0%, rgba(7, 7, 10, .35) 22%, rgba(7, 7, 10, 0) 40%);

  /* ---- Typography (§2.4) ----------------------------------------------- */
  --font-display: "Big Shoulders Display", "BSD Fallback", "Arial Narrow", sans-serif;
  --font-stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", "BSD Fallback", "Arial Narrow", sans-serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-mega: clamp(4.5rem, 11.5vw, 14rem);
  --fs-d1: clamp(3.5rem, 8vw, 9rem);
  --fs-d2: clamp(2.5rem, 5.5vw, 6rem);
  --fs-d3: clamp(2rem, 3.4vw, 3.5rem);
  --fs-d4: 2.25rem;
  --fs-serif-l: clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-serif-s: clamp(1rem, 1.4vw, 1.25rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-mono: 12px;
  --fs-mono-s: 11px;

  --lh-mega: .82;
  --lh-d1: .84;
  --lh-d2: .86;
  --lh-d3: .9;
  --lh-body: 1.55;
  --track-mono: .12em;
  --measure: 62ch;

  /* ---- Spacing (4px base, §2.5) ---------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section-y: clamp(56px, 8vh, 88px);  /* phones: ~70px between scenes (was ≈240px of black on an 844px screen) */
  --margin: clamp(16px, 4vw, 64px);   /* outer page margin */
  --gutter: 12px;                      /* grid gutter (12 / 16 / 24) */
  --max: 1440px;                       /* content max width */
  --max-screen: 2200px;                /* media screens may run wider */
  --screen-inset: 10px;                /* hero screen inset (10 / 16 / 24) */

  /* ---- Radii ----------------------------------------------------------- */
  --r-screen: 20px;
  --r-card: 12px;
  --r-panel: 12px;
  --r-pill: 999px;
  --r-chip: 4px;

  /* ---- Motion (§3.1) --------------------------------------------------- */
  --ease-licht: cubic-bezier(.16, 1, .3, 1);   /* expo.out — reveals */
  --ease-cut: cubic-bezier(.76, 0, .24, 1);    /* frame morphs */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-micro: 200ms;
  --t-fade: 650ms;
  --t-reveal: 1000ms;

  /* ---- Layout chrome --------------------------------------------------- */
  --header-h: 60px;
  --kassa-h: 34px;          /* the Kassa line under the header (36px desktop) */
  --seam-angle: 18deg;      /* Hoeklijn seam, from the icon's bar slope */

  /* ---- Z-index scale --------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-kassa: 45;
  --z-header: 50;
  --z-cookie: 70;
  --z-cursor: 80;
  --z-intro: 90;
  --z-grain: 100;
}

@media (min-width: 768px) {
  :root {
    --section-y: clamp(96px, 14vh, 192px);
    --gutter: 16px;
    --screen-inset: 16px;
    --r-screen: 28px;
    --r-card: 16px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 24px;
    --fs-body: 17px;
    --lh-body: 1.6;
    --header-h: 72px;
    --kassa-h: 36px;
  }
}
@media (min-width: 1440px) {
  :root { --screen-inset: 24px; }
}

html, body { background-color: var(--nacht); }