/**
 * 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;
    --info-bg: rgba(59, 130, 246, 0.10);

    /* Accent Purple (decorative — surface-neutral) */
    --purple: #a78bfa;
    --purple-bg: rgba(167, 139, 250, 0.12);

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

    /* D4 (AMP-A03, 2026-10-14) — a primary fill that is AA-safe under WHITE text.
     *
     * `--primary` is tuned for strokes, icons and text ON a light background. It
     * is NOT guaranteed to carry white text: in the dark theme `--primary`
     * resolves to #3b82f6, and #ffffff on #3b82f6 is 3.68:1 — short of the
     * 4.5:1 WCAG AA floor for normal text. A filled control that places
     * `--text-on-primary` on `--primary` therefore passes in light and fails in
     * dark, which is exactly the trap the AMP active chip and "+ New Item"
     * button fell into.
     *
     * Use this token for FILLED controls whose label is --text-on-primary.
     * Measured with the WCAG 2.x relative-luminance formula:
     *   light  #ffffff on #1F6FD6 = 4.88:1  AA normal text PASS
     *   dark   #ffffff on #2563eb = 5.17:1  AA normal text PASS
     *
     * Additive: no existing selector or token is modified, so every surface
     * renders byte-identically until a component opts in. */
    --primary-accessible: #1F6FD6;


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

    /* ========================================
       11. SURFACE IDENTITY TOKENS  (PSC-CR-01)
       Distinct per-surface accent palette consumed by
       /css/platform-shell.css. Hooks already exist there;
       these are the base values they map to.
       Hues: Core=blue, Console=indigo, Dashboard=emerald, AAO=amber.
       ======================================== */

    /* Core — black (platform hub) */
    --surface-core-accent:              #0f172a;
    --surface-core-accent-soft:         rgba(15, 23, 42, 0.08);
    --surface-core-card-hover-border:   rgba(15, 23, 42, 0.45);
    --surface-core-topbar-bg:           #0f172a;

    /* Console — indigo (merchant) */
    --surface-console-accent:            #6366f1;
    --surface-console-accent-soft:       rgba(99, 102, 241, 0.08);
    --surface-console-card-hover-border: rgba(99, 102, 241, 0.45);
    --surface-console-topbar-bg:         #4338ca;

    /* Dashboard — emerald (operator) */
    --surface-dashboard-accent:            #10b981;
    --surface-dashboard-accent-soft:       rgba(16, 185, 129, 0.08);
    --surface-dashboard-card-hover-border: rgba(16, 185, 129, 0.45);
    --surface-dashboard-topbar-bg:         #047857;

    /* AAO — amber (governance / orchestration) */
    --surface-aao-accent:            #f59e0b;
    --surface-aao-accent-soft:       rgba(245, 158, 11, 0.08);
    --surface-aao-card-hover-border: rgba(245, 158, 11, 0.45);
    --surface-aao-topbar-bg:         #b45309;

    /* Admin — red (operator surface, deferred adapter creation) */
    --surface-admin-accent:            #dc2626;
    --surface-admin-accent-soft:       rgba(220, 38, 38, 0.08);
    --surface-admin-card-hover-border: rgba(220, 38, 38, 0.45);
    --surface-admin-topbar-bg:         #7f1d1d;

    /* FEPC — violet (governance / orchestration) */
    --surface-fepc-accent:            #8b5cf6;
    --surface-fepc-accent-soft:       rgba(139, 92, 246, 0.08);
    --surface-fepc-card-hover-border: rgba(139, 92, 246, 0.45);
    --surface-fepc-topbar-bg:         #5b21b6;

    /* Production strictness: mute accent toward neutral */
    --surface-production-accent-soft: rgba(100, 116, 139, 0.10);
}


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

    /* D4: the dark-theme counterpart of --primary-accessible. `--primary-blue`
     * is lightened here for stroke/text legibility against the dark surface,
     * which is correct for its own job but drops white-on-fill to 3.68:1.
     * #2563eb restores 5.17:1 for filled controls. See the light-theme
     * declaration for the full rationale and measurements. */
    --primary-accessible: #2563eb;
    --blue-tint-bg: rgba(59, 130, 246, 0.1);
    --info-bg: rgba(96, 165, 250, 0.16);

    /* Accent purple — slightly brighter on dark for contrast */
    --purple: #c4b5fd;
    --purple-bg: rgba(196, 181, 253, 0.16);

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

    /* Surface Identity Tokens (dark) — brighter accents for contrast on dark chrome */
    --surface-core-accent:              #cbd5e1;
    --surface-core-accent-soft:         rgba(203, 213, 225, 0.16);
    --surface-core-card-hover-border:   rgba(203, 213, 225, 0.55);
    --surface-core-topbar-bg:           #020617;

    --surface-console-accent:            #818cf8;
    --surface-console-accent-soft:       rgba(129, 140, 248, 0.16);
    --surface-console-card-hover-border: rgba(129, 140, 248, 0.55);
    --surface-console-topbar-bg:         #312e81;

    --surface-dashboard-accent:            #34d399;
    --surface-dashboard-accent-soft:       rgba(52, 211, 153, 0.16);
    --surface-dashboard-card-hover-border: rgba(52, 211, 153, 0.55);
    --surface-dashboard-topbar-bg:         #065f46;

    --surface-aao-accent:            #fbbf24;
    --surface-aao-accent-soft:       rgba(251, 191, 36, 0.16);
    --surface-aao-card-hover-border: rgba(251, 191, 36, 0.55);
    --surface-aao-topbar-bg:         #92400e;

    --surface-admin-accent:            #f87171;
    --surface-admin-accent-soft:       rgba(248, 113, 113, 0.16);
    --surface-admin-card-hover-border: rgba(248, 113, 113, 0.55);
    --surface-admin-topbar-bg:         #450a0a;

    --surface-fepc-accent:            #a78bfa;
    --surface-fepc-accent-soft:       rgba(167, 139, 250, 0.16);
    --surface-fepc-card-hover-border: rgba(167, 139, 250, 0.55);
    --surface-fepc-topbar-bg:         #3b0764;

    --surface-production-accent-soft: rgba(148, 163, 184, 0.14);
}


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