:root {
  /* ==========================================================================
     Chellam Groups & Finance — Luxury Design Tokens
     ========================================================================== */

  /* Colors */
  --color-white: #FFFFFF;
  --color-ivory: #FAF7F2;
  --color-ivory-light: #FCFAF6;
  --color-ivory-warm: #F4EDE0;
  
  --color-gold: #C9A13B;
  --color-gold-light: #DFBE65;
  --color-gold-dark: #A37920;
  --color-gold-glow: rgba(201, 161, 59, 0.25);
  
  --color-champagne: #F0E5CC;
  --color-charcoal: #141414;
  --color-charcoal-deep: #0D0D0D;
  --color-charcoal-card: #1C1B19;
  
  --color-body-gray: #332F28;
  --color-body-muted: #666055;
  --color-border: #E8E1D5;
  --color-border-gold: rgba(201, 161, 59, 0.32);

  /* Gradients */
  --gradient-gold: linear-gradient(135deg, #DFBE65 0%, #C9A13B 50%, #A37920 100%);
  --gradient-gold-hover: linear-gradient(135deg, #E8CD7D 0%, #D4AC45 50%, #B38626 100%);
  --gradient-dark: linear-gradient(180deg, #1C1B1A 0%, #0F0E0D 100%);
  --gradient-ivory: linear-gradient(180deg, #FCFAF6 0%, #F5EEE2 100%);
  --gradient-hero: linear-gradient(135deg, #FAF7F2 0%, #F4ECE0 100%);

  /* Typography Families */
  --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;  /* Prestige serif for titles & headlines */
  --font-ui: 'Plus Jakarta Sans', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; /* Modern crisp UI */
  --font-body: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; /* High readability body */
  --font-rate: 'Outfit', 'Montserrat', 'Plus Jakarta Sans', sans-serif; /* Ultra-crisp bold numeral typography for rates & prices */

  /* Type Scale (Modern, Bold & Executive) */
  --h1-hero: clamp(2.6rem, 5.2vw, 4.6rem);     /* 42px – 74px */
  --h1-page: clamp(2.25rem, 4.2vw, 3.8rem);    /* 36px – 61px */
  --h2-section: clamp(1.9rem, 3.4vw, 3.0rem);  /* 30px – 48px */
  --h3-sub: clamp(1.35rem, 2.2vw, 1.85rem);    /* 22px – 30px */
  --card-title: clamp(1.18rem, 1.6vw, 1.5rem); /* 19px – 24px */
  --body-size: 1.05rem;                        /* 16.8px (Comfortable standard) */
  --body-small: 0.95rem;                       /* 15.2px */
  --small-size: 0.85rem;                       /* 13.6px - no tiny illegible text */
  --eyebrow-size: 0.82rem;                     /* 13.1px with bold letter spacing */

  /* Spacing Scale */
  --sp-1: 8px; 
  --sp-2: 16px; 
  --sp-3: 24px; 
  --sp-4: 32px;
  --sp-5: 48px; 
  --sp-6: 64px; 
  --sp-7: 80px; 
  --sp-8: 104px; 
  --sp-9: 136px;

  /* Radius */
  --radius-btn: 30px; 
  --radius-btn-sm: 8px;
  --radius-card: 18px; 
  --radius-input: 12px;
  --radius-badge: 50px;

  /* Grid & Max Width */
  --content-max: 1320px; 
  --gutter: 16px; 
  --outer-margin: 80px;

  /* Elevation & Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-luxury: 0 16px 40px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(20, 20, 20, 0.08);
  --shadow-btn-gold: 0 6px 18px rgba(201, 161, 59, 0.32);
}

@media (min-width: 768px) {
  :root {
    --gutter: 20px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 24px;
  }
}