/* ==========================================================================
   EQUESTRiAN PREMIUM DESIGN SYSTEM - VARIABLES
   ========================================================================== */

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

:root {
    /* Color Tokens - Warm Earth Chocolate Brown & Sand Creams */
    --color-primary: #6e4726;          /* Rich Earth Chocolate Brown (from image) */
    --color-primary-rgb: 110, 71, 38;
    --color-primary-light: #8a5c37;    /* Warm Terracotta Sand */
    --color-primary-dark: #4a2e17;     /* Deep Espresso Oak */
    
    --color-accent: #c5a880;           /* Soft Champagne Sand Gold */
    --color-accent-rgb: 197, 168, 128;
    --color-accent-hover: #a88a60;     /* Deep Antique Gold */
    --color-accent-light: #f5ebe0;     /* Pale Ivory Sand */
    
    --color-bg-cream: #faf7f2;         /* Soft Linen Cream (from image) */
    --color-bg-white: #ffffff;         /* Pure Alabaster */
    --color-bg-dark: #3a2311;          /* Warm Charcoal Brown */
    --color-bg-panel: #4a2e17;         /* Deep Oak Stables */
    
    --color-text-dark: #2c1a0d;        /* Deep Espresso Charcoal */
    --color-text-muted: #736255;       /* Muted Timber Spruce */
    --color-text-light: #fdfaf7;       /* Off-White Sand */
    
    --color-border: #ede6dd;           /* Soft Sand Border */
    --color-border-light: rgba(197, 168, 128, 0.2);
    
    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(110, 71, 38, 0.04);
    --shadow-md: 0 8px 24px rgba(110, 71, 38, 0.06);
    --shadow-lg: 0 16px 36px rgba(110, 71, 38, 0.08);
    --shadow-glass: 0 8px 32px 0 rgba(110, 71, 38, 0.04);
    
    /* Layout & Spacing */
    --container-max: 1240px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}