/* CSS Color Tokens - Modern Design */
:root {
    /* Primary Colors - Emerald/Amber Theme */
    --color-primary: #10b981; /* emerald-500 */
    --color-primary-dark: #059669; /* emerald-600 */
    --color-primary-light: #34d399; /* emerald-400 */
    --color-secondary: #f59e0b; /* amber-500 */
    --color-accent: #22d3ee; /* cyan-400 */

    /* Text Colors */
    --color-text-primary: #0f172a; /* slate-900 */
    --color-text-secondary: #475569; /* slate-600 */
    --color-text-light: #94a3b8; /* slate-400 */
    --color-text-white: #ffffff;
    --color-text-dark: #020617; /* slate-950 */

    /* Background Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc; /* slate-50 */
    --color-bg-dark: #0b1020; /* deeper dark */
    --color-bg-card: #0f172a; /* slate-900 */
    --color-bg-gradient-start: #052e2b; /* deep emerald */
    --color-bg-gradient-end: #1f2937; /* gray-800 */
    --color-bg-blue: #0ea5e9; /* unchanged utility */

    /* Border Colors */
    --color-border-light: #e2e8f0; /* slate-200 */
    --color-border-medium: #cbd5e1; /* slate-300 */
    --color-border-dark: #64748b; /* slate-500 */
    --color-border-accent: #10b981; /* match primary */

    /* Interactive Colors */
    --color-hover: #f1f5f9; /* slate-100 */
    --color-active: #e2e8f0; /* slate-200 */
    --color-focus: #10b981; /* emerald */
    
    /* Modern Gradients */
    --gradient-primary: linear-gradient(135deg, #10b981 0%, #34d399 45%, #f59e0b 100%);
    --gradient-secondary: linear-gradient(135deg, #22d3ee 0%, #60a5fa 100%);
    --gradient-dark: linear-gradient(135deg, #052e2b 0%, #0b1020 60%, #1f2937 100%);
    --gradient-card: linear-gradient(145deg, #0f172a 0%, #111827 100%);
}