/* --- 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 {
    /*
     * ========================================
     * RESPONSIVE BREAKPOINTS (3-device canon)
     *   Mobile:  < 480px  (phones)
     *   Tablet:  480px - 1023px (phablets + tablets)
     *   Desktop: >= 1024px (laptops + desktops)
     *
     * CSS custom properties cannot be used in @media queries,
     * so these values are repeated literally at each query site.
     * Always use these exact values when adding new breakpoints.
     * ========================================
     */
    
    /* Premium Modern Dashboard Color Palette (Inspired by modern SaaS dashboard interfaces) */
    --dash-bg: #FFFFFF;          /* 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 */
    --accent-blue: #3B82F6;    /* Light blue */
    
    /* 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);
}