/*
 * Design tokens. Colors are derived from the iOS asset catalog
 * (BrandBlue dark appearance #2882FF, BrandInk, LaunchBackground).
 * Every color used by the site must come from this file.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --color-background: #08090b;
  --color-background-raised: #0c0e11;
  --color-surface: #101317;
  --color-surface-2: #151a1f;
  --color-surface-3: #1c2228;
  --color-border: #232a31;
  --color-border-strong: #313a43;

  /* Text */
  --color-text: #f5f7fa;
  --color-text-soft: #c4cbd3;
  --color-muted: #8d97a3;
  --color-faint: #5c6670;

  /* Brand + status */
  --color-primary: #2882ff;
  --color-primary-strong: #0068f3;
  --color-primary-soft: rgb(40 130 255 / 0.14);
  --color-primary-line: rgb(40 130 255 / 0.45);
  --color-on-primary: #ffffff;
  --color-warning: #f5a524;
  --color-warning-soft: rgb(245 165 36 / 0.14);
  --color-danger: #f04438;
  --color-danger-soft: rgb(240 68 56 / 0.14);
  --color-success: #3dd68c;
  --color-success-soft: rgb(61 214 140 / 0.12);

  /* Chart channel colors */
  --chart-rpm: #f5f7fa;
  --chart-boost: #2882ff;
  --chart-boost-target: #8d97a3;
  --chart-lambda: #3dd68c;
  --chart-hpfp: #f5a524;
  --chart-timing: #c084fc;
  --chart-grid: #1c2228;

  /* Typography */
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --stretch-display: 112%;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.6vw, 5rem);
  --text-telemetry: clamp(3rem, 2rem + 5vw, 5.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Shape */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --radius-phone: 46px;

  /* Layout */
  --container-width: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-height: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;

  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}