/* TabsRx design tokens, trimmed to what the survey uses. Bricolage Grotesque for
   display lines, Schibsted Grotesk for the rest; both self-hosted (the CSP allows no font origin). */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque-var.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/SchibstedGrotesk-var.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/SchibstedGrotesk-italic-var.woff2') format('woff2');
  font-weight: 400 900; font-style: italic; font-display: swap;
}

:root {
  color-scheme: light;

  /* ── Palette. Every neutral is tinted toward the accent hue (280). ────── */
  --accent:      oklch(44% 0.24 272);
  --accent-deep: oklch(36% 0.2 272);
  --accent-soft: oklch(95.5% 0.025 280);
  --ink:         oklch(20% 0.035 280);
  --paper:       oklch(99.3% 0.003 280);
  --muted:       oklch(46% 0.03 280);
  --faint:       oklch(62% 0.02 280);
  --line:        oklch(91% 0.012 280);
  --line-firm:   oklch(84% 0.018 280);
  --no:          oklch(55% 0.16 25);

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --body:    'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-lead:  1.125rem;
  --t-body:  1rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* ── Space: 4pt scale, semantic names ───────────────────────────────────── */
  --s-2xs: 4px;  --s-xs: 8px;  --s-sm: 12px; --s-md: 16px;
  --s-lg: 24px;  --s-xl: 32px; --s-2xl: 48px; --s-3xl: 64px; --s-4xl: 96px;

  --gutter: clamp(20px, 5vw, 48px);

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --r-control: 14px;   /* inputs, option rows, small cards */
  --r-panel: 24px;     /* tiles, panels, product cards */
  --r-pill: 999px;     /* every button */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* quint-ish, no bounce */
  --t-fast: 120ms;
  --t-mid: 240ms;
  --t-slow: 420ms;
}