:root {
  /* =========================================================================
     1. COLOR SYSTEM (Reference Screenshot 3)
     ========================================================================= */
  --primary: #1F3025;        /* Deep Forest Green - Dark sections, header, footer */
  --primary-dark: #142018;   /* Extra deep forest green for hero & footer accents */
  --primary-rgb: 31, 48, 37;
  
  --secondary: #687052;      /* Safari Olive - Supporting UI, badges, subtle tags */
  --secondary-light: #7E8765;
  --secondary-rgb: 104, 112, 82;
  
  --accent: #C49A55;         /* Safari Gold - Fine lines, active states, stars, icons */
  --accent-light: #DFB570;
  --accent-soft: rgba(196, 154, 85, 0.15);
  
  --cta: #B65C3A;            /* Safari Terracotta - Primary CTA buttons & actions */
  --cta-hover: #9E4F31;
  --cta-rgb: 182, 92, 58;
  
  /* Calibrated Warm Sand: Muted, elegant warm cream from Screenshot 3 (not yellow) */
  --background: #FAF7F2;     
  --background-alt: #F4EFE6;
  --secondary-bg: #E5DDCE;   /* Safari Beige - Cards, alternates, subtle borders */
  
  --text: #252923;           /* Charcoal - Headings on light surfaces, body copy */
  --text-muted: #5C6257;     /* Soft charcoal / muted sage for secondary copy */
  --text-light: #EBE7DF;     /* Light text for dark sections & footer */
  
  --white: #FFFFFF;
  --border-light: rgba(104, 112, 82, 0.18);
  --border-gold: rgba(196, 154, 85, 0.35);

  /* =========================================================================
     2. TYPOGRAPHY SYSTEM (Reference Screenshot 4)
     ========================================================================= */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Typography Clamp Scales */
  --fs-h1: clamp(2.4rem, 4.5vw + 1rem, 4.25rem);      /* 38px - 68px */
  --fs-h2: clamp(1.85rem, 2.8vw + 0.8rem, 2.85rem);   /* 30px - 46px */
  --fs-h3: clamp(1.35rem, 1.8vw + 0.5rem, 1.85rem);   /* 22px - 30px */
  --fs-h4: clamp(1.15rem, 1.2vw + 0.4rem, 1.4rem);    /* 18px - 22px */
  
  --fs-body-lg: clamp(1.05rem, 0.5vw + 0.9rem, 1.18rem);
  --fs-body: clamp(0.92rem, 0.2vw + 0.88rem, 1rem);
  --fs-body-sm: 0.875rem;
  --fs-pretitle: clamp(0.68rem, 0.3vw + 0.65rem, 0.82rem);

  /* Line Heights */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.68;

  /* =========================================================================
     3. SPACING SYSTEM (8px Grid)
     ========================================================================= */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 96px;
  --space-5xl: 120px;

  /* Container & Layout (100% Full Width) */
  --container-max: 100%;
  --container-pad: clamp(1.25rem, 3.5vw, 4rem);

  /* Shadows & Elevation (Minimal, subtle, non-SaaS) */
  --shadow-subtle: 0 4px 20px rgba(31, 48, 37, 0.05);
  --shadow-card: 0 10px 30px rgba(31, 48, 37, 0.07);
  --shadow-hover: 0 16px 40px rgba(31, 48, 37, 0.12);

  /* Border Radii (Restrained, elegant) */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}