:root {
    /* ----------------------------------------------
       🎨 Primary Color Palette 
    ---------------------------------------------- */
    --color-primary: #8F1D00;          /* Main brand color - rusty red */
    --color-primary-dark: #701700;     /* Darker shade for hover/focus */
    --color-primary-rgb: 143, 29, 0;   /* RGB values for rgba functions */
    --color-secondary: #7BC24F;        /* Bright green */
    --color-tertiary: #4F9A44;         /* Darker green */
    --color-background: #F9F9F7;       /* Light off-white background */
    --color-white: #ffffff;
    --color-black: #1A1A1A;            /* Soft black from logo */
    --color-danger: #dc3545;           /* Danger/error color */
  
    /* ----------------------------------------------
       📝 Text & Typography
    ---------------------------------------------- */
    --color-text-main: #1A1A1A;        /* Primary text - soft black */
    --color-text-light: #555555;       /* Subtext */
    --color-text-inverse: #ffffff;     /* For dark backgrounds */
    --color-link: #8F1D00;
    --color-link-hover: #701700;
  
    --font-family-base: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 30px;
  
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
  
    /* ----------------------------------------------
       🧱 Spacing & Sizing
    ---------------------------------------------- */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
  
    --input-padding: 10px;
    --section-padding: 20px;
    --button-padding: 12px 20px;
  
    /* ----------------------------------------------
       🎯 Borders & Radius
    ---------------------------------------------- */
    --border-color: #E8F0E4;           /* Light green tint */
    --border-color-dark: #d0d0d0;
    --border-width: 1px;
    --border-thick: 2px;
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-full: 50%;
  
    /* ----------------------------------------------
       🌑 Shadows & Depth
    ---------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.25);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  
    /* ----------------------------------------------
       🔁 Transitions
    ---------------------------------------------- */
    --transition-fast: all 0.2s ease-in-out;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
  
    /* ----------------------------------------------
       ✅ Status Colors
    ---------------------------------------------- */
    --color-success: #4F9A44;          /* Using darker green for success */
    --color-success-rgb: 79, 154, 68;
    --color-error: #8F1D00;            /* Using main rusty red for error */
    --color-error-rgb: 143, 29, 0;
    --color-warning: #E8A234;          /* Complementary orange/amber */
    --color-warning-rgb: 232, 162, 52;
    --color-info: #438891;             /* Complementary teal */
    --color-info-rgb: 67, 136, 145;

    /* ----------------------------------------------
       📱 Layout & Components
    ---------------------------------------------- */
    --popup-z-index: 9999;
    --popup-overlay-z-index: -1;
    --popup-content-width: 80%;
    --popup-content-max-width: 960px;
    --popup-content-max-height: 80vh;
    --popup-close-size: 45px;
    --popup-close-position: 10px;
    --popup-close-transform: translate(10%, -10%);
    --popup-scrollbar-width: 8px;
    --popup-overlay-opacity: 0.7;
    --popup-mobile-margin: 70px;
    --popup-booking-summary-width: 35%;
    --popup-form-width: 65%;
    --popup-form-padding: 15px;
    --popup-radio-custom-size: 20px;
    --popup-radio-custom-inner-size: 10px;
    --popup-radio-custom-margin: 15px;
    --popup-step-number-size: 30px;
    --popup-step-number-font-size: 15px;
    --popup-step-connector-height: 2px;
    --popup-step-connector-margin: 10px;
    --popup-skeleton-gap: 10px;
    --popup-skeleton-text-height: 20px;
    --popup-skeleton-loader-size: 50px;
    --popup-skeleton-loader-border: 5px;
    --popup-skeleton-loader-animation: 2s;
    --popup-skeleton-primary-color: #E8F0E4;  /* Light green tint */
    --popup-skeleton-secondary-color: var(--color-background);
    --popup-skeleton-header-height: 30px;
    --popup-skeleton-button-height: 40px;
    --popup-success-icon-size: 70px;
    --popup-coupon-input-padding: 60px;
    --popup-coupon-button-position: 38%;
    --popup-payment-button-padding: 15px;
    --popup-package-border: 1px;
    --popup-package-price-padding: 20px;
    --popup-ribbon-padding: 5px 10px;
    --popup-ribbon-border-radius: 3px;
  }