:root {
  /* ---- Brand core (taken verbatim from the production app) ---- */
  --navy: #041f72;            /* dark-blue — primary brand, headings, buttons */
  --navy-ink: #3d406b;        /* body text / borders (hsl(236 27% 33%)) */
  --blue-mid: #3b73d8;        /* medium-blue — accent gradients, blur blobs (APPROXIMATED) */
  --blue-050: #e8f4fd;        /* light-blue — tint surfaces, borders, icon tiles */
  --crimson: #bd0f0f;         /* brand-red — the varsity accent */
  --crimson-deep: #8f0b0b;    /* pressed / darker crimson */
  --paper: #f8f9fd;           /* app-bg — page background */
  --white: #ffffff;

  /* ---- Neutrals ---- */
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;

  /* ---- Semantic ---- */
  --success: #16a34a;         /* checkmarks in comparison tables + benefit lists */
  --warning: #facc15;         /* saved / starred word */
  --danger: #dc2626;

  /* ---- Word-difficulty bars (3-bar meter in the app) ---- */
  --level-basic-1: #22c55e;
  --level-basic-2: #86efac;
  --level-mid-1: #fb923c;
  --level-mid-2: #fdba74;
  --level-adv-1: #dc2626;
  --level-adv-2: #ef4444;
  --level-adv-3: #f87171;
  --level-empty: var(--gray-300);

  /* ---- Semantic aliases: use these in components ---- */
  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-tint: var(--blue-050);
  --surface-inverse: var(--navy);
  --text-strong: var(--navy);
  --text-body: var(--navy-ink);
  --text-muted: rgba(4, 31, 114, 0.65);
  --text-faint: rgba(4, 31, 114, 0.45);
  --text-on-inverse: var(--white);
  --text-accent: var(--crimson);
  --border-hair: var(--blue-050);
  --border-strong: rgba(4, 31, 114, 0.15);
  --focus-ring: var(--navy);
  --link: var(--navy);
  --link-hover: var(--crimson);

  /* ---- shadcn/ui bridge (the app ships these HSL triples) ---- */
  --background: 0 0% 100%; /* @kind other */
  --foreground: 236 27% 33%; /* @kind other */
  --card: 0 0% 100%; /* @kind other */
  --card-foreground: 236 27% 33%; /* @kind other */
  --popover: 0 0% 100%; /* @kind other */
  --popover-foreground: 236 27% 33%; /* @kind other */
  --primary: 236 27% 33%; /* @kind other */
  --primary-foreground: 0 0% 100%; /* @kind other */
  --secondary: 352 66% 40%; /* @kind other */
  --secondary-foreground: 0 0% 100%; /* @kind other */
  --muted: 216 100% 96%; /* @kind other */
  --muted-foreground: 236 27% 33%; /* @kind other */
  --accent: 352 66% 40%; /* @kind other */
  --accent-foreground: 0 0% 100%; /* @kind other */
  --destructive: 348 83% 47%; /* @kind other */
  --destructive-foreground: 0 0% 100%; /* @kind other */
  --border: 236 27% 33%; /* @kind other */
  --input: 236 27% 33%; /* @kind other */
  --ring: 236 27% 33%; /* @kind other */
}