/**
 * Varia design tokens (Sprint 31, Direction A editorial palette).
 * Canonical source: src/styles/tokens.css
 * Marketing mirror: public/css/tokens.css (keep byte-identical :root blocks)
 */

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Roman.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('/fonts/SourceSerif4Variable-Italic.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root,
:root[data-theme='light'] {
  --color-bg: #e6e6da;
  --color-bg-elevated: #efefe3;
  --color-bg-banded: #dcdcd0;
  --color-surface: #efefe3;
  --color-surface-elevated: #ffffff;
  --color-border-subtle: #cfcfc0;
  --color-border-strong: #a8a895;

  --color-text-primary: #203038;
  --color-text-secondary: #51606c;
  --color-text-muted: #626860;
  --color-text-inverse: #e6e6da;

  --color-brand-primary: #356770;
  --color-brand-primary-hover: #2f5961;
  --color-brand-secondary: #203038;
  --color-brand-secondary-hover: #15212a;

  --color-tier-elevated: #b84a3a;
  --color-tier-elevated-bg: #f5e3de;
  --color-tier-high: #c18a3d;
  --color-tier-high-bg: #f3e8d2;
  --color-tier-moderate: #9e7a3f;
  --color-tier-moderate-bg: #efe6d0;
  --color-tier-pharmacogenomic: #3f6b7a;
  --color-tier-pharmacogenomic-bg: #dce6e9;
  --color-tier-protective: #6fa28d;
  --color-tier-protective-bg: #ddeae3;
  --color-tier-neutral: #8b8b8b;
  --color-tier-neutral-bg: #e8e4da;
  --color-tier-unresolved: #a89b82;
  --color-tier-unresolved-bg: #ece5d6;

  --color-risk-high: var(--color-tier-high);
  --color-risk-moderate: var(--color-tier-moderate);
  --color-risk-neutral: var(--color-tier-neutral);
  --accent: var(--color-brand-primary);

  --font-family-display: 'Source Serif 4', Charter, 'Iowan Old Style', Georgia, serif;
  --font-family-base: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 28px;
  --space-4xl: 32px;
  --space-5xl: 40px;
  --space-6xl: 60px;

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-pill: 999px;
}

:root[data-theme='dark'] {
  --color-bg: #1f2733;
  --color-bg-elevated: #293544;
  --color-bg-banded: #182029;
  --color-surface: #293544;
  --color-surface-elevated: #34404f;
  --color-border-subtle: #3f4a59;
  --color-border-strong: #5a6473;

  --color-text-primary: #e6e6da;
  --color-text-secondary: #b5bbc4;
  --color-text-muted: #adb3bc;
  --color-text-inverse: #203038;

  --color-brand-primary: #8ec5cf;
  --color-brand-primary-hover: #a5d4dc;
  --color-brand-secondary: #e6e6da;
  --color-brand-secondary-hover: #ffffff;

  --color-tier-elevated: #d85f4d;
  --color-tier-elevated-bg: #3a2a26;
  --color-tier-high: #d9a04f;
  --color-tier-high-bg: #3a3122;
  --color-tier-moderate: #b68954;
  --color-tier-moderate-bg: #2f2a1f;
  --color-tier-pharmacogenomic: #5a8a9c;
  --color-tier-pharmacogenomic-bg: #1f2f38;
  --color-tier-protective: #8ab7a4;
  --color-tier-protective-bg: #1f2f2a;
  --color-tier-neutral: #a0a0a0;
  --color-tier-neutral-bg: #2a2a2a;
  --color-tier-unresolved: #c2b59a;
  --color-tier-unresolved-bg: #2f2a1e;

  --color-risk-high: var(--color-tier-high);
  --color-risk-moderate: var(--color-tier-moderate);
  --color-risk-neutral: var(--color-tier-neutral);
  --accent: var(--color-brand-primary);
}
code,
pre,
kbd,
samp {
  font-family: var(--font-family-mono);
  font-variant-ligatures: none;
}