/* ============================================================
   ISB MONI — Design Tokens
   Single source of truth for all CSS custom properties.

   Overrides Django admin's built-in --vars and defines the
   --isb-* namespace used by feature stylesheets.

   Load order: this file must be included before any component
   or page CSS that reads these variables. It is wired into
   base_site.html {% block extrastyle %}.

   Theme selection:
   - The theme-init partial (templates/partials/_theme_init.html, included
     by base_site.html and the standalone pages) writes data-theme to
     <html> before CSS loads: a stored choice if present, otherwise the
     OS prefers-color-scheme. The default is not persisted.
   - html[data-theme="dark"] applies the dark palette explicitly.
   - @media (prefers-color-scheme: dark) is a fallback for
     html[data-theme="auto"] if no explicit theme was chosen.
   ============================================================ */


/* ------------------------------------------------------------
   LIGHT MODE (default)
   ------------------------------------------------------------ */
:root,
html[data-theme="light"] {
    /* --- Django built-in variables --- */
    --primary: #4A6B8E;
    --secondary: #25476E;
    --accent: #f5dd5d;

    --header-bg: var(--isb-brand-primary);
    --header-color: #fff;
    --header-link-color: #fff;

    --breadcrumbs-bg: var(--isb-surface-alt);
    --breadcrumbs-fg: var(--isb-text-primary);
    --breadcrumbs-link-fg: var(--isb-brand-link);

    --selected-row: var(--isb-filter-selected-bg);

    --link-fg: var(--isb-brand-link);
    --link-hover-color: var(--isb-brand-link);
    --link-selected-fg: var(--isb-brand-link);

    --button-bg: var(--isb-brand-primary);
    --button-hover-bg: var(--isb-brand-hover);
    --default-button-bg: var(--isb-brand-hover);
    --default-button-hover-bg: var(--isb-brand-primary);

    /* --- ISB Custom Variables (--isb-* namespace) --- */

    /* Brand */
    --isb-brand-primary: #25476E;
    --isb-brand-accent: #a12347;
    --isb-brand-hover: #1a3454;
    --isb-brand-link: #25476E;

    /* Surfaces */
    --isb-surface-bg: #ffffff;
    --isb-surface-alt: #f5f5f5;
    --isb-surface-raised: #f8f9fa;
    --isb-surface-hover: #f9f9f9;
    --isb-surface-input: #f8fbff;

    /* Borders */
    --isb-border-light: #e0e0e0;
    --isb-border-medium: #ccc;
    --isb-border-strong: #888;

    /* Text */
    --isb-text-primary: #333;
    --isb-text-secondary: #666;
    --isb-text-muted: #999;

    /* Status rows */
    --isb-row-completed-bg: #e8f5e8;
    --isb-row-inactive-bg: #fde8e8;
    --isb-row-edit-bg: #fffacd;

    /* Flash feedback — transient cell/field highlights after save */
    --isb-flash-success-bg: #d4edda;
    --isb-flash-success-border: #28a745;
    --isb-flash-error-bg: #ffebee;
    --isb-flash-error-border: #dc3545;
    --isb-flash-pending-bg: #ffffcc;

    /* Indicator dots (Ampel) — same values in both themes today;
       override in the dark block if contrast tuning is wanted later. */
    --isb-indicator-green: green;
    --isb-indicator-gold: gold;
    --isb-indicator-red: red;
    --isb-indicator-grey: #999;

    /* Filter / audit / modal */
    --isb-filter-bg: #f8f8f8;
    --isb-filter-selected-bg: #F3D8DF;
    --isb-modal-header-bg: #f5f5f5;
    --isb-modal-border: #e5e7eb;
    --isb-audit-border: #dee2e6;

    /* Severity levels (Einstufung F1–F4) */
    --isb-severity-f1-bg: #FFD700;
    --isb-severity-f1-fg: #5C4E00;
    --isb-severity-f2-bg: #FF8C00;
    --isb-severity-f2-fg: #4A2800;
    --isb-severity-f3-bg: #DC143C;
    --isb-severity-f3-fg: #ffffff;
    --isb-severity-f4-bg: #8B0000;
    --isb-severity-f4-fg: #ffffff;

    /* Secondary button — outline-on-white in light, grey-filled in dark.
       Read by .isb-btn--secondary in global/components/button.css. */
    --isb-btn-secondary-bg: #ffffff;
    --isb-btn-secondary-fg: var(--isb-brand-primary);
    --isb-btn-secondary-border: var(--isb-brand-primary);
    --isb-btn-secondary-hover: #f0f0f0;

    /* Accent button */
    --isb-btn-accent-bg: var(--isb-brand-accent);
    --isb-btn-accent-hover: #8a1d3c;

    /* Danger button */
    --isb-btn-danger-bg: #ba2121;
    --isb-btn-danger-hover: #a41515;
}


