/**
 * DGP Brand Colors - Single Source of Truth
 *
 * Overrides Materio's Bootstrap variables with brand colors.
 * All color definitions should be here - not in Django or JavaScript.
 */

/* ============================================
   Light Theme (default)
   ============================================ */
:root,
[data-bs-theme="light"] {
    /* Brand Colors - Override Materio's Bootstrap vars */
    --bs-primary: #2e6ede;
    --bs-primary-rgb: 32, 82, 171;
    --bs-secondary: #8593a4;
    --bs-secondary-rgb: 133, 146, 163;
    --bs-success: #71dd37;
    --bs-success-rgb: 113, 221, 55;
    --bs-danger: #fe6145;
    --bs-danger-rgb: 255, 62, 30;
    --bs-warning: #fbb84d;
    --bs-warning-rgb: 255, 180, 0;
    --bs-info: #03c3ec;
    --bs-info-rgb: 3, 195, 236;

    /* Difficulty Colors (star rating system) */
    --dgp-difficulty-1: var(--bs-success);      /* ⭐ easiest - green */
    --dgp-difficulty-2: var(--bs-info);         /* ⭐⭐ cyan */
    --dgp-difficulty-3: var(--bs-warning);      /* ⭐⭐⭐ orange */
    --dgp-difficulty-4: var(--bs-danger);       /* ⭐⭐⭐⭐ red */
    --dgp-difficulty-5: #e066eb;                /* ⭐⭐⭐⭐⭐ hardest - purple */

    /* Chart-specific colors */
    --dgp-chart-grid: #e7e7e7;
    --dgp-chart-text: #6d6777;
    --dgp-chart-legend: #4b4b4b;
    --dgp-chart-track: #f6f6f6;

    /* Heatmap gradient */
    --dgp-heatmap-low: var(--bs-success);
    --dgp-heatmap-high: var(--bs-danger);
    --dgp-heatmap-empty: #e0e0e0;

    /* Heatmap data labels */
    --dgp-heatmap-label-shots: #ffffff;      /* White text on dark blue bg */
    --dgp-heatmap-label-difficulty: #333333; /* Dark text for multi-color ranges */
}

/* ============================================
   Dark Theme
   ============================================ */
[data-bs-theme="dark"] {
    /* Brand colors stay the same, but derived colors change */

    /* Chart-specific colors for dark mode */
    --dgp-chart-grid: #3f3c55;
    --dgp-chart-text: #b0acc7;
    --dgp-chart-legend: #b0acc7;
    --dgp-chart-track: #3f3c55;

    /* Heatmap gradient (same colors work in dark) */
    --dgp-heatmap-empty: #3a3647;

    /* Heatmap data labels */
    --dgp-heatmap-label-shots: #ffffff;      /* White text on dark blue bg */
    --dgp-heatmap-label-difficulty: #e0e0e0; /* Light text for dark mode */
}

/* ── Theme-aware image utility ──────────────────────────────────────────────
   Pattern for any future theme-aware image pair in the DGP frontend:
   Add class "foo-light" to the light-mode image, "foo-dark" to the dark-mode
   image, then define the two classes below analogously.
   No materio asset path dependency — works for any static file location.
   ─────────────────────────────────────────────────────────────────────── */
.dgp-logo-dark  { display: none; }
html[data-bs-theme="dark"] .dgp-logo-light { display: none; }
html[data-bs-theme="dark"] .dgp-logo-dark  { display: block; }