/* ===== COLOR PALETTE - SERENE LAVENDER (Scheme A) ===== */
:root {
    /* Primary Colors */
    --color-primary: #6B3FA0;        
    --color-primary-dark: #4f2e77;   /* Darker lavender for hover states */
    --color-primary-light: #8f6bb3;   /* Light lavender for backgrounds */
    --color-primary-soft: #f0eaf8;    /* Very light lavender for backgrounds */
    
    /* Accent Colors */
    --color-accent: #C0186B;          /* Dusty Rose - buttons, highlights, links */
    --color-accent-dark: #a11458;      /* Darker rose for hover */
    --color-accent-light: #e07ba8;     /* Light rose for subtle accents */
    --color-accent-soft: #fdf2f7;      /* Very light rose for backgrounds */
    
    /* Background Colors */
    --color-bg: #FAF8FF;               /* Soft Ivory - main background */
    --color-bg-alt: #FFFFFF;            /* White - cards, sections */
    --color-bg-warm: #f8f2ff;           /* Light lavender tint */
    --color-bg-soft: #f9f4ff;           /* Soft purple background */
    
    /* Text Colors */
    --color-text: #2D1B4E;              /* Deep Plum - body text */
    --color-text-light: #5a4b72;        /* Lighter plum for secondary text */
    --color-text-inverse: #FFFFFF;       /* White text on dark backgrounds */
    
    /* Supporting Colors */
    --color-support: #4A9B8E;            /* Muted Teal - icons, section separators */
    --color-support-dark: #2d6b61;       /* Darker teal for hover */
    --color-support-light: #b6dfd7;       /* Light teal for backgrounds */
    --color-support-soft: #e8f3f0;        /* Very light teal for backgrounds */
    
    /* UI Element Colors */
    --color-border: #f0e6fa;              /* Light lavender for borders */
    --color-border-dark: #e0d4ec;         /* Slightly darker border */
    --color-shadow: rgba(107, 63, 160, 0.1); /* Shadow with primary tint */
    --color-shadow-accent: rgba(192, 24, 107, 0.2); /* Accent shadow */
    --color-shadow-dark: rgba(0, 0, 0, 0.1); /* Dark shadow */
    
    /* Status Colors */
    --color-success: #4A9B8E;
    --color-warning: #f1c40f;
    --color-error: #e74c3c;
    
    /* Spacing System */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;
    
    /* Border Radius */
    --radius-sm: 20px;
    --radius-md: 24px;
    --radius-lg: 28px;
    --radius-xl: 32px;
    --radius-full: 40px;
    --radius-round: 50px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px var(--color-shadow);
    --shadow-md: 0 8px 18px var(--color-shadow-accent);
    --shadow-lg: 0 15px 25px var(--color-shadow-accent);
    --shadow-xl: 0 30px 40px -15px rgba(88, 48, 120, 0.3);
    --shadow-2xl: 0 30px 50px rgba(0, 0, 0, 0.2);
    
    /* Container Widths */
    --container-max: 1200px;
    --container-padding: 24px;
}

/* ===== ALTERNATE COLOR SCHEMES (Commented for reference) ===== */
/*
Scheme B - Sage & Mist
:root {
    --color-primary: #7B9E87;
    --color-primary-dark: #5e7b66;
    --color-accent: #D4956A;
    --color-accent-dark: #b87a52;
    --color-bg: #F9F7F4;
    --color-text: #2C2C2C;
    --color-support: #a8c3b0;
}

Scheme C - Ocean Dusk
:root {
    --color-primary: #2D7D7E;
    --color-primary-dark: #1f5f60;
    --color-accent: #C9963A;
    --color-accent-dark: #b07f2e;
    --color-bg: #F0F8FF;
    --color-text: #1A2E44;
    --color-support: #7aa5a6;
}

Scheme D - Soft Dawn
:root {
    --color-primary: #9C6B8A;
    --color-primary-dark: #7a4f6b;
    --color-accent: #E8936A;
    --color-accent-dark: #c9774f;
    --color-bg: #FFF9F7;
    --color-text: #4A3743;
    --color-support: #c99eb9;
}
*/