/* ==========================================================================
   Design Tokens — 5 Star Villa Holidays
   "Quiet Luxury" Homepage
   ========================================================================== */

:root {
    /* === Colors === */
    --color-gold: linear-gradient(135deg, #dbc194 0%, #b1916f 100%);
    --color-gold-hover: #FAFAF8;
    --color-gold-text: #fff; /* Dark text on gold for WCAG AA */
    --color-text-heading: #1A1A1A;
    --color-gold-gold: #b1916f;
    --color-text-body: #3D3D3D;
    --color-text-muted: #7A7A7A;
    --color-bg-page: #FFFFFF;
    --color-surface: #FAFAF8;
    --color-border: rgba(0, 0, 0, 0.08);
    --color-white: #FFFFFF;
    /* === Typography === */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-h1: 60px;
    --font-lh-h1: 1.1;
    --font-weight-h1: 400;
    --font-size-h2: 40px;
    --font-lh-h2: 1.2;
    --font-weight-h2: 400;
    --font-size-h3: 22px;
    --font-lh-h3: 1.3;
    --font-weight-h3: 500;
    /*--font-size-body: clamp(0.85rem, 1.7vw, 0.95rem);*/
    --font-size-body: clamp(0.875rem, 0.75rem + 0.625vw, 1.125rem);
    --font-lh-body: 1.6;
    --font-weight-body: 400;
    --font-size-small: 14px;
    /* === Spacing === */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 40px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
    --space-5xl: 120px;
    --space-6xl: 160px;
    --section-gap: 120px;
    --section-pad: 80px;
    /* === Layout === */
    --container-max: 1200px;
    --gutter-wide: 24px;
    --gutter-narrow: 16px;
    /* === Components === */
    --btn-height: 52px;
    --btn-radius: 12px;
    --card-radius: 16px;
    --transition: 150ms ease;
    --transition-slow: 200ms ease;
}