/**
 * Design tokens — source: DESIGN.md (ux-02mytio2-2026-06-05)
 * All visual constants for mytio2.com; consumed by site.css via var().
 */
:root {
  /* Colors */
  --color-surface: #eef3f8;
  --color-surface-dim: #dde6ef;
  --color-surface-variant: #e4ebf2;
  --color-surface-container: #ffffff;
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;
  --color-outline: #94a3b8;
  --color-outline-variant: #cbd5e1;
  --color-primary: #0d3b66;
  --color-on-primary: #ffffff;
  --color-primary-container: #1e4976;
  --color-on-primary-container: #e0f2fe;
  --color-secondary: #1a6b7c;
  --color-on-secondary: #ffffff;
  --color-tertiary: #64748b;
  --color-on-tertiary: #ffffff;
  --color-accent: #c9a227;
  --color-on-accent: #0f172a;
  --color-error: #b91c1c;
  --color-on-error: #ffffff;
  --color-background: #f2f6fa;
  --color-background-warm: #f9f7f2;
  --color-on-background: #0f172a;

  /* Typography — families */
  --font-family-sans: Inter, system-ui, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typography — weights */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography — display-lg */
  --font-size-display-lg: 3rem;
  --line-height-display-lg: 1.1;
  --letter-spacing-display-lg: -0.02em;

  /* Typography — display-lg-mobile */
  --font-size-display-lg-mobile: 2rem;
  --line-height-display-lg-mobile: 1.15;

  /* Typography — headline-md */
  --font-size-headline-md: 1.75rem;
  --line-height-headline-md: 1.25;

  /* Typography — headline-sm */
  --font-size-headline-sm: 1.25rem;
  --line-height-headline-sm: 1.3;

  /* Typography — body-lg */
  --font-size-body-lg: 1.125rem;
  --line-height-body-lg: 1.6;

  /* Typography — body-md */
  --font-size-body-md: 1rem;
  --line-height-body-md: 1.6;

  /* Typography — body-sm */
  --font-size-body-sm: 0.875rem;
  --line-height-body-sm: 1.5;

  /* Typography — label-md */
  --font-size-label-md: 0.75rem;
  --line-height-label-md: 1.4;
  --letter-spacing-label-md: 0.04em;

  /* Typography — mono-data */
  --font-size-mono-data: 0.8125rem;
  --line-height-mono-data: 1.4;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter: 24px;
  --gutter-mobile: 16px;
  --section-y: 64px;
  --section-y-mobile: 40px;

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Layout */
  --container-max-width: 1200px;

  /* Components */
  --shadow-card: 0 1px 3px rgba(13, 59, 102, 0.07), 0 8px 24px rgba(13, 59, 102, 0.04);
  --nav-height: 72px;
  --quick-answer-border-width: 4px;
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --trust-metric-value-size: 32px;
  --line-height-trust-metric: 1.2;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}