:root {
  /* Brand — matched to logo SVGs */
  --red: #CE2523;
  --red-dk: #A71E1D;
  --red-lt: #FDEAEA;
  --blue: #0172B6;
  --blue-dk: #096DA5;
  --blue-lt: #E6F2FA;
  --blue-accent: #4393B2;

  /* Neutrals */
  --g50: #F9FAFB;
  --g100: #F3F4F6;
  --g200: #E5E7EB;
  --g300: #D1D5DB;
  --g400: #9CA3AF;
  --g500: #6B7280;
  --g600: #4B5563;
  --g700: #374151;
  --g800: #1F2937;
  --g900: #111827;
  --white: #FFFFFF;

  /* Semantic */
  --success: #059669;
  --success-lt: #D1FAE5;
  --warning: #D97706;
  --warning-lt: #FEF3C7;
  --error: #DC2626;
  --error-lt: #FEE2E2;

  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Spacing */
  --section-pad: clamp(3rem, 6vw, 6rem);
  --container-max: 1200px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* Motion */
  --motion-duration: 0.4s;
  --motion-stagger: 60ms;
  --motion-travel: 12px;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-easing: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Borders */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.15);
}