:root {
    /* ===== PRIMARY FOUNDATION ===== */
    --color-navy: #1E3A5F;           /* Primary Brand */
    --color-gold: #C6A15B;           /* Primary Accent */
    --color-white: #FFFFFF;          /* Neutral Base */
    --color-mist: #F5F5F5;           /* Light Background */
    --color-border: #E0E0E0;         /* Stone Gray */
    --color-charcoal: #3D3D3D;       /* Body Text (Charcoal Warm) */
    --color-slate: #2B3E50;          /* Footer/Dark Zones */
    
    /* ===== LUXURY ENHANCERS ===== */
    --color-cream: #FAF8F3;          /* Warm Cream/Off-White */
    --color-bronze: #8B6F47;         /* Bronze Dark (depth) */
    --color-sky: #EDF2F7;            /* Soft Blue */
    
    /* ===== SIGNATURE ACCENTS ===== */
    --color-terracotta: #C77C5D;     /* Warm Coral (stats, CTAs) */
    --color-sage: #4A5D4F;           /* Deep Forest Green */
    --color-sage-light: #5A6C57;     /* Sage Light (hover) */
    
    /* ===== HOVER STATES ===== */
    --color-navy-hover: #2A4A6F;
    --color-gold-hover: #B89350;

    /* ===== FONT FAMILIES ===== */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Georgia', 'Times New Roman', serif;

    /* ===== FONT USAGE ===== */
/* Display: H1 hero titles (Georgia serif) */
/* Body: H2, H3, paragraphs, buttons, UI (Inter sans-serif) */
    
    /* ===== FONT SIZES - DESKTOP ===== */
    --font-hero-display: 72px;       /* Hero H1 (serif only) */
    --font-h1: 56px;                 /* Standard H1 */
    --font-h2: 40px;                 /* Section Titles (Design System) */
    --font-h3: 28px;                 /* Subheadings (Design System) */
    --font-body-large: 20px;         /* Intro paragraphs */
    --font-body: 18px;               /* Main content (Design System) */
    --font-button: 18px;             /* CTA text */
    --font-caption: 14px;            /* Labels */
    --font-testimonial: 32px;        /* Quote text (serif) */
    
    /* ===== FONT SIZES - MOBILE ===== */
    --font-hero-display-mobile: 40px;
    --font-h1-mobile: 32px;
    --font-h2-mobile: 26px;          /* Design System Standard */
    --font-h3-mobile: 20px;          /* Design System Standard */
    --font-body-mobile: 16px;        /* Design System Standard */
    --font-button-mobile: 14px;
    --font-caption-mobile: 12px;
    --font-testimonial-mobile: 24px;
    
    /* ===== FONT WEIGHTS ===== */
    --weight-bold: 700;
    --weight-semibold: 600;          /* H2 standard */
    --weight-medium: 500;            /* H3 standard */
    --weight-regular: 400;           /* Body standard */
    
    /* ===== LINE HEIGHTS ===== */
    --line-height-hero: 1.1;         /* Tight for hero */
    --line-height-h1: 1.2;
    --line-height-h2: 1.5;           /* Design System (multi-line) */
    --line-height-h3: 1.4;           /* Design System */
    --line-height-body: 1.7;         /* Design System */
    --line-height-button: 1.2;
    --line-height-caption: 1.5;
    
    /* ===== LETTER SPACING ===== */
    --letter-spacing-hero: -0.02em;
    --letter-spacing-h1: -0.02em;
    --letter-spacing-h2: -0.01em;
    --letter-spacing-h3: 0;
    --letter-spacing-body: 0;
    --letter-spacing-button: 0.05em;
    --letter-spacing-caption: 0.02em;

    /* ===== SECTION PADDING ===== */
    --padding-desktop: 80px;         /* Design System Standard */
    --padding-tablet: 60px;
    --padding-mobile: 40px;          /* Design System Standard */
    
    /* ===== HORIZONTAL PADDING ===== */
    --padding-sides-desktop: 5%;     /* Design System Standard */
    --padding-sides-mobile: 20px;    /* Design System Standard */
    
    /* ===== MARGINS ===== */
    --margin-h2: 0 0 16px 0;         /* Design System */
    --margin-h3: 0 0 16px 0;
    --margin-body: 0 0 16px 0;
    --margin-section: 0 0 80px 0;
    
    /* ===== CONTAINER WIDTHS ===== */
    --max-width-container: 1400px;   /* Main container (Design System) */
    --max-width-content: 1120px;     /* Subtitle/description (Design System) */
    --max-width-narrow: 800px;
    
    /* ===== GRID GAPS ===== */
    --gap-large: 60px;
    --gap-medium: 40px;
    --gap-small: 20px;

    /* ===== CARD GRID SYSTEMS ===== */

/* Card Heights */
--card-height-xl: 320px;         /* Extra Large cards */
--card-height-l: 280px;          /* Large cards (current default) */
--card-height-m: 240px;          /* Medium cards */
--card-height-s: 200px;          /* Small cards */
--card-height-xs: 180px;         /* Extra Small cards */

/* Card Heights - Tablet */
--card-height-tablet: 250px;     /* Standard tablet size */

/* Card Heights - Mobile */
--card-height-mobile: 220px;     /* Standard mobile size */

/* Card Border Radius (already exists but adding for clarity) */
--card-border-radius: var(--border-radius-large);  /* 12px */

/* Card Padding */
--card-padding-desktop: 30px 28px;
--card-padding-tablet: 28px 24px;
--card-padding-mobile: 25px 20px;

/* ===== IMAGE SYSTEM VARIABLES ===== */

/* Image Border Radius */
--image-border-radius: var(--border-radius-large);     /* 12px default */
--image-border-radius-small: var(--border-radius-medium);  /* 8px */
--image-border-radius-hero: 16px;                      /* Larger for hero images */

/* Image Heights - PORTRAIT (3:4 ratio) */
--image-height-portrait: 650px;                        /* Portrait images (desktop) */
--image-height-portrait-tablet: 550px;                 /* Portrait images (tablet) */
--image-height-portrait-mobile: 480px;                 /* Portrait images (mobile) */

/* Image Heights - LANDSCAPE (16:9 ratio) */
--image-height-landscape: 500px;                       /* Landscape images (desktop) */
--image-height-landscape-tablet: 400px;                /* Landscape images (tablet) */
--image-height-landscape-mobile: 300px;                /* Landscape images (mobile) */

/* Image Heights - SQUARE (1:1 ratio) */
--image-height-square: 600px;                          /* Square images (desktop) */
--image-height-square-tablet: 450px;                   /* Square images (tablet) */
--image-height-square-mobile: 350px;                   /* Square images (mobile) */

/* Image Object Fit */
--image-object-fit: cover;                             /* How images fill containers */
--image-object-position: center;                       /* Image alignment (default) */
--image-object-position-portrait: center center;           /* Portrait alignment (keeps faces visible) */
--image-object-position-landscape: center center;      /* Landscape alignment */
--image-object-position-square: center center;         /* Square alignment */

/* Image Aspect Ratios */
--image-aspect-portrait: 3/4;                          /* Portrait ratio */
--image-aspect-landscape: 16/9;                        /* Landscape ratio */
--image-aspect-square: 1/1;                            /* Square ratio */


    /* ===== BORDER RADIUS ===== */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-full: 50px;      /* For buttons */
    
    /* ===== BORDERS ===== */
    --border-width: 2px;
    --border-color: var(--color-border);
    
    /* ===== SHADOWS ===== */
    --shadow-small: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-large: 0 10px 40px rgba(0, 0, 0, 0.1);
    --shadow-button: 0 8px 25px rgba(30, 58, 95, 0.3);
    --shadow-button-hover: 0 8px 24px rgba(30, 58, 95, 0.4);
    
    /* ===== TRANSITIONS ===== */
    --transition-fast: 0.3s ease;
    --transition-normal: 0.4s ease;
    --transition-slow: 0.6s ease;
    
    /* ===== Z-INDEX ===== */
    --z-below: -1;
    --z-normal: 1;
    --z-above: 10;
    --z-modal: 100;
    --z-top: 1000;

    /* ===== PRIMARY GRADIENTS ===== */
    --gradient-navy: linear-gradient(135deg, #1E3A5F 0%, #2B3E50 100%);
    --gradient-gold: linear-gradient(135deg, #C6A15B 0%, #8B6F47 100%);
    --gradient-terracotta: linear-gradient(135deg, #C77C5D 0%, #C6A15B 100%);
    --gradient-sage: linear-gradient(135deg, #4A5D4F 0%, #5A6C57 100%);
    
    /* ===== OVERLAY GRADIENTS ===== */
    --gradient-overlay: linear-gradient(135deg, rgba(199,124,93,0.9) 0%, rgba(30,58,95,0.9) 100%);
    --gradient-text-glow: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,0.85) 100%);

    /* ===== BUTTON SIZING - DESKTOP ===== */
    --button-padding-primary: 16px 40px;
    --button-padding-secondary: 14px 40px;
    --button-padding-nav: 12px 28px;
    --button-min-height: 56px;
    --button-font-size: 16px;
    
    /* ===== BUTTON SIZING - TABLET ===== */
    --button-padding-tablet: 14px 32px;
    --button-min-height-tablet: 52px;
    --button-font-size-tablet: 15px;
    
    /* ===== BUTTON SIZING - MOBILE ===== */
    --button-padding-mobile: 13px 28px;
    --button-min-height-mobile: 48px;
    --button-font-size-mobile: 14px;
    
    /* ===== BUTTON COLORS ===== */
    --button-primary-bg: linear-gradient(135deg, #C77C5D 0%, #C6A15B 100%);
    --button-primary-hover: #1E3A5F;
    --button-secondary-border: #FFFFFF;
    --button-shadow: 0 4px 16px rgba(199, 124, 93, 0.3);
    --button-shadow-hover: 0 8px 24px rgba(30, 58, 95, 0.4);

    /* ===== ARROW/ICON BUTTONS ===== */
    --arrow-size: 60px;
    --arrow-icon-size: 24px;
    
    /* Arrow Colors */
    --arrow-bg-default: #C6A15B;           /* Gold */
    --arrow-bg-hover: #1E3A5F;             /* Navy */
    --arrow-bg-active: #2B3E50;            /* Slate */
    --arrow-icon-color: #FFFFFF;           /* White */
    
    /* Arrow Shadows */
    --arrow-shadow-default: 0 4px 15px rgba(198, 161, 91, 0.4);
    --arrow-shadow-hover: 0 6px 25px rgba(30, 58, 95, 0.5);
    --arrow-shadow-active: 0 4px 15px rgba(30, 58, 95, 0.6);
    
    /* Arrow Transitions */
    --arrow-transition: all 0.3s ease;
    --arrow-transition-active: all 0.1s ease;
}