/* --- DESIGN SYSTEM TOKENS & FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Premium Modern Dashboard Color Palette (Inspired by modern SaaS dashboard interfaces) */
    --dash-bg: #F4F6FA;          /* Soft slate blue-gray base */
    --dash-card: #FFFFFF;        /* Pure White floating cards */
    --dash-border: rgba(226, 232, 240, 0.7); /* Subtle border matching modern UI specs */
    
    /* Elegant Accents */
    --accent-indigo: #6366F1;    /* Vibrant Indigo */
    --accent-purple: #7C3AED;    /* Rich Modern Purple */
    --accent-coral: #F43F5E;     /* Modern warm coral red for alert */
    --accent-orange: #F97316;    /* Amber Orange */
    --accent-teal: #10B981;      /* Emerald Green for safe/success metrics */
    
    /* Typography */
    --text-main: #0F172A;        /* Deep navy slate for outstanding readability */
    --text-sub: #64748B;         /* Slate gray for secondary typography */
    --text-muted: #94A3B8;       /* Light gray for tags and inactive items */
    
    /* Shadow Styling */
    --card-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px -1px rgba(0, 0, 0, 0.02);
    --card-hover-shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.08), 0 0 0 1px rgba(124, 58, 237, 0.15);
}