/* Design tokens — Betolic, from the approved mockup B2 «Tor»
 * (<kit>/mockups/betolic.pl/b2-tor.html, 2026-10-14). Values moved as they are;
 * names say the role. Anything the mockup did not define is marked "added".
 */
/* Metric-matched fallbacks (added): until Barlow / Barlow Condensed arrive (font-display: swap)
   text is set in a local face scaled to the same width, so the swap does not reflow the page.
   Ratios measured on Polish copy in Chromium: Barlow / Arial 95.6 %; Barlow Condensed 800i to
   Arial Narrow 92.6 % mixed case, 83 % uppercase (to Arial 75.9 / 68 %) — set between, weighted
   to uppercase, because the large uppercase headings are what reflows. */
@font-face { font-family: "Barlow Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 95.6%; }
@font-face { font-family: "Barlow Condensed Fallback Narrow"; src: local("Arial Narrow"), local("Liberation Sans Narrow"); size-adjust: 85%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 70%; }
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-brand: #E2232F;            /* lighter red chosen by the client (was #D50F1D in the brief) */
  --color-brand-hover: #C81B26;
  --color-brand-tint: #FCE9EA;
  --color-brand-text: #C81B26;       /* added: red for small text and links on light surfaces (5.3:1); #E2232F stays for fills */
  --color-pick: #FFCA06;             /* odds / selections only */
  --color-pick-hover: #F2BD00;
  --color-pick-ink: #11131B;
  --color-bg: #F0F1F3;
  --color-text: #11131B;
  --color-muted: #5B6271;            /* 5.6:1 on #FFFFFF, 5.0:1 on #F0F1F3 */
  --color-placeholder: #6B7281;      /* added: mockup used #7A8190 (3.9:1) — raised to 4.6:1 */
  --color-border: #E6E8ED;
  --color-disabled: #F2A5AC;
  --surface-page: #F0F1F3;
  --surface-card: #FFFFFF;
  --surface-sunken: #F6F7F9;
  --surface-night: #0C0E14;
  --surface-night-card: #181B24;
  --surface-night-line: rgba(255, 255, 255, .09);
  --color-on-night: #FFFFFF;
  --color-on-night-muted: rgba(255, 255, 255, .7);   /* mockup .66 → .7 for small text on the photo */

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-active: color-mix(in srgb, var(--color-brand) 80%, black);
  --color-error: #C21F2A;
  --color-error-tint: #FDECEE;
  --color-success: #0F7A4F;
  --color-success-tint: #E6F5EE;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 30%, transparent);

  /* legacy names the kit's base/layout files read */
  --color-surface: var(--surface-card);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Barlow Condensed", "Barlow Condensed Fallback Narrow", "Barlow Condensed Fallback", sans-serif;
  --font-body: "Barlow", "Barlow Fallback", sans-serif;
  --fs-display: clamp(40px, 6vw, 88px);   /* match names in the hero */
  --fs-h1: clamp(34px, 4vw, 56px);        /* added: inner-page H1, same face as --fs-display */
  --fs-h2: clamp(26px, 2.3vw, 34px);
  --fs-h3: 18px;
  --fs-lead: 17px;                        /* added: intro paragraphs */
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11.5px;
  --fs-odd: 20px;
  --fs-lane: clamp(84px, 7vw, 112px);
  --lh-tight: 1.05;
  --lh-base: 1.5;
  --lh-read: 1.65;                        /* added: legal and long text */

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-sm: 9px;
  --radius-md: 15px;
  --radius-lg: 19px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(17, 19, 27, .06), 0 2px 6px -2px rgba(17, 19, 27, .06);
  --shadow-2: 0 2px 4px rgba(17, 19, 27, .06), 0 18px 36px -18px rgba(17, 19, 27, .28);
  --shadow-3: 0 4px 10px rgba(17, 19, 27, .12), 0 30px 60px -24px rgba(17, 19, 27, .45);
  --shadow-card: var(--shadow-1);

  /* ── Layout: from the mockup ─────────────────────────────────────────── */
  --rail-w: 84px;
  --container: 1320px;
  --container-pad: 40px;
  --read: 800px;                          /* added: legal reading column (brief §6) */
  --tab-h: 64px;
  --top-h: 52px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .8, .2, 1);    /* from the mockup */
  --ease-in: cubic-bezier(.5, 0, .8, .3);
  --dur-fast: 140ms;
  --dur-base: 200ms;                      /* mockup --dur */
  --dur-slow: 300ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-rail: 60;
  --z-pill: 70;
  --z-header: 55;
  --z-overlay: 90;
  --z-modal: 1000;
  --z-toast: 1200;
}

/* Breakpoints cannot be custom properties in media queries. From the mockup:
   --bp-hero: 1199px (hero stacks)   --bp-mid: 900px   --bp-mobile: 767px (rail → tab bar)
   Reference widths in kit.config.json → breakpoints (1440 / 390). */
@media (max-width: 1199px) { :root { --container-pad: 28px; } }
@media (max-width: 767px)  { :root { --container-pad: 16px; --fs-h2: 28px; } }