/**
 * CSS Variables - ICM Analytics Theme
 *
 * Dark theme color palette and spacing variables.
 * Edit these to change the site-wide appearance.
 */

:root {
    /* ========================================
       Primary Colors (Blue-Purple-Pink gradient)
       ======================================== */
    --color-primary: #60a5fa;
    --color-primary-light: #93c5fd;
    --color-primary-dark: #3b82f6;

    --color-secondary: #a78bfa;
    --color-secondary-light: #c4b5fd;
    --color-secondary-dark: #8b5cf6;

    --color-accent: #ec4899;
    --color-accent-light: #f472b6;
    --color-accent-dark: #db2777;

    /* ========================================
       Background Colors
       ======================================== */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: rgba(30, 41, 59, 0.5);
    --bg-nav: rgba(15, 23, 42, 0.95);

    /* ========================================
       Text Colors
       ======================================== */
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;

    /* ========================================
       Border Colors
       ======================================== */
    --border-primary: rgba(148, 163, 184, 0.1);
    --border-secondary: rgba(148, 163, 184, 0.2);
    --border-accent: rgba(96, 165, 250, 0.3);

    /* ========================================
       Status Colors
       ======================================== */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-warning: #fbbf24;
    --color-warning-light: #fcd34d;
    --color-error: #ef4444;
    --color-error-light: #fca5a5;
    --color-info: #0ea5e9;

    /* ========================================
       Chart Colors
       ======================================== */
    --chart-revenue: #60a5fa;
    --chart-burn: #f97316;
    --chart-green: #10b981;
    --chart-purple: #a78bfa;
    --chart-yellow: #fbbf24;

    /* ========================================
       Gradients
       ======================================== */
    --gradient-primary: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #ec4899 100%);
    --gradient-card: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(167, 139, 250, 0.1) 100%);
    --gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    --gradient-button: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);

    /* ========================================
       Typography
       ======================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    /* ========================================
       Spacing
       ======================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* ========================================
       Border Radius
       ======================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;

    /* ========================================
       Shadows
       ======================================== */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 40px rgba(96, 165, 250, 0.2);
    --shadow-glow: 0 20px 40px rgba(96, 165, 250, 0.4);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ========================================
       Layout
       ======================================== */
    --container-max-width: 1600px;
    --nav-height: 70px;
    --z-nav: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;
}