/* ============================================================
   tokens.css — the single source of truth for design tokens.
   Direction C · "Konsortium". Light default + dark theme + .on-dark.
   No raw hex/px in components — reference these tokens only.
   ============================================================ */

:root {
  /* --- Brand accent (per brief) --- */
  --red: #ff1926;
  --red-press: #d60f1b;

  /* --- Type families (self-hosted, see base.css @font-face) --- */
  --disp: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Inter Tight', system-ui, sans-serif;

  /* --- Type scale (fluid clamp) --- */
  --text-h1: clamp(50px, 8.4vw, 108px);
  --text-h2: clamp(32px, 4.6vw, 58px);
  --text-h3: clamp(23px, 3.2vw, 36px);
  --text-lg: 19px;
  --text-md: 15px;
  --text-sm: 13px;
  --text-xs: 12px;

  /* --- Spacing (4px base) --- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;
  --space-12: 96px;

  /* --- Layout --- */
  --maxw: 1280px;
  --gutter: 36px;
  --sec-y: 96px;

  /* --- Shape (flat & sharp) --- */
  --radius-sm: 2px;
  --radius-pill: 100px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-signature: cubic-bezier(.6, 0, .2, 1);
  --dur-fast: .2s;
  --dur-mid: .35s;
  --dur-slow: .42s;

  /* --- Hero / inverted imagery treatment (always dark, theme-independent) --- */
  --hero-filter: grayscale(.5) contrast(1.08) brightness(.5);
  --hero-overlay:
    radial-gradient(120% 90% at 15% 100%, rgba(255, 25, 38, .34), transparent 55%),
    linear-gradient(180deg, rgba(14, 15, 17, .55), rgba(14, 15, 17, .94));

  /* --- Light theme (default) --- */
  --bg: #fcfcfc;
  --surface: #ffffff;
  --surface-2: #f0f0ef;
  --fg: #17181b;
  --fg-2: #565b63;
  --muted: #878c95;
  --line: rgba(20, 22, 26, .11);
  --line-2: rgba(20, 22, 26, .22);
  --red-fg: var(--red-press);            /* red that stays legible on light */
  --shadow: 0 22px 50px -30px rgba(20, 22, 26, .55);
}

/* --- Dark theme --- */
[data-theme="dark"] {
  --bg: #0e0f11;
  --surface: #16181b;
  --surface-2: #191c20;
  --fg: #f4f2ef;
  --fg-2: #a7abb2;
  --muted: #71767e;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .24);
  --red-fg: #ff4b46;
  --shadow: 0 22px 50px -30px rgba(0, 0, 0, .8);
}

/* --- Intentional dark panels (hero, inverted bands, mobile drawer) ---
   Forces the dark token set regardless of the active theme, so these
   beats look identical in light and dark. */
.on-dark {
  --surface: #16181b;
  --surface-2: #191c20;
  --fg: #f4f2ef;
  --fg-2: #a7abb2;
  --muted: #71767e;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .24);
  --red-fg: #ff4b46;
  background: #0e0f11;
  color: var(--fg);
}