/*
  variables.css
  Design tokens. Palette is pulled from the actual TYY 2Q-4E brand material
  (navy + gold crest, D8=green stage coding, D9=purple stage coding) rather
  than an invented brand, so the site reads as part of the same system as
  the process diagrams and forms.
*/

:root {
  /* --- Core brand --- */
  --navy-950: #071227;
  --navy-900: #0a1a35;
  --navy-800: #0f2a52;
  --navy-700: #163a6b;
  --navy-600: #1f4d8a;

  --gold-600: #b8860f;
  --gold-500: #d4a017;
  --gold-400: #e8bc4a;
  --gold-300: #f0c869;

  /* --- Stage coding, matches D8 (green) / D9 (purple) in the flow diagrams --- */
  --d8-green: #1f8a4c;
  --d8-green-light: #e6f4ec;
  --d9-purple: #5b3b8c;
  --d9-purple-light: #efe8f7;

  /* --- Supporting accents --- */
  --teal: #0e9594;
  --amber: #f5a623;
  --red-flag: #d64545;

  /* --- Neutrals --- */
  --paper: #f5f7fb;
  --paper-raised: #ffffff;
  --ink: #10182b;
  --ink-muted: #5b6472;
  --line: #e2e6ee;

  /* --- Type --- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Scale --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 10px 30px -12px rgba(10, 26, 53, 0.25);
  --shadow-pop: 0 20px 45px -15px rgba(10, 26, 53, 0.35);

  --container-width: 1180px;
}