/* ------------------------------------------------------------
   DARK MODE (explicit)
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    /* --- Django built-in variables --- */
    --primary: #4A6B8E;
    --primary-fg: #f7f7f7;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --secondary: #4A6B8E;
    --accent: #f5dd5d;

    --header-bg: var(--isb-brand-primary);
    --header-color: #e0e0e0;
    --header-link-color: #e0e0e0;
    --header-branding-color: #ffffff;

    --breadcrumbs-bg: var(--isb-surface-alt);
    --breadcrumbs-fg: var(--isb-text-primary);
    --breadcrumbs-link-fg: var(--isb-brand-link);

    --link-fg: var(--isb-brand-link);
    --link-hover-color: var(--isb-brand-link);
    --link-selected-fg: var(--isb-brand-link);

    --hairline-color: #272727;
    --border-color: #353535;

    --error-fg: #e35f5f;
    --message-success-bg: #006b1b;
    --message-warning-bg: #583305;
    --message-error-bg: #570808;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: var(--isb-filter-selected-bg);

    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;

    /* --- ISB Custom Variables (--isb-* namespace) --- */

    /* Brand */
    --isb-brand-primary: #4A6B8E;
    --isb-brand-accent: #a12347;
    --isb-brand-hover: #5a7da5;
    --isb-brand-link: #7ba5cf;

    /* Django button aliases — read by Django's admin CSS */
    --button-fg: #ffffff;
    --button-bg: var(--isb-brand-primary);
    --button-hover-bg: var(--isb-brand-hover);
    --default-button-bg: var(--isb-brand-hover);
    --default-button-hover-bg: var(--isb-brand-primary);

    /* Surfaces */
    --isb-surface-bg: #1e1e2e;
    --isb-surface-alt: #2a2a3a;
    --isb-surface-raised: #2e2e3e;
    --isb-surface-hover: #2f2f2f;
    --isb-surface-input: #2a2a2e;

    /* Borders */
    --isb-border-light: #3a3a4a;
    --isb-border-medium: #4a4a5a;
    --isb-border-strong: #555;

    /* Text */
    --isb-text-primary: #e0e0e0;
    --isb-text-secondary: #aaa;
    --isb-text-muted: #777;

    /* Status rows */
    --isb-row-completed-bg: #1a3a1a;
    --isb-row-inactive-bg: #3a1a1a;
    --isb-row-edit-bg: #2e2c1a;

    /* Flash feedback */
    --isb-flash-success-bg: #1a3a1a;
    --isb-flash-success-border: #28a745;
    --isb-flash-error-bg: #3a1a1a;
    --isb-flash-error-border: #dc3545;
    --isb-flash-pending-bg: #3a3a1a;

    /* Filter / audit / modal */
    --isb-filter-bg: #252525;
    --isb-filter-selected-bg: #4a2639;
    --isb-modal-header-bg: #252525;
    --isb-modal-border: #404040;
    --isb-audit-border: #404040;

    /* Severity levels (Einstufung F1–F4) */
    --isb-severity-f1-bg: #c9a600;
    --isb-severity-f1-fg: #3d3000;
    --isb-severity-f2-bg: #cc7000;
    --isb-severity-f2-fg: #ffffff;
    --isb-severity-f3-bg: #b01030;
    --isb-severity-f3-fg: #ffffff;
    --isb-severity-f4-bg: #700000;
    --isb-severity-f4-fg: #ffffff;

    /* Secondary button — grey-filled in dark mode. */
    --isb-btn-secondary-bg: var(--isb-surface-alt);
    --isb-btn-secondary-fg: var(--isb-text-primary);
    --isb-btn-secondary-border: var(--isb-border-medium);
    --isb-btn-secondary-hover: #3a3a4a;

    /* Accent button */
    --isb-btn-accent-bg: var(--isb-brand-accent);
    --isb-btn-accent-hover: #c42a56;

    /* Danger button */
    --isb-btn-danger-bg: #8b2020;
    --isb-btn-danger-hover: #a02828;
}


