/**
 * Theme Variables
 * CSS custom properties for light and dark theme palettes.
 * All theme-related variables use the --theme- prefix.
 *
 * Light theme is the default (applied to :root and [data-theme="light"]).
 * Dark theme overrides are applied via [data-theme="dark"].
 */

/* ============================================================
 * Light Theme (Default)
 * ============================================================ */
:root,
[data-theme="light"] {
    /* Backgrounds */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f5f5f5;
    --theme-bg-tertiary: #f8f9fa;
    --theme-bg-surface: #f9f9f9;
    --theme-bg-hover: #f0f0f0;
    --theme-bg-selected: #e3f2fd;

    /* Text */
    --theme-text-primary: #212529;
    --theme-text-secondary: #495057;
    --theme-text-tertiary: #6c757d;
    --theme-text-disabled: #adb5bd;

    /* Borders */
    --theme-border-primary: #dee2e6;
    --theme-border-secondary: #e9ecef;

    /* Shadows */
    --theme-shadow: rgba(0, 0, 0, 0.1);

    /* Links & Accents */
    --theme-link-color: #007bff;
    --theme-success-color: #198754;
    --theme-pin-color: #e6a817;
    --theme-btn-danger: #dc3545;
    --theme-btn-danger-hover: #c82333;

    /* Code blocks */
    --theme-code-bg: #e9ecef;

    /* Scrollbars */
    --theme-scrollbar-track: #f1f1f1;
    --theme-scrollbar-thumb: #888;
    --theme-scrollbar-hover: #555;

    /* Input fields */
    --theme-input-bg: #ffffff;
    --theme-input-border: #ced4da;
    --theme-input-text: #495057;

    /* Tables */
    --theme-table-header-bg: #f8f9fa;
    --theme-table-stripe-bg: #f9f9f9;
    --theme-table-hover-bg: #f0f0f0;

    /* Ad Insertion column GROUP colours (identification only: a group's checkbox and
       its column headers share one). Outcome / beacons is violet, not red, so a
       header never reads as the Rejected pill. */
    --theme-colgroup-identity: #2563eb;
    --theme-colgroup-geo: #0d9488;
    --theme-colgroup-creative: #c026d3;
    --theme-colgroup-timing: #d97706;
    --theme-colgroup-outcome: #7c3aed;
    --theme-colgroup-other: #64748b;

    /* Error states (background tints, NOT status indicators) */
    --theme-error-bg: #fee;
    --theme-warning-bg: #fff3cd;
    --theme-success-bg: #d4edda;
    --theme-info-bg: #d1ecf1;
}

/* ============================================================
 * Dark Theme
 * ============================================================ */
[data-theme="dark"] {
    /* Backgrounds */
    --theme-bg-primary: #1a1a2e;
    --theme-bg-secondary: #16213e;
    --theme-bg-tertiary: #2d3748;
    --theme-bg-surface: #1f2937;
    --theme-bg-hover: #374151;
    --theme-bg-selected: #1e3a5f;

    /* Text */
    --theme-text-primary: #e2e8f0;
    --theme-text-secondary: #94a3b8;
    --theme-text-tertiary: #64748b;
    --theme-text-disabled: #4b5563;

    /* Borders */
    --theme-border-primary: #374151;
    --theme-border-secondary: #2d3748;

    /* Shadows */
    --theme-shadow: rgba(0, 0, 0, 0.3);

    /* Links & Accents */
    --theme-link-color: #60a5fa;
    --theme-success-color: #16a34a;
    --theme-pin-color: #f59e0b;
    --theme-btn-danger: #b91c2c;
    --theme-btn-danger-hover: #a01825;

    /* Code blocks */
    --theme-code-bg: #1e293b;

    /* Scrollbars */
    --theme-scrollbar-track: #1e293b;
    --theme-scrollbar-thumb: #4b5563;
    --theme-scrollbar-hover: #6b7280;

    /* Input fields */
    --theme-input-bg: #1e293b;
    --theme-input-border: #374151;
    --theme-input-text: #e2e8f0;

    /* Tables */
    --theme-table-header-bg: #2d3748;
    --theme-table-stripe-bg: #1f2937;
    --theme-table-hover-bg: #374151;

    /* Ad Insertion column GROUP colours (lighter, to read on the dark header) */
    --theme-colgroup-identity: #60a5fa;
    --theme-colgroup-geo: #2dd4bf;
    --theme-colgroup-creative: #e879f9;
    --theme-colgroup-timing: #fbbf24;
    --theme-colgroup-outcome: #a78bfa;
    --theme-colgroup-other: #94a3b8;

    /* Error states (background tints, NOT status indicators) */
    --theme-error-bg: #3b1c1c;
    --theme-warning-bg: #3b3520;
    --theme-success-bg: #1c3b2a;
    --theme-info-bg: #1c2e3b;
}

