/* ─────────────────────────────────────────────────────────────────────────────
   TabsRx — design tokens. One system for every page.

   The register the category leaders share on their roots (copy deck v2 §6,
   teardown P10): a white page, one sentence-case sans, pill buttons, the
   product on a soft gradient tile, one cold accent and a lot of air. The
   Tabs chocolate styling is not an input beyond the wordmark; TabsRx is its
   own brand on its own domain.

   Type: Bricolage Grotesque for display lines (an opinionated grotesk with an
   optical-size axis, so the big H1 tightens itself), Schibsted Grotesk for
   everything else (a newspaper sans that stays legible at 11px). Both
   self-hosted; the CSP allows no third-party 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:      #3527DB;
  --accent-deep: #291CB8;
  --accent-soft: #F5F4FA;
  --ink:         #19192D;
  --paper:       #FDFDFE;
  --muted:       #55556B;
  --faint:       oklch(62% 0.02 280);
  --line:        #D9D9E7;
  --line-firm:   oklch(84% 0.018 280);
  --tile-a:      oklch(95% 0.03 282);
  --tile-b:      #C7C4E3;
  --tile-c:      oklch(89% 0.05 280);
  --paper-sunk:  oklch(97.5% 0.008 280);
  --paper-deep:  oklch(95% 0.012 280);

  /* Comparison marks: a muted green, a muted red and an amber, each with a
     soft disc. Scan colours, not alert colours; the shapes carry the meaning. */
  --ok:          oklch(52% 0.13 150);
  --ok-soft:     oklch(94% 0.045 150);
  --no:          oklch(55% 0.16 25);
  --no-soft:     oklch(95% 0.03 25);
  --part:        oklch(62% 0.13 70);
  --part-soft:   oklch(95% 0.045 80);

  /* Older component rules read these names; they resolve to the same
     palette so one change here moves the whole site. */
  --flame:      var(--accent);
  --rule:       var(--line);
  --rule-firm:  var(--line-firm);
  --ink-soft:   var(--muted);
  --ink-faint:  var(--faint);
  --flame-wash: var(--accent-soft);

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

  /* Five steps, at least 1.25 between them. Fluid on the display steps only;
     app-ish UI stays fixed rem. */
  --t-h1:    clamp(2.75rem, 2rem + 4.6vw, 5.5rem);
  --t-h2:    clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
  --t-h3:    1.1875rem;
  --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);
  --measure: 65ch;

  /* ── 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;

  --announce-h: 40px;
}

/* Flood contexts for the selling interstitials and the upsell rungs. Each
   sets its own ink so text on colour is never grey-on-colour. The names are
   read by quiz.js, plan.js and data/upsells.js; the values are tints of the
   one brand hue rather than a second palette. */
[data-flood='pink']   { --flood: oklch(94% 0.03 320);  --flood-ink: var(--ink); }
[data-flood='mint']   { --flood: oklch(94% 0.035 210); --flood-ink: var(--ink); }
[data-flood='sun']    { --flood: var(--accent-soft);   --flood-ink: var(--ink); }
[data-flood='indigo'] { --flood: var(--accent);        --flood-ink: var(--paper); }
[data-flood='flame']  { --flood: var(--accent-deep);   --flood-ink: var(--paper); }
[data-flood='ink']    { --flood: var(--ink);           --flood-ink: var(--paper); }