/**
 * Fastorder Color System
 * Enterprise-grade blue palette
 *
 * Based on: Nielsen Norman Group, Material Design, Atlassian Design System
 * WCAG 2.1 AA compliant
 */

:root {
    /* ========================================
       1. CORE BRAND COLORS
       ======================================== */

    /* Brand Navy - Primary Identity */
    --brand-navy: #283A90;
    --brand-navy-rgb: 40, 58, 144;

    /* Primary UI Blue - Bridge between logo & accent */
    --primary-blue: #1F6FD6;
    --primary-blue-rgb: 31, 111, 214;

    /* Action Cyan Blue - Icons, highlights, toggles */
    --accent-blue: #2399D4;
    --accent-blue-rgb: 35, 153, 212;


    /* ========================================
       2. SEMANTIC / STATE COLORS
       ======================================== */

    /* Info / System Blue */
    --info-blue: #2F80ED;
    --info-blue-rgb: 47, 128, 237;

    /* Success Green */
    --success: #059669;
    --success-light: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);

    /* Warning Amber */
    --warning: #f59e0b;
    --warning-light: #fbbf24;
    --warning-bg: rgba(245, 158, 11, 0.15);

    /* Error / Critical Red */
    --error: #dc2626;
    --error-light: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);


    /* ========================================
       3. BACKGROUND COLORS
       ======================================== */

    /* Soft Background Blue - Cards, panels, hovers */
    --blue-tint-bg: #EAF2FF;
    --blue-tint-bg-rgb: 234, 242, 255;

    /* Neutral backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;


    /* ========================================
       4. TEXT COLORS
       ======================================== */

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-dark: #f1f5f9;
    --text-on-primary: #ffffff;


    /* ========================================
       5. BORDER COLORS
       ======================================== */

    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;
    --border-dark: #94a3b8;


    /* ========================================
       6. DISABLED / MUTED STATES
       ======================================== */

    --muted-blue: #9BB7E3;
    --disabled-bg: #e2e8f0;
    --disabled-text: #94a3b8;


    /* ========================================
       7. DARK MODE COLORS
       ======================================== */

    --dark-navy: #16235E;
    --dark-bg-primary: #0f172a;
    --dark-bg-secondary: #1e293b;
    --dark-bg-tertiary: #334155;
    --dark-border: #334155;
    --dark-border-light: #475569;


    /* ========================================
       8. CHART / DATA VIZ SCALE
       ======================================== */

    --chart-blue-1: #283A90;  /* Darkest */
    --chart-blue-2: #1F6FD6;
    --chart-blue-3: #2399D4;
    --chart-blue-4: #6EC1F2;
    --chart-blue-5: #B7DBF7;  /* Lightest */


    /* ========================================
       9. LEGACY COMPATIBILITY
       Mapped to common variable names
       ======================================== */

    --primary: var(--primary-blue);
    --primary-dark: var(--brand-navy);
    --primary-light: var(--accent-blue);

    --bg: var(--bg-primary);
    --text: var(--text-primary);
    --border: var(--border-light);
}


/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-theme="dark"] {
    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --border-light: var(--dark-border);
    --border-medium: var(--dark-border-light);

    --bg: var(--dark-bg-primary);
    --text: #f1f5f9;
    --border: var(--dark-border);

    /* Adjusted blues for dark mode contrast */
    --primary-blue: #3b82f6;
    --accent-blue: #60a5fa;
    --blue-tint-bg: rgba(59, 130, 246, 0.1);
}


/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Background utilities */
.bg-brand-navy { background-color: var(--brand-navy); }
.bg-primary-blue { background-color: var(--primary-blue); }
.bg-accent-blue { background-color: var(--accent-blue); }
.bg-blue-tint { background-color: var(--blue-tint-bg); }
.bg-dark-navy { background-color: var(--dark-navy); }

/* Text utilities */
.text-brand-navy { color: var(--brand-navy); }
.text-primary-blue { color: var(--primary-blue); }
.text-accent-blue { color: var(--accent-blue); }
.text-info { color: var(--info-blue); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Border utilities */
.border-brand-navy { border-color: var(--brand-navy); }
.border-primary-blue { border-color: var(--primary-blue); }
.border-accent-blue { border-color: var(--accent-blue); }

/* State badges */
.badge-info {
    background: rgba(47, 128, 237, 0.15);
    color: var(--info-blue);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success-light);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-error {
    background: var(--error-bg);
    color: var(--error-light);
}