/* DESIGN_BRIEF.md section 14 token changes, scoped to Direction D so A, B and C keep brand/tokens.css as is.
   Load after ../../brand/tokens.css. Fold into brand/tokens.css (and tokens.json) when the brief is approved. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/SchibstedGrotesk-Variable-latin.woff2') format('woff2');
}

:root {
  /* Type scale. Display face: Schibsted Grotesk (OFL, ../fonts/OFL-SchibstedGrotesk.txt) for H1 to H3; Work Sans for everything else. */
  --font-display: 'Schibsted Grotesk', var(--font-family-sans);
  --text-display: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
  --text-h1: clamp(2.25rem, 1.75rem + 1.6vw, 3.25rem);
  --text-h2: clamp(1.875rem, 1.5rem + 1vw, 2.5rem);
  --text-h3: clamp(1.5rem, 1.35rem + 0.4vw, 1.75rem);
  --text-h4: 1.25rem;
  --text-lead: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --text-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-label: 0.875rem;
  --text-stat: clamp(2.25rem, 1.9rem + 1vw, 2.75rem);
  --text-quote: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-overline: initial;
  --tracking-overline: initial;

  /* Tracking and leading */
  /* Tuned for Schibsted Grotesk, which is already tight: about two thirds of the Work Sans values */
  --tracking-display: -0.022em;
  --tracking-h1: -0.018em;
  --tracking-heading: -0.014em;
  --tracking-h3: -0.01em;
  --leading-tight: 1.02;
  --leading-snug: 1.05;
  --leading-heading: 1.1;
  --leading-h3: 1.2;
  --leading-body: 1.6;
  --leading-ui: 1.3;
  /* Weight 700 is reserved for the wordmark; page type uses 400, 500 and 600. */

  /* Gradients: brand gradient for the logo X and 2 to 4px rules only */
  --gradient-text-on-dark: initial;
  --gradient-text-on-light: initial;
  --gradient-navy-depth: initial;
  --c-gradient-text: initial;

  /* Shadows: cards use none at rest; 3 is for floating layers */
  --shadow-glow: initial;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: initial;
  --radius-pill: initial;

  /* Layout */
  --layout-max: 75rem;
  --layout-wide: 85rem;
  --layout-text: 40rem;
  --space-section: clamp(4rem, 2.5rem + 4vw, 6rem);
  --space-gutter: clamp(1.25rem, 0.75rem + 1.6vw, 2.5rem);
  --header-h: 4.5rem;
  --utility-h: 2.25rem;
  --control-h: 3rem;
  --control-h-sm: 2.5rem;

  /* Semantic additions, light */
  --c-canvas-alt: var(--color-ink-50);
  --c-rule: var(--color-ink-200);
  --c-accent-line: var(--color-cyan-500);
  --c-emphasis: var(--color-blue-700);
  --c-block: var(--color-blue-700);
  --c-block-text: var(--color-white);
  --c-action-text-link: var(--color-blue-700);
}

[data-theme="dark"] {
  --c-canvas-alt: var(--color-ink-925);
  --c-rule: var(--color-ink-800);
  --c-emphasis: var(--color-cyan-500);
  --c-gradient-text: initial;
}