/**
 * 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-dark: #d97706;
    --warning-bg: rgba(245, 158, 11, 0.15);

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

    /* Status Text (bright foreground on dark surfaces) */
    --status-green-text: #4ade80;
    --status-red-text: #f87171;


    /* ========================================
       2b. ALERT SURFACE / TEXT
       Opaque backgrounds + high-contrast text for alert banners.
       Replaces Bootstrap .alert-{danger,warning,success,info} patterns.
       ======================================== */

    --error-surface: #f8d7da;
    --error-text: #721c24;
    --warning-surface: #fff3cd;
    --warning-text: #856404;
    --success-surface: #d4edda;
    --success-text: #166534;
    --info-surface: #dbeafe;
    --info-text: #1e40af;
    --danger-surface: #f8d7da;
    --danger-text: #991b1b;


    /* ========================================
       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;

    /* Elevated surface (card / panel / modal — distinct from page-body --bg-primary) */
    --surface-default: #ffffff;


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

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-dark: #f1f5f9;
    --text-on-primary: #ffffff;
    --text-on-solid: #ffffff;   /* White text on any solid colored/dark/branded surface */


    /* ========================================
       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);

    /* ========================================
       10. MONITOR / DETAIL PAGE ACCENT ALIASES
       Backward-compat for market_detail + content_detail.
       Reference these instead of hardcoded hex.
       ======================================== */
    --mon-accent-green:   var(--success-light);     /* #10b981 */
    --mon-accent-red:     var(--error-light);        /* #ef4444 */
    --mon-accent-amber:   var(--warning);            /* #f59e0b */
    --mon-accent-purple:  #8b5cf6;
    --mon-accent-orange:  #e67e22;
    --mon-text-secondary: var(--text-secondary, var(--text-muted));
}


/* ========================================
   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);

    /* Alert surface / text (dark mode) */
    --error-surface: rgba(239, 68, 68, 0.15);
    --error-text: #fca5a5;
    --warning-surface: rgba(245, 158, 11, 0.15);
    --warning-text: #fcd34d;
    --success-surface: rgba(16, 185, 129, 0.15);
    --success-text: #6ee7b7;
    --info-surface: rgba(59, 130, 246, 0.15);
    --info-text: #93c5fd;
    --danger-surface: rgba(239, 68, 68, 0.15);
    --danger-text: #fca5a5;

    /* Surface / text-on-solid (dark mode) */
    --surface-default: var(--dark-bg-secondary);  /* #1e293b — elevated card surface */
    --text-on-solid: #ffffff;                      /* invariant — white on dark/colored surfaces */
}


/* ========================================
   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);
}

/* Expanded badge set — canonical for all detail pages */
.badge-active {
    background: var(--success-bg);
    color: var(--success-light);
}

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

.badge-neutral {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.badge-purple {
    background: rgba(139, 92, 246, 0.15);
    color: var(--mon-accent-purple);
}