/* CSS design-token layer. Mirrors src/theme/tokens.js exactly. Component
   stylesheets consume these variables; nothing hardcodes a raw value. */
:root {
  --c-black: #0A0A0A;
  --c-dark: #161616;
  --c-g900: #1C1C1C;
  --c-g800: #2A2A2A;
  --c-g700: #3D3D3D;
  --c-g600: #555555;
  --c-g500: #7A7A7A;
  --c-g400: #9CA3AF;
  --c-g300: #D1D5DB;
  --c-g200: #E5E7EB;
  --c-g100: #F3F4F6;
  --c-g50: #FAFAFA;
  --c-white: #FFFFFF;
  --c-teal: #0D9488;
  --c-teal-dk: #0F766E;
  --c-teal-lt: #F0FDFA;
  --c-amber: #D97706;
  --c-red: #DC2626;
  --c-green: #16A34A;

  /* semantic aliases */
  --c-bg: var(--c-white);
  --c-surface: var(--c-white);
  --c-surface-alt: var(--c-g50);
  --c-surface-inset: var(--c-g100);
  --c-line: var(--c-g200);
  --c-line-soft: var(--c-g100);
  --c-text: var(--c-black);
  --c-text-soft: var(--c-g600);
  --c-text-mute: var(--c-g500);
  --c-text-faint: var(--c-g400);
  --c-accent: var(--c-teal);
  --c-accent-dk: var(--c-teal-dk);
  --c-accent-soft: var(--c-teal-lt);
  --c-inverse: var(--c-black);
  --c-on-inverse: var(--c-white);
  --c-success: var(--c-green);
  --c-warn: var(--c-amber);
  --c-danger: var(--c-red);

  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --fs-hero: clamp(44px, 11vw, 108px);
  --fs-h2: clamp(32px, 8vw, 88px);
  --fs-cta: clamp(36px, 10vw, 96px);
  --fs-editorial: clamp(26px, 6.4vw, 64px);
  --fs-fig-lg: clamp(52px, 9vw, 80px);
  --fs-fig: clamp(40px, 7.5vw, 56px);
  --fs-lead: clamp(16px, 4vw, 22px);
  --fs-item: 17px;
  --fs-body: 15px;
  --fs-cap: 13px;
  --fs-sm: 12px;
  --fs-xs: 11px;
  --fs-xxs: 10px;

  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-sec: 64px;

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  --ls-head: -0.02em;
  --ls-label: 1px;
  --ls-eyebrow: 2px;
  --ls-brand: 3px;

  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 6px;
  --r-xl: 10px;
  --r-pill: 9999px;

  --bp-narrow: 760px;
  --bp-tiny: 440px;
}