:root {
  /* Fonts */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Neutrals */
  --color-ink: #191c22;
  --color-ink-2: #2d3340;
  --color-text-secondary: #5b626d;
  --color-text-tertiary: #8a909b;
  --color-text-quaternary: #9aa0ab;
  --color-text-faint: #b6bcc6;
  --color-border: #e3e6ea;
  --color-hairline: #eceef1;
  --color-page-bg: #f5f6f8;
  --color-white: #fff;
  --color-dark-card-bg: #22262e;
  --color-dark-card-border: #2a2e37;

  /* Brand blue */
  --color-blue: #3b6fd4;
  --color-blue-hover: #4b7ddb;
  --color-blue-tint: #eef3fc;
  --color-blue-tint-border: #d4e1f7;
  --color-blue-tint-text: #2d579f;

  /* Amber (honest-read accent) */
  --color-amber: #f4c64e;
  --color-amber-text: #b07514;
  --color-amber-tint: #faf2e3;
  --color-amber-tint-border: #efdcb4;

  /* Green (positive) */
  --color-green: #1f8a5b;
  --color-green-tint: #e8f4ee;
  --color-green-tint-border: #c4e3d2;

  /* Red (weak fit / gaps). Mirrors tokens.color.redText in apps/web so the
     fit-score swatches on /product match the bands the app actually draws. */
  --color-red: #c0463c;

  /* Purple (accent) */
  --color-purple: #7c5cd4;
  --color-purple-tint: #f1edfb;

  /* Slate (accent) */
  --color-slate: #5b6b8c;
  --color-slate-tint: #eef1f6;

  /* Radius */
  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 4px 24px rgba(20, 28, 46, 0.08);
}