:root {
  /* ---- Base palette ---- */
  --navy-900: #0D2B58;
  --navy-800: #123E7A; /* Deep Railway Blue — primary */
  --navy-700: #1B4C8C;
  --blue-600: #2B6CB0; /* secondary */
  --blue-100: #E4ECF6;

  --gray-950: #1F2937; /* ink */
  --gray-700: #4B5563;
  --gray-500: #6B7280;
  --gray-300: #D9DDE3; /* hairline / divider */
  --gray-100: #F7F8FA; /* section tint */
  --white: #FFFFFF;

  --red-600: #D62828; /* accent — use sparingly */
  --red-700: #B71F1F;

  /* ---- Semantic aliases ---- */
  --color-bg-page: var(--white);
  --color-bg-tint: var(--gray-100);
  --color-bg-feature: var(--navy-800);
  --color-bg-feature-deep: var(--navy-900);

  --color-text-primary: var(--gray-950);
  --color-text-secondary: var(--gray-700);
  --color-text-muted: var(--gray-500);
  --color-text-inverse: var(--white);
  --color-text-inverse-muted: rgba(255,255,255,0.68);

  --color-brand-primary: var(--navy-800);
  --color-brand-secondary: var(--blue-600);
  --color-accent: var(--red-600);

  --color-border: var(--gray-300);
  --color-border-inverse: rgba(255,255,255,0.24);
  --color-border-strong: var(--navy-800);

  --color-link: var(--blue-600);
  --color-link-hover: var(--navy-800);

  --color-surface-card: var(--white);
  --color-surface-card-inverse: rgba(255,255,255,0.06);

  --color-focus-ring: var(--blue-600);

  /* ---- Gradients ---- */
  --gradient-blue: linear-gradient(135deg, #3280C3 0%, #191547 100%); /* @kind color */
}