:root {
  /* Brand Colors — City of Palms Light Theme */
  --color-accent:       #5C7489;
  --color-accent-hover: #4A6275;
  --color-accent-light: rgba(92, 116, 137, 0.1);
  --color-cta:          #D4A843;
  --color-cta-hover:    #c09530;

  /* Backgrounds */
  --color-bg:           #ffffff;
  --color-bg-warm:      #F9F4F1;
  --color-bg-light:     #F5F5F6;
  --color-bg-dark:      #3F4951;
  --color-bg-darker:    #2d353c;
  --color-card-bg:      #ffffff;
  --color-card-border:  #D8DBDD;

  /* Text */
  --color-text:         #000000;
  --color-text-muted:   #666666;
  --color-text-light:   #596B7E;
  --color-text-inverse: #ffffff;
  --color-heading:      #1a365d;

  /* Utility */
  --color-border:       #D8DBDD;
  --color-overlay:      rgba(0, 0, 0, 0.4);

  /* Spacing — 4px base */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Typography */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  clamp(1.75rem, 3.5vw, 2.25rem);
  --text-4xl:  clamp(2rem, 5vw, 3rem);
  --text-hero: clamp(2.5rem, 5vw, 3rem);

  /* Font Weights */
  --weight-light:    200;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(var(--space-6), 5vw, var(--space-16));
  --header-height: 72px;

  /* Border Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* 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);

  /* Funnel */
  --funnel-max-width: 560px;
}