/* ------------------------------------------------------------
   DARK MODE (OS preference fallback for data-theme="auto")
   The inline theme-init script in base_site.html writes an
   explicit "light" or "dark", so this path is rarely hit today —
   kept for robustness.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] {
        --primary: #4A6B8E;
        --primary-fg: #f7f7f7;

        --body-fg: #eeeeee;
        --body-bg: #121212;
        --body-quiet-color: #e0e0e0;
        --body-loud-color: #ffffff;

        --secondary: #4A6B8E;
        --accent: #f5dd5d;

        --header-bg: var(--isb-brand-primary);
        --header-color: #e0e0e0;
        --header-link-color: #e0e0e0;
        --header-branding-color: #ffffff;

        --breadcrumbs-bg: var(--isb-surface-alt);
        --breadcrumbs-fg: var(--isb-text-primary);
        --breadcrumbs-link-fg: var(--isb-brand-link);

        --link-fg: var(--isb-brand-link);
        --link-hover-color: var(--isb-brand-link);
        --link-selected-fg: var(--isb-brand-link);

        --hairline-color: #272727;
        --border-color: #353535;

        --error-fg: #e35f5f;
        --message-success-bg: #006b1b;
        --message-warning-bg: #583305;
        --message-error-bg: #570808;

        --darkened-bg: #212121;
        --selected-bg: #1b1b1b;
        --selected-row: var(--isb-filter-selected-bg);

        --close-button-bg: #333333;
        --close-button-hover-bg: #666666;

        --isb-brand-primary: #4A6B8E;
        --isb-brand-hover: #5a7da5;
        --isb-brand-link: #7ba5cf;

        --button-fg: #ffffff;
        --button-bg: var(--isb-brand-primary);
        --button-hover-bg: var(--isb-brand-hover);
        --default-button-bg: var(--isb-brand-hover);
        --default-button-hover-bg: var(--isb-brand-primary);

        --isb-surface-bg: #1e1e2e;
        --isb-surface-alt: #2a2a3a;
        --isb-surface-raised: #2e2e3e;
        --isb-surface-hover: #2f2f2f;
        --isb-surface-input: #2a2a2e;

        --isb-border-light: #3a3a4a;
        --isb-border-medium: #4a4a5a;
        --isb-border-strong: #555;

        --isb-text-primary: #e0e0e0;
        --isb-text-secondary: #aaa;
        --isb-text-muted: #777;

        --isb-row-completed-bg: #1a3a1a;
        --isb-row-inactive-bg: #3a1a1a;
        --isb-row-edit-bg: #2e2c1a;

        --isb-filter-bg: #252525;
        --isb-filter-selected-bg: #4a2639;
        --isb-modal-header-bg: #252525;
        --isb-modal-border: #404040;
        --isb-audit-border: #404040;

        --isb-severity-f1-bg: #c9a600;
        --isb-severity-f1-fg: #3d3000;
        --isb-severity-f2-bg: #cc7000;
        --isb-severity-f2-fg: #ffffff;
        --isb-severity-f3-bg: #b01030;
        --isb-severity-f3-fg: #ffffff;
        --isb-severity-f4-bg: #700000;
        --isb-severity-f4-fg: #ffffff;

        --isb-btn-secondary-bg: var(--isb-surface-alt);
        --isb-btn-secondary-fg: var(--isb-text-primary);
        --isb-btn-secondary-border: var(--isb-border-medium);
        --isb-btn-secondary-hover: #3a3a4a;

        --isb-btn-accent-bg: var(--isb-brand-accent);
        --isb-btn-accent-hover: #c42a56;

        --isb-btn-danger-bg: #8b2020;
        --isb-btn-danger-hover: #a02828;
    }
}