/*
 * Product Design Kit: tokens.
 * Everything downstream reads these. A product changes only the accent block
 * (generated into themes/<product>.css by scripts/accent.mjs) and its wordmark.
 * Load css/fonts.css too: it self-hosts the typeface these tokens name.
 */
:root {
  /* Neutrals: clean white ground, near-black ink, two grey steps for surfaces. */
  --ground: #ffffff;
  --surface: #f3f4f6;
  --surface-2: #e7e9ec;
  --field-grey: #f3f4f6; /* the grey section field; kept apart from --surface, which sections redefine */
  --ink: #14161a;
  --ink-2: #4b5059;
  --dark: #14161a;
  --dark-surface: #22252b;
  --on-dark: #ffffff;
  --on-dark-2: #d5d8dd;
  --success: #15803d;
  --danger: #b91c1c;

  /* Accent: ember by default. Products override with their theme file. */
  --accent: #f04a1d;
  --accent-fill: #d63f12;
  --accent-hover: #ba350c;
  --accent-pressed: #a22d0a;
  --accent-text: #c2390f;
  --accent-on-dark: #f75126;
  --accent-tint: #feede8;
  --accent-soft: #fef6f4;
  --on-accent: #ffffff;

  /* Type: one face, Schibsted Grotesk (self-hosted by css/fonts.css), for headings and text.
     Headings at 600 with a little negative tracking; body 400; labels and buttons 500 to 600. */
  --type-display: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-text: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* real code only. taste-skill-ignore */

  /* Five sizes do all the work. */
  --step-hero: clamp(2.375rem, 1.4rem + 4.4vw, 5.5rem);
  --step-title: clamp(1.875rem, 1.3rem + 2.4vw, 3.25rem);
  --step-statement: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
  --step-body: 1.0625rem;
  --step-small: 0.9375rem;

  --leading-display: 1;
  --leading-statement: 1.2;
  --leading-text: 1.55;
  --tracking-hero: -0.015em;
  --tracking-title: -0.01em;
  --tracking-statement: -0.005em;
  --weight-display: 600;
  --weight-statement: 500;
  --measure: 36em;

  /* Space: a 4px-based scale, one pair of page margins, one section gap. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --margin: clamp(16px, 3vw, 40px);
  --gutter: clamp(24px, 5vw, 96px);
  --section: clamp(88px, 12vw, 180px);
  --container: 1360px;
  --nav-height: 64px;

  /* Shape: one radius for surfaces; controls (buttons, inputs, toggles) are fully round. */
  --radius: 16px;
  --radius-inner: 10px;
  --radius-pill: 999px;
  --control-height: 52px;
  --control-height-small: 40px;

  /* Depth: nothing at rest has a shadow. Only things that float (menus, dialogs) do. */
  --float-shadow: 0 12px 32px rgb(20 22 26 / 0.14), 0 2px 6px rgb(20 22 26 / 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.7s;
  --rise: 24px;
}

@media (min-width: 1000px) {
  :root { --nav-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur: 0.01ms;
    --dur-slow: 0.01ms;
    --rise: 0px;
  }
}