/* MAIS tokens, generated from the design system (tokens.json). Change values there, then rebuild. */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  --bg: #f3f6fa;
  --surface: #e3ebf4;
  --border: #c5d3e3;
  --text: #12243d;
  --muted: #4a5f7a;
  --accent: #1747c2;
  --on-accent: #ffffff;
  --accent-soft: #dde6fa;
  color-scheme: light;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-full: 999px;
  --fs-display: clamp(2.375rem, 1.4361rem + 4.0062vw, 4rem);
  --lh-display: clamp(2.75rem, 1.8833rem + 3.698vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 1.3166rem + 1.849vw, 2.5rem);
  --lh-h2: clamp(2.25rem, 1.8166rem + 1.849vw, 3rem);
  --fs-stat: clamp(2.25rem, 1.8166rem + 1.849vw, 3rem);
  --lh-stat: clamp(2.5rem, 2.0666rem + 1.849vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.1778rem + 0.3082vw, 1.375rem);
  --lh-h3: clamp(1.75rem, 1.6778rem + 0.3082vw, 1.875rem);
  --fs-body: clamp(1rem, 0.9278rem + 0.3082vw, 1.125rem);
  --lh-body: clamp(1.625rem, 1.5528rem + 0.3082vw, 1.75rem);
  --content-max: 1200px;
  --measure: 65ch;
  --intro-max: 640px;
  --gutter-desktop: 24px;
  --gutter-tablet: 20px;
  --gutter-mobile: 16px;
  --margin-mobile: 20px;
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --header-height: 64px;
  --header-blur: 12px;
  --hero-height: 80vh;
  --touch-min: 48px;
  --logo-h-desktop: 32px;
  --logo-h-mobile: 24px;
  --embed-h-desktop: 520px;
  --embed-h-mobile: 640px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --net-opacity: 0.2;
  --net-opacity-mobile: 0.12;
  --fan-opacity: 0.25;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --net-loop: 20s;
  --font-display: "Schibsted Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* The page is light. The header and the heroes carry data-theme="dark" and switch to the dark palette. */
[data-theme="dark"]:not(:root) {
  --bg: #0d1a2c;
  --surface: #142538;
  --border: #24384f;
  --text: #e6edf6;
  --muted: #9db0c8;
  --accent: #63b3ff;
  --on-accent: #0d1a2c;
  --accent-soft: #15314f;
  color-scheme: dark;
}

.display { font-family: var(--font-display); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.025em; }
.h2 { font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.stat { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.02em; }
.h3 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.body { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; letter-spacing: normal; }
.button { font-family: var(--font-text); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: normal; }
.label { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.01em; }
.small { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: normal; }
.display-mobile { font-family: var(--font-display); font-size: 38px; line-height: 44px; font-weight: 600; letter-spacing: -0.025em; }
.h2-mobile { font-family: var(--font-display); font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; }
.stat-mobile { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.h3-mobile { font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.body-mobile { font-family: var(--font-text); font-size: 16px; line-height: 26px; font-weight: 400; letter-spacing: normal; }