/* ============================================================
 * Semantic Status Colors (Same in Both Themes)
 * These are pill indicators with their own backgrounds -
 * they must be recognizable regardless of theme.
 * ============================================================ */
:root {
    --status-green: #28a745;
    --status-yellow: #ffc107;
    --status-orange: #fd7e14;
    --status-red: #dc3545;
    --status-gray: #6c757d;
    --status-blue: #007bff;
    --status-purple: #9333ea;
}

/* ============================================================
 * Semantic Status Backgrounds (Theme-Aware)
 * Used for alert banners, status badges, notification toasts,
 * and other components that need tinted backgrounds matching
 * their semantic meaning while remaining readable in both themes.
 * ============================================================ */
:root,
[data-theme="light"] {
    --theme-status-green-bg: #d4edda;
    --theme-status-green-text: #155724;
    --theme-status-green-border: #c3e6cb;
    --theme-status-red-bg: #f8d7da;
    --theme-status-red-text: #721c24;
    --theme-status-red-border: #f5c6cb;
    --theme-status-yellow-bg: #fff3cd;
    --theme-status-yellow-text: #856404;
    --theme-status-yellow-border: #ffeeba;
    --theme-status-blue-bg: #d1ecf1;
    --theme-status-blue-text: #0c5460;
    --theme-status-blue-border: #bee5eb;
    --theme-status-orange-bg: #fff3cd;
    --theme-status-orange-text: #856404;
    --theme-status-orange-border: #ffeeba;
    --theme-status-gray-bg: #e2e3e5;
    --theme-status-gray-text: #383d41;
    --theme-status-gray-border: #d6d8db;
    --theme-status-purple-bg: #efe4fb;
    --theme-status-purple-text: #5b1a9e;
    --theme-status-red-bg-light: #fff5f5;
    --theme-status-orange-bg-light: #fffbf0;
    --theme-status-blue-bg-light: #f0f7ff;
}

[data-theme="dark"] {
    --theme-status-green-bg: #1c3b2a;
    --theme-status-green-text: #75d99a;
    --theme-status-green-border: #2d5a3f;
    --theme-status-red-bg: #3b1c1c;
    --theme-status-red-text: #f5a0a0;
    --theme-status-red-border: #5a2d2d;
    --theme-status-yellow-bg: #3b3520;
    --theme-status-yellow-text: #ffd966;
    --theme-status-yellow-border: #5a4f2d;
    --theme-status-blue-bg: #1c2e3b;
    --theme-status-blue-text: #7ec8e3;
    --theme-status-blue-border: #2d4a5a;
    --theme-status-orange-bg: #3b2f1c;
    --theme-status-orange-text: #ffb366;
    --theme-status-orange-border: #5a4a2d;
    --theme-status-gray-bg: #2b2f36;
    --theme-status-gray-text: #c3c8cf;
    --theme-status-gray-border: #454b54;
    --theme-status-purple-bg: #2e2140;
    --theme-status-purple-text: #cfa8f7;
    --theme-status-red-bg-light: #2e1a1a;
    --theme-status-orange-bg-light: #2e2a1a;
    --theme-status-blue-bg-light: #1a2433;
}