/* Design tokens: the only place colours, type, spacing, radii and motion are defined (taste spec section 3). */
:root {
  /* brand, kept */
  --cobalt-600: #1D4ED8; --cobalt-700: #1740B0; --cobalt-300: #7CA0F0; --cobalt-100: #DCE6FD; --cobalt-50: #EEF3FF;
  /* ink, kept */
  --ink-900: #0B0E14; --ink-800: #0D1117; --ink-700: #141A24; --ink-600: #1E2530; --ink-500: #2B3442;
  /* paper: one neutral, less yellow than the old bone */
  --paper-0: #FCFBF8; --paper-50: #F4F2ED; --paper-100: #ECE9E2; --paper-200: #DEDAD1; --paper-300: #C9C4B9;
  --input-border: #8A8478;
  /* text */
  --text: #14181F; --text-mut: #4E5764; --text-faint: #6B7380;
  --text-on-ink: #F4F6FA; --text-on-ink-mut: #A6AEBD;
  /* signals: only inside product cards and forms */
  --signal-approved: #0E9F6E; --signal-waiting: #C2740A; --signal-error: #B42318;
  /* semantic */
  --bg: var(--paper-50); --surface: var(--paper-0); --surface-sunk: var(--paper-100);
  --line: var(--paper-200); --line-strong: var(--paper-300);
  --accent: var(--cobalt-600); --accent-hover: var(--cobalt-700); --accent-tint: var(--cobalt-50);

  /* motion-kit bridge: the kit reads these names */
  --bone-50: var(--paper-0); --bone-100: var(--paper-50); --bone-200: var(--paper-100); --bone-border: var(--paper-200);
  --text-on-light: var(--text); --text-on-light-mut: var(--text-mut);
  --text-on-dark: var(--text-on-ink); --text-on-dark-mut: var(--text-on-ink-mut);

  /* type */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", "Schibsted Grotesk", ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  --font-body: "Schibsted Grotesk", "Schibsted Fallback", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Outfit Wordmark", var(--font-body);
  --font-mono: var(--font-body); /* no monospace on marketing pages */
  --fs-hero: clamp(2.5rem, 1rem + 5.2vw, 5.75rem);
  --fs-display-1: clamp(2.6rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-display-2: clamp(2rem, 1.35rem + 2vw, 3.125rem);
  --fs-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-label: .875rem;

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(72px, 4rem + 5vw, 128px);
  --section-tight: clamp(56px, 3rem + 3vw, 88px);
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 64px);
  --header-h: 68px;

  /* shape */
  --r-pill: 999px; --r-media: 20px; --r-card: 14px; --r-input: 10px;
  --shadow-1: 0 1px 2px rgba(11,14,20,.06), 0 1px 1px rgba(11,14,20,.04);
  --shadow-2: 0 18px 40px -18px rgba(11,14,20,.28);
  --shadow-photo: 0 30px 60px -30px rgba(11,14,20,.40);

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms; --dur-base: 320ms; --dur-slow: 700ms;

  /* aliases for older page CSS */
  --brand: var(--cobalt-600); --brand-hover: var(--cobalt-700);
  --ink: var(--ink-900); --cream: var(--paper-50);
  --r-chip: var(--r-pill); --r-btn: var(--r-pill);
  --shadow-card: var(--shadow-2); --shadow-dark: var(--shadow-2);
  --fs-xs: var(--fs-label); --fs-sm: var(--fs-small); --fs-base: 1rem;
  --fs-h2: var(--fs-display-2); --fs-h1: var(--fs-display-1);
  --lh-tight: 1.02; --lh-body: 1.6;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --section-y: var(--section);
  --measure: 65ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1117; --surface: #151A22; --surface-sunk: #12161D; --line: #232A35; --line-strong: #323B48; --input-border: #6B7482;
    --text: #EEF1F6; --text-mut: #AAB2C0; --text-faint: #8A93A2;
    --accent: #3B6CF0; --accent-hover: #5A84F4; --accent-tint: rgba(124,160,240,.12);
    --bone-50: #151A22; --bone-100: #0E1117; --bone-border: #232A35; --text-on-light: #EEF1F6; --text-on-light-mut: #AAB2C0;
    --shadow-2: 0 18px 40px -18px rgba(0,0,0,.6); --shadow-photo: 0 30px 60px -30px rgba(0,0,0,.7);
  }
}