/* ========================================
   CSS Variables - Theme Configuration
   ========================================
   Brenda Donoho Piano Studio
   Theme: Classical Elegance
   Inspired by concert hall sophistication
======================================== */

:root {
    /* ----------------------------------------
       Color Palette - Classical Elegance
       ----------------------------------------
       Primary: Deep burgundy/wine (from business card)
       Accent: Warm gold (concert hall warmth)
       Background: Ivory/cream (piano keys, elegance)
    ---------------------------------------- */
    --color-burgundy: #722F37;
    --color-burgundy-light: #8B3A44;
    --color-burgundy-dark: #5A252C;
    --color-wine: #4A1C20;
    --color-wine-deep: #2D1114;
    --color-gold: #C9A962;
    --color-gold-light: #D4BC7D;
    --color-gold-dark: #A68A4B;
    --color-ivory: #FFFEF7;
    --color-ivory-warm: #FAF6ED;
    --color-cream: #F5F0E6;
    --color-cream-dark: #EBE4D5;
    --color-charcoal: #1A1A1A;
    --color-charcoal-soft: #2D2D2D;
    --color-white: #ffffff;
    --color-black-keys: #1C1C1C;

    /* ----------------------------------------
       Functional Colors
       ---------------------------------------- */
    --color-text: #1A1A1A;
    --color-text-muted: #5A5A5A;
    --color-text-light: rgba(255, 255, 255, 0.95);
    --color-text-light-muted: rgba(255, 255, 255, 0.75);

    /* ----------------------------------------
       Gradients
       ---------------------------------------- */
    --gradient-burgundy: linear-gradient(135deg, #722F37 0%, #8B3A44 100%);
    --gradient-hero: linear-gradient(160deg, #2D1114 0%, #4A1C20 40%, #722F37 100%);
    --gradient-gold: linear-gradient(135deg, #C9A962 0%, #D4BC7D 100%);
    --gradient-cream: linear-gradient(180deg, #FFFEF7 0%, #F5F0E6 100%);
    --gradient-elegant: linear-gradient(135deg, #722F37 0%, #4A1C20 50%, #2D1114 100%);
    --gradient-warm: linear-gradient(180deg, #FAF6ED 0%, #EBE4D5 100%);

    /* ----------------------------------------
       Shadows
       ---------------------------------------- */
    --shadow-sm: 0 2px 8px rgba(114, 47, 55, 0.08);
    --shadow-md: 0 8px 24px rgba(114, 47, 55, 0.12);
    --shadow-lg: 0 16px 48px rgba(114, 47, 55, 0.16);
    --shadow-xl: 0 24px 64px rgba(114, 47, 55, 0.2);
    --shadow-glow: 0 0 60px rgba(201, 169, 98, 0.25);
    --shadow-gold: 0 4px 20px rgba(201, 169, 98, 0.3);
    --shadow-dramatic: 0 20px 60px rgba(45, 17, 20, 0.4);

    /* ----------------------------------------
       Typography
       ----------------------------------------
       Display: Elegant serif for classical feel
       Body: Refined sans-serif for readability
    ---------------------------------------- */
    --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Source Sans 3', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

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

    /* ----------------------------------------
       Transitions
       ---------------------------------------- */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-elegant: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ----------------------------------------
       Border Radius
       ---------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* ----------------------------------------
       Legacy mappings for template compatibility
       ---------------------------------------- */
    --color-forest: var(--color-burgundy);
    --color-forest-light: var(--color-burgundy-light);
    --color-sage: var(--color-wine);
    --color-sage-light: var(--color-burgundy);
    --color-terracotta: var(--color-gold);
    --color-terracotta-light: var(--color-gold-light);
    --color-sand: var(--color-cream-dark);
    --gradient-forest: var(--gradient-burgundy);
    --gradient-terracotta: var(--gradient-gold);
}