:root {
  /* =========================
     PROJECT COLORS
  ========================= */
  --color-primary:          #012043;
  --color-primary-hover:    #022b59;
  --color-primary-active:   #001732;

  --color-secondary:        #C9A45C;
  --color-secondary-hover:  #D4B06A;
  --color-secondary-active: #A9843F;
  --color-secondary-on-light: #7A5916;

  --color-accent:           var(--color-secondary);
  --color-accent-on-light:  var(--color-secondary-on-light);

  --color-text:    #222;
  --color-heading: #111;
  --color-muted:   #555;

  --color-link:       var(--color-primary);
  --color-link-hover: var(--color-primary-hover);

  --color-bg:       #ffffff;
  --color-bg-light: #f8f9fa;
  --color-border:   #ddd;

  --color-on-primary:   #ffffff;
  --color-on-secondary: #012043;

  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* =========================
     CTA
  ========================= */
  --cta-radius:      0.4rem;
  --cta-padding-y:   1.05rem;
  --cta-padding-x:   clamp(1.75rem, 4vw, 3.25rem);
  --cta-font-weight: 500;
  --cta-transition:  all 0.22s ease;

  --cta-shadow:        0 10px 24px rgba(0, 0, 0, 0.18);
  --cta-shadow-hover:  0 14px 30px rgba(0, 0, 0, 0.22);
  --cta-shadow-active: 0 8px 18px rgba(0, 0, 0, 0.16);

  /* =========================
     SITE HEADER HEIGHT
  ========================= */
  --site-header-height-mobile: 70px;
}