:root {
  /* === Brand Colors === */
  /* Primary accent: deep navy blue (CTAs, buttons, links) */
  --color-accent: #1a3a5c;
  --color-accent-hover: #244d78;
  --color-accent-light: #8fbdff;
  --color-accent-rgb: 26, 58, 92;

  /* Tertiary: dark crimson (subtle details, highlights, hover states) */
  --color-tertiary: #8b1a1a;
  --color-tertiary-hover: #a52222;
  --color-tertiary-light: #c0392b;
  --color-tertiary-dark: #5c1111;

  /* === Dark Colors === */
  --color-dark: #111111;
  --color-dark-alt: #0a0a0a;
  --color-dark-medium: #1c1c1c;
  --color-dark-rgb: 17, 17, 17;
  --color-dark-navy: #05092e;

  /* === Light/Neutral Colors === */
  --color-white: #ffffff;
  --color-gray-bg: #f4f4f2;
  --color-gray-light: #f7f7f5;
  --color-gray: #999999;
  --color-gray-dark: #666666;

  /* === Text Colors === */
  --color-text: #555555;
  --color-text-dark: #222222;
  --color-text-light: #bbbbbb;
  --color-text-on-dark: #e8e8e8;
  --color-text-on-accent: #ffffff;

  /* === UI Colors === */
  --color-border: #e0e0e0;
  --color-border-light: #eeeeee;
  --color-overlay: rgba(17, 17, 17, 0.88);
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-shadow-light: rgba(0, 0, 0, 0.06);

  /* === Typography === */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-size-body: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 13px;

  /* === Spacing Scale (8px base) === */
  --space-xs: 4px;    /* tiny gaps */
  --space-sm: 8px;    /* tight spacing */
  --space-md: 16px;   /* default inner spacing */
  --space-lg: 24px;   /* section inner margins */
  --space-xl: 40px;   /* section padding */
  --space-2xl: 64px;  /* large section padding */
  --space-3xl: 80px;  /* hero / major sections */

  /* Semantic spacing aliases */
  --section-padding: var(--space-3xl);
  --section-padding-sm: var(--space-xl);
  --section-padding-mobile: var(--space-xl);
  --section-padding-mobile-sm: var(--space-lg);
  --gutter: 30px;
  --heading-margin: var(--space-xl);
  --heading-margin-mobile: var(--space-lg);

  /* === Transitions === */
  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
}