:root {
  /* Brand colors */
  --color-navy: #0B1F3A;
  --color-navy-dark: #0D1B2E;
  --color-blue: #0008a8;
  --color-accent: #0008a8;
  --color-blue-rgb: 0, 8, 168;
  --color-blue-light: #0a1fd4;
  --color-blue-bright: #3d5fe8;
  --color-green: #cfa327;
  --color-green-dark: #a8821f;
  --color-green-rgb: 207, 163, 39;
  --color-green-dark-rgb: 168, 130, 31;
  --color-orange: #E8A020;
  --color-dark: #0A0A0A;
  --color-gray: #6B7280;
  --color-gray-light: #9CA3AF;
  --color-gray-bg: #F3F4F6;
  --color-white: #FFFFFF;
  --color-mint-bg: #FBF6E8;
  --color-accent-bg: #E8EBFF;
  --color-brand: #0008a8;
  --color-hero-accent: #0008a8;
  --color-icon-dark: #0A3021;
  --color-icon-lime: #A2D729;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-heading: 'DM Sans', 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Semantic text */
  --color-text-heading: #0B1F3A;
  --color-text-body: #6B7280;
  --color-text-muted: #9CA3AF;
  --color-page-bg: #F8F9FB;
  --color-surface: #FFFFFF;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-hero: clamp(2.25rem, 4vw, 3.25rem);
  --font-size-display: clamp(2.35rem, 4.8vw, 3.65rem);
  --line-height-display: 1.12;
  --line-height-body: 1.75;

  /* Layout */
  --max-width: 1280px;
  --site-header-height: 73px;
  --about-hero-height: 480px;
  --section-padding-y: 5rem;
  --section-padding-x: 1.5rem;
  --card-radius: 16px;
  --btn-radius: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --transition: 0.3s ease;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-duration: 0.78s;
  --reveal-distance: 22px;

  /* Breakpoints (for reference in media queries) */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
}