/* Clowdy — Color tokens
 * Primary  Dark Blue   #000759  — logos, headers, navigation, body text, dark backgrounds
 * Secondary Light Blue #0487D9  — highlights, hover states, secondary buttons, infographics
 * Neutral  Gainsboro   #DCDCDC  — backgrounds, dividers, forms, cards, tables
 * Accent   Tangerine   #F4701F  — CTAs, buttons, alerts, visual accents
 */
:root {
  /* ---- Brand base palette ---- */
  --clowdy-navy: #000759;
  --clowdy-blue: #0487d9;
  --clowdy-gainsboro: #dcdcdc;
  --clowdy-orange: #f4701f;

  /* ---- Navy ramp ---- */
  --navy-900: #000533;
  --navy-800: #000759; /* brand primary */
  --navy-700: #0a1170;
  --navy-600: #1a237e;
  --navy-500: #2a3494;

  /* ---- Blue ramp ---- */
  --blue-700: #0369a8;
  --blue-600: #0487d9; /* brand secondary */
  --blue-500: #2ba0e8;
  --blue-300: #8fcdf2;
  --blue-100: #d6ecfa;

  /* ---- Orange ramp ---- */
  --orange-700: #c8530f;
  --orange-600: #f4701f; /* brand accent */
  --orange-500: #f78844;
  --orange-300: #fab989;
  --orange-100: #fde7d6;

  /* ---- Neutral / grey ramp ---- */
  --white: #ffffff;
  --grey-50: #f7f8fa;
  --grey-100: #eef0f4;
  --grey-200: #dcdcdc; /* brand neutral / gainsboro */
  --grey-300: #c4c8d0;
  --grey-400: #9aa0ac;
  --grey-500: #6b7280;
  --grey-600: #4b5160;
  --grey-700: #2f3440;
  --grey-900: #14151c;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--white);
  --surface-subtle: var(--grey-50);
  --surface-card: var(--white);
  --surface-muted: var(--grey-100);
  --surface-inverse: var(--navy-800);
  --surface-inverse-2: var(--navy-900);

  /* ---- Semantic: text ---- */
  --text-primary: var(--navy-800);
  --text-body: #2b2f45;
  --text-muted: var(--grey-500);
  --text-inverse: var(--white);
  --text-inverse-muted: #b9bdd6;
  --text-link: var(--blue-600);

  /* ---- Semantic: borders / dividers ---- */
  --border-subtle: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-inverse: rgba(255, 255, 255, 0.16);
  --border-accent: var(--orange-600);

  /* ---- Semantic: interactive ---- */
  --accent: var(--orange-600);
  --accent-hover: var(--orange-700);
  --accent-contrast: var(--white);
  --primary: var(--navy-800);
  --primary-hover: var(--navy-700);
  --secondary: var(--blue-600);
  --secondary-hover: var(--blue-700);
  --focus-ring: rgba(4, 135, 217, 0.45);

  /* ---- Semantic: status ---- */
  --success: #1f9d57;
  --success-soft: #e3f5ec;
  --warning: #e8a317;
  --warning-soft: #fcf3dc;
  --danger: #d9402b;
  --danger-soft: #fbe6e3;
  --info: var(--blue-600);
  --info-soft: var(--blue-100);
}