:root {
  /* Brand colors — sampled directly from the logo */
  --color-navy: #021c33;         /* deepest brand navy — solid panels */
  --color-navy-mid: #123a5c;     /* readable navy — links, icons, interactive accents */
  --color-navy-soft: #e8edf2;    /* pale navy tint — subtle fills */
  --color-orange: #f06203;       /* brand orange — CTAs */
  --color-orange-dark: #cf5202;
  --color-orange-soft: #fdeee3;  /* pale orange tint — subtle fills */

  /* Surfaces */
  --color-page: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f8fa;
  --color-elevated: #eef1f4;
  --color-primary-dark: var(--color-navy); /* deepest solid panels: topbar, page-header, footer, cta */

  /* Borders */
  --color-border: #e2e6eb;
  --color-border-strong: #cbd2db;

  /* Text */
  --color-ink: var(--color-navy);
  --color-body: #4b5563;
  --color-muted: #7c8593;

  /* Accents (kept for compatibility with existing component names) */
  --color-primary: var(--color-navy-mid);
  --color-primary-light: #2f5c86;
  --color-primary-hover: #0c2c48;
  --color-on-primary: #ffffff;

  --color-accent: var(--color-orange);
  --color-accent-dark: var(--color-orange-dark);
  --color-on-accent: #ffffff;

  --color-success: #16a34a;
  --color-success-bg: #ecfdf3;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;

  /* Text on dark panels (topbar, footer, page-header, cta banners) */
  --color-on-dark: rgba(255, 255, 255, 0.9);
  --color-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* Typography */
  --font-heading: 'Space Grotesk', 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --container-max: 1180px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(2, 28, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(2, 28, 51, 0.10);
  --shadow-lg: 0 20px 45px rgba(2, 28, 51, 0.14);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}