/* Design tokens — the ONLY place for colors, sizes and timings (rule 12). Source: doc/Requirements/08_Design_System.md (Net Speed Green, doc/Design_guide). */
:root {
  color-scheme: light;
  /* color (08 §2.1, contrast-checked) */
  --color-bg: #F0FDF0; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-bg-alt: #E6F5E3;
  --color-text: #0E1F08; --color-text-muted: #4A5D45;
  --color-primary: #206A0C; --color-on-primary: #FFFFFF; --color-live: #206A0C;
  --color-border: #CFE3CB; --color-border-strong: #6B8565;
  --color-good: #15803D; --color-ok: #4D7C0F; --color-warn: #B45309; --color-poor: #C2410C; --color-bad: #B91C1C;
  --color-ad-bg: #E4F2E1;
  --color-overlay: rgb(14 31 8 / .5);

  /* type (08 §3) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --text-speed: clamp(4.5rem, 18vw, 8.5rem);
  --text-speed-unit: clamp(1.125rem, 3vw, 1.5rem);
  --text-result: clamp(2.25rem, 8vw, 3.5rem);
  --text-display: clamp(2rem, 5.5vw, 3.5rem);
  --text-ip: clamp(2rem, 7vw, 3rem);          /* IPv4 address on /what-is-my-ip */
  --text-ip-v6: clamp(1.125rem, 4.2vw, 1.5rem); /* IPv6 (up to 39 characters) */
  --text-h1: clamp(1.5rem, 4vw, 2.25rem);
  --text-h2: clamp(1.375rem, 3vw, 1.75rem);
  --text-h3: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;

  /* space, shape, size (08 §4) */
  --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;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(14 31 8 / .06), 0 1px 3px rgb(14 31 8 / .08);
  --shadow-2: 0 8px 24px rgb(14 31 8 / .12);
  --tap-min: 44px; --header-h: 56px; --container: 1120px; --prose: 68ch;
  --test-area-min-h: 420px; --test-area-hero-min-h: 600px; --go-size: 168px; --test-max: 760px;
  --speed-box-h: 1.15em; --focus-width: 3px;
  /* reserved ad slot heights (07 §11, rule 38) */
  --ad-h-banner: 90px; --ad-h-rect: 250px; --ad-h-tall: 600px; --ad-h-mobile: 50px;
  --ad-w-banner: 728px; --ad-w-rect: 300px;
  --control-h-sm: 36px; --switch-w: 44px; --switch-h: 24px; --switch-knob: 16px;
  --icon-sm: 16px; --icon-md: 24px; --icon-lg: 40px; --badge-size: 32px;
  --ping-chart-w: 640px; --ping-chart-h: 120px;

  /* motion (08 §6) */
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 768px) {
  :root { --text-h3: 1.25rem; --text-body: 1.0625rem; --test-area-min-h: 460px; --test-area-hero-min-h: 560px; --go-size: 200px; }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1F08; --color-surface: #16290C; --color-surface-raised: #1D3411; --color-bg-alt: #12250A;
  --color-text: #F0FDF0; --color-text-muted: #A7B8A0;
  --color-primary: #4AF321; --color-on-primary: #0E1F08; --color-live: #4AF321;
  --color-border: #2A4220; --color-border-strong: #6A8A5F;
  --color-good: #4ADE80; --color-ok: #A3E635; --color-warn: #FBBF24; --color-poor: #FB923C; --color-bad: #F87171;
  --color-ad-bg: #16290C;
  --shadow-1: none; --shadow-2: none;
}