/* ===========================================
   DESIGN TOKENS (CSS Variables)
   ========================================= */
:root {
    /* === LIGHT BROWN & GOLD PALETTE === */
    --color-light-beige: #F8F5F0;
    --color-beige: #F0E9DF;
    --color-warm-beige: #EDE5D8;
    --color-tan: #E6D9C8;
    --color-medium-brown: #A68B7C;
    --color-dark-brown: #5D4037;
    --color-darker-brown: #3E2723;
    --color-deepest-brown: #2E1F1A;
    /* === GOLD VARIANTS === */
    --color-gold: #C9A227;
    --color-dark-gold: #A8840A;
    --color-light-gold: #E6D39A;
    --color-bright-gold: #FFD700;
    --color-rose-gold: #E8B4A0;
    --color-champagne: #F7E7CE;
    /* === ACCENT COLORS === */
    --accent-warm-orange: #D2691E;
    --accent-copper: #B87333;
    --accent-bronze: #CD7F32;
    --accent-cream: #FFFDD0;
    --accent-ivory: #FFFFF0;
    /* === STATUS COLORS === */
    --success: #8BC34A;
    --warning: #FF9800;
    --error: #F44336;
    --info: #2196F3;
    /* === TYPOGRAPHY === */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Playfair Display', serif;
    --font-monospace: 'Roboto Mono', monospace;
    /* === SPACING SYSTEM === */
    --spacing-0: 0px;
    --spacing-0\.5: 2px;
    --spacing-1: 4px;
    --spacing-1\.5: 6px;
    --spacing-2: 8px;
    --spacing-2\.5: 10px;
    --spacing-3: 12px;
    --spacing-3\.5: 14px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 28px;
    --spacing-8: 32px;
    --spacing-9: 36px;
    --spacing-10: 40px;
    --spacing-11: 44px;
    --spacing-12: 48px;
    --spacing-14: 56px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;
    --spacing-28: 112px;
    --spacing-32: 128px;
    --spacing-36: 144px;
    --spacing-40: 160px;
    --spacing-44: 176px;
    --spacing-48: 192px;
    --spacing-52: 208px;
    --spacing-56: 224px;
    --spacing-60: 240px;
    --spacing-64: 256px;
    --spacing-72: 288px;
    --spacing-80: 320px;
    --spacing-96: 384px;
    /* Font Sizes */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 6rem;
    --font-size-hero-clamp-small: clamp(2.5rem, 8vw, 4rem);
    --font-size-hero-clamp-medium: clamp(3rem, 8vw, 6rem);
    --font-size-hero-sub-clamp-small: clamp(1rem, 4vw, 1.8rem);
    --font-size-hero-sub-clamp-medium: clamp(1.2rem, 3vw, 2rem);
    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    /* === SHADOWS === */
    --shadow-none: none;
    --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 2px 0 rgba(62, 39, 35, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(62, 39, 35, 0.1), 0 1px 3px 0 rgba(62, 39, 35, 0.08);
    --shadow-lg: 0 10px 15px -3px rgba(62, 39, 35, 0.1), 0 4px 6px -2px rgba(62, 39, 35, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(62, 39, 35, 0.1), 0 10px 10px -5px rgba(62, 39, 35, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(62, 39, 35, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(62, 39, 35, 0.06);
    --shadow-focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.2);
    --shadow-glow: 0 0 30px rgba(201, 162, 39, 0.3);
    --shadow-gold: 0 0 20px rgba(201, 162, 39, 0.2);
    /* === TRANSITIONS === */
    --transition-property-all: all;
    --transition-property-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
    --transition-property-opacity: opacity;
    --transition-property-transform: transform;
    --transition-timing-ease: ease;
    --transition-timing-linear: linear;
    --transition-timing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --transition-timing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --transition-timing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-duration-75: 75ms;
    --transition-duration-100: 100ms;
    --transition-duration-150: 150ms;
    --transition-duration-200: 200ms;
    --transition-duration-300: 300ms;
    --transition-duration-500: 500ms;
    --transition-duration-700: 700ms;
    --transition-duration-1000: 1000ms;
    --transition-normal: var(--transition-property-all) var(--transition-duration-300) var(--transition-timing-ease-in-out);
    --transition-fast: var(--transition-property-all) var(--transition-duration-150) var(--transition-timing-ease-out);
    --transition-slow: var(--transition-property-all) var(--transition-duration-500) var(--transition-timing-ease-in-out);
    /* === GRADIENTS === */
    --gradient-warm: linear-gradient(135deg, var(--color-light-beige) 0%, var(--color-beige) 50%, var(--color-warm-beige) 100%);
    --gradient-gold: linear-gradient(135deg, var(--color-gold) 0%, var(--color-dark-gold) 100%);
    --gradient-sunset: linear-gradient(135deg, var(--color-rose-gold) 0%, var(--color-gold) 50%, var(--color-dark-gold) 100%);
    --gradient-luxury: linear-gradient(135deg, var(--color-champagne) 0%, var(--color-light-gold) 30%, var(--color-gold) 70%, var(--color-dark-gold) 100%);
    --gradient-radial: radial-gradient(circle at center, var(--color-light-beige) 0%, var(--color-beige) 100%);
    /* === GLASSMORPHISM === */
    --glass-bg: rgba(248, 245, 240, 0.25);
    --glass-border: rgba(201, 162, 39, 0.18);
    --glass-blur: blur(16px);
    --glass-shadow: 0 8px 32px 0 rgba(62, 39, 35, 0.1);
    /* Grid layout vars */
    --grid-cols-default: repeat(1, minmax(0, 1fr));
    --grid-cols-2: repeat(2, minmax(0, 1fr));
    --grid-cols-3: repeat(3, minmax(0, 1fr));
    --grid-cols-3-1: 3fr 1fr;
    --grid-cols-auto-fill-300: repeat(auto-fill, minmax(300px, 1fr));
    --grid-cols-auto-fit-350: repeat(auto-fit, minmax(350px, 1fr));
    /* === DARK MODE COLORS === */
    --color-dark-bg: #18120c;
    --color-dark-card: #23180f;
    --color-dark-brown-text: #f5e9d6;
    --color-dark-gold: #ffd700;
    --color-dark-accent: #bfa76a;
    --color-dark-border: #3e2a1a;
}