/* ==========================================================================
   RENTAS YEKA - Design System Variables
   
   Design Direction: Minimalist & Refined with Gold Luxury
   Brand: Rentas Yeka - Premium Property Rentals
   
   Display Font: Playfair Display (elegant, serif, luxury)
   Body Font: DM Sans (clean, modern, readable)
   
   Color Palette:
   - Gold Primary: #C8A84D (warm luxury gold)
   - Gold Dark: #A68B30 (deeper gold for hover/accents)
   - Gold Light: #E8D89C (soft gold for backgrounds)
   - Black: #0D0D0D (rich black)
   - Dark: #1A1A1A (dark surfaces)
   - Charcoal: #2A2A2A (cards on dark bg)
   - Off-White: #F9F7F2 (warm light background)
   - White: #FFFFFF
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap');

:root {
    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Colors - Gold Palette */
    --color-gold: #C8A84D;
    --color-gold-dark: #A68B30;
    --color-gold-light: #E8D89C;
    --color-gold-soft: #F5EDD6;
    --color-gold-glow: rgba(200, 168, 77, 0.15);

    /* Colors - Neutrals */
    --color-black: #0D0D0D;
    --color-dark: #1A1A1A;
    --color-charcoal: #2A2A2A;
    --color-gray-dark: #4A4A4A;
    --color-gray: #6B6B6B;
    --color-gray-light: #9A9A9A;
    --color-gray-lighter: #D4D4D4;
    --color-off-white: #F9F7F2;
    --color-white: #FFFFFF;

    /* Semantic Colors */
    --color-primary: var(--color-gold);
    --color-primary-dark: var(--color-gold-dark);
    --color-primary-light: var(--color-gold-light);
    --color-background: var(--color-white);
    --color-background-alt: var(--color-off-white);
    --color-surface-dark: var(--color-dark);
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-muted: #999999;
    --color-text-on-dark: #E8E8E8;
    --color-text-on-gold: var(--color-black);

    /* Spacing Scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Typography Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-6xl: 4.5rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 8px 30px rgba(200, 168, 77, 0.2);
    --shadow-gold-lg: 0 15px 40px rgba(200, 168, 77, 0.3);

    /* Transitions */
    --transition-fast: 200ms ease;
    --transition-base: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 900px;
    --header-height: 80px;
}