/* PassGMC design tokens, compiled from the PassGMC Design System (Claude artifact). */
:root {
  --teal-50: #eaf3f5;
  --teal-100: #cfe4e8;
  --teal-200: #a3ccd4;
  --teal-300: #6fb0bb;
  --teal-400: #3d8e9c;
  --teal-500: #176b7a;
  --teal-600: #135b68;
  --teal-700: #0f4a55;
  --teal-800: #0e3a42;
  --teal-900: #0a2c33;
  --ink-900: #15232b;
  --ink-800: #25343c;
  --slate-600: #45565e;
  --slate-500: #5c7079;
  --slate-400: #7e9098;
  --slate-300: #a9b7bd;
  --line-300: #cdd8dc;
  --line-200: #e2e9eb;
  --line-100: #edf1f3;
  --fill-100: #f0f3f4;
  --mist-50: #f4f7f8;
  --white: #ffffff;
  --petrol: var(--teal-800);
  --sage-base: #4f9d74;
  --sage-strong: #3e8460;
  --sage-bg: #eaf5ef;
  --sage-border: #bfe0cd;
  --honey-base: #d69a3c;
  --honey-strong: #95661a;
  --honey-bg: #fbf2e1;
  --honey-border: #edd3a0;
  --clay-base: #c75d52;
  --clay-strong: #a8453c;
  --clay-bg: #f8ecea;
  --clay-border: #e9c2bc;
  --color-bg: var(--mist-50);
  --color-surface: var(--white);
  --color-surface-sunken: var(--mist-50);
  --color-surface-inverse: var(--teal-800);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--slate-500);
  --color-text-muted: var(--slate-400);
  --color-text-placeholder: var(--slate-300);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: rgba(255,255,255,0.70);
  --color-border: var(--line-200);
  --color-border-strong: var(--line-300);
  --color-divider: var(--line-100);
  --color-brand: var(--teal-500);
  --color-brand-hover: var(--teal-600);
  --color-brand-active: var(--teal-700);
  --color-brand-subtle: var(--teal-50);
  --color-brand-text: var(--teal-700);
  --color-on-brand: var(--white);
  --color-accent-on-dark: var(--teal-300);
  --color-focus: rgba(23,107,122,0.32);
  --color-border-on-dark: rgba(255,255,255,0.12);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16,40,46,0.05);
  --shadow-sm: 0 1px 3px rgba(16,40,46,0.06), 0 1px 2px rgba(16,40,46,0.04);
  --shadow-md: 0 4px 12px rgba(16,40,46,0.08), 0 2px 4px rgba(16,40,46,0.04);
  --shadow-lg: 0 12px 32px rgba(16,40,46,0.12), 0 4px 8px rgba(16,40,46,0.06);
  --shadow-focus: 0 0 0 3px rgba(23,107,122,0.32);
  --border-hairline: 1px;
  --border-emphasis: 1.5px;
  --container-content: 1120px;
  --container-reading: 760px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 600ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.t-metric-xl { font-family: var(--font-mono); font-size: 72px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.t-metric-lg { font-family: var(--font-mono); font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.t-metric-md { font-family: var(--font-mono); font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.t-display { font-family: var(--font-sans); font-size: 48px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.t-h1 { font-family: var(--font-sans); font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.t-h2 { font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; }
.t-title { font-family: var(--font-sans); font-size: 17px; line-height: 1.35; font-weight: 600; }
.t-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.t-body-strong { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 600; }
.t-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.2; font-weight: 600; }
.t-button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 600; }
.t-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; font-weight: 500; letter-spacing: 0.12em; }
.t-mono-data { font-family: var(--font-mono); font-size: 14px; line-height: 1.5; font-weight: 500; }
.t-mono-sm { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; font-weight: 500; }