/* SPDX-FileCopyrightText: 2026 Benoit Petit-Demouliere <petitd@igbmc.fr> */
/* SPDX-License-Identifier: AGPL-3.0-or-later */

/* ==========================================================================
   Theme Init — MUST be loaded BEFORE Bootstrap to prevent FOUC.
   Contains: CSS variable declarations + body/html critical styles.
   All component overrides stay in base.css.
   ========================================================================== */

/* ── Critical body styles (applied via variables — zero FOUC) ─────────── */
html {
    background-color: var(--pv-bg, #f1f5f9);
    color: var(--pv-text-body, #334155);
}
body {
    background-color: var(--pv-bg);
    color: var(--pv-text-body);
}

/* Dark color-scheme hint (scrollbars, form controls) */
[data-theme="dark"],
[data-theme="high-contrast"] {
    color-scheme: dark;
}

/* Dyslexic font override */
[data-dyslexic="true"],
[data-dyslexic="true"] *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]) {
    font-family: 'OpenDyslexic', 'Comic Sans MS', cursive, sans-serif !important;
    letter-spacing: 0.05em;
    word-spacing: 0.15em;
    line-height: 1.8 !important;
}

/* ── Light theme (default) ─────────────────────────────────────────── */
:root {
    --pv-primary: #2563eb;
    --pv-primary-light: #3b82f6;
    --pv-primary-dark: #1d4ed8;
    --pv-secondary: #64748b;
    --pv-success: #16a34a;
    --pv-warning: #d97706;
    --pv-danger: #dc2626;
    --pv-info: #0891b2;
    --pv-dark: #1e293b;
    --pv-light: #f8fafc;
    --pv-bg: #f1f5f9;
    --pv-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --pv-border-radius: 0.5rem;
    --pv-border-radius-sm: 0.25rem;
    --pv-border-radius-lg: 0.75rem;
    --pv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --pv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --pv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --pv-transition: 0.15s ease-in-out;

    /* Module colors */
    --pv-module-set: #27ae60;
    --pv-module-log: #e67e22;
    --pv-module-train: #9b59b6;
    --pv-module-plan: #3498db;

    /* Semantic surface colors */
    --pv-surface: #ffffff;
    --pv-surface-hover: #f8fafc;
    --pv-surface-active: #eff6ff;
    --pv-border: #e2e8f0;
    --pv-text-body: #334155;
    --pv-text-muted: #94a3b8;
    --pv-status-draft: #94a3b8;

    /* Callout backgrounds */
    --pv-callout-info-bg: #eff6ff;
    --pv-callout-warning-bg: #fffbeb;
    --pv-callout-success-bg: #f0fdf4;
    --pv-callout-danger-bg: #fef2f2;

    /* Code colors */
    --pv-code-bg: #f1f5f9;
    --pv-code-color: #be185d;

    /* Validation colors (Bootstrap-compatible) */
    --pv-valid-color: #198754;
    --pv-invalid-color: #dc3545;

    /* Outlier / warning cell colors */
    --pv-outlier-bg: #fff3cd;
    --pv-outlier-border: #ffc107;
    --pv-outlier-bg-edit: #ffe58a;
    --pv-outlier-border-edit: #fd7e14;

    /* Scrollbar colors */
    --pv-scrollbar-thumb: #6c757d;
    --pv-scrollbar-track: #f8f9fa;

    /* Drag & drop */
    --pv-drag-handle: #adb5bd;
    --pv-drag-handle-hover: #495057;
    --pv-drag-border: #0d6efd;
    --pv-drag-bg: #e8f0fe;
    --pv-suggestion-hover: #e3f2fd;

    /* Step indicator */
    --pv-step-color: #6c757d;
    --pv-step-active: #0d6efd;
    --pv-step-border: #e9ecef;

    /* Article number badge */
    --pv-article-badge: #007bff;

    /* LOG counter */
    --pv-counter-bg: #e9ecef;
    --pv-counter-color: #495057;

    /* Module card background tints */
    --pv-tint-log: #fff7ed;
    --pv-tint-set: #f0fdf4;
    --pv-tint-train: #faf5ff;
    --pv-tint-plan: #eff6ff;

    /* Input backgrounds */
    --pv-input-bg: #ffffff;
    --pv-hover-bg: #f8fafc;

    /* Overlay */
    --pv-overlay-bg: rgba(0, 0, 0, 0.3);

    /* Search gradient */
    --pv-search-gradient: linear-gradient(135deg, #f8f9fa, #e9ecef);

    /* Negative value color */
    --pv-danger-text: var(--pv-danger);

    /* Layout */
    --pv-navbar-height: 46px;
}

/* ── Dark theme ──── */
[data-theme="dark"] {
    --pv-bg: #1a1a2e;
    --pv-bg-card: #16213e;
    --pv-surface: #16213e;
    --pv-surface-hover: #1e2d4a;
    --pv-surface-active: #253a5c;
    --pv-text: #e0e0e0;
    --pv-text-body: #e0e0e0;
    --pv-text-muted: #b8b8b8;
    --pv-border: #2a2a4a;
    --pv-primary: #4fc3f7;
    --pv-nav-bg: #0f3460;
    --pv-dark: #e0e0e0;
    --pv-light: #1a1a2e;

    /* Dark surfaces used across components */
    --pv-input-bg: #1e1e3a;
    --pv-hover-bg: #2a2a4a;

    /* Scrollbar */
    --pv-scrollbar-thumb: #4a4a6a;
    --pv-scrollbar-track: #1a1a2e;

    /* Drag & drop */
    --pv-drag-handle: #6a6a8a;
    --pv-drag-handle-hover: #8a8aaa;
    --pv-drag-bg: #1e3a5f;
    --pv-suggestion-hover: #1e3a5f;

    /* Outlier / warning cells */
    --pv-outlier-bg: #3d3000;
    --pv-outlier-border: var(--pv-warning);
    --pv-outlier-bg-edit: #4a3800;
    --pv-outlier-border-edit: #fd7e14;

    /* Code */
    --pv-code-bg: #1e1e3a;
    --pv-code-color: #f472b6;

    /* Callout backgrounds */
    --pv-callout-info-bg: rgba(79, 195, 247, 0.1);
    --pv-callout-warning-bg: rgba(217, 119, 6, 0.1);
    --pv-callout-success-bg: rgba(22, 163, 74, 0.1);
    --pv-callout-danger-bg: rgba(220, 38, 38, 0.1);

    /* Module card tints */
    --pv-tint-log: rgba(230, 126, 34, 0.15);
    --pv-tint-set: rgba(39, 174, 96, 0.15);
    --pv-tint-train: rgba(155, 89, 182, 0.15);
    --pv-tint-plan: rgba(52, 152, 219, 0.15);

    /* Counter */
    --pv-counter-bg: #2a2a4a;
    --pv-counter-color: #b8b8b8;

    /* Article badge */
    --pv-article-badge: #4fc3f7;

    /* Step indicator */
    --pv-step-color: #b8b8b8;
    --pv-step-border: #2a2a4a;

    /* Shadows (lighter for dark bg) */
    --pv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --pv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
    --pv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);

    /* Overlay */
    --pv-overlay-bg: rgba(0, 0, 0, 0.5);

    /* Search gradient */
    --pv-search-gradient: linear-gradient(135deg, var(--pv-bg-card), var(--pv-bg));

    /* Negative value color */
    --pv-danger-text: #ff6b6b;
}

/* ── High-Contrast theme ──── */
[data-theme="high-contrast"] {
    --pv-bg: #000000;
    --pv-bg-card: #0a0a0a;
    --pv-surface: #0a0a0a;
    --pv-surface-hover: #1a1a1a;
    --pv-surface-active: #2a2a2a;
    --pv-text: #ffffff;
    --pv-text-body: #ffffff;
    --pv-text-muted: #cccccc;
    --pv-border: #ffffff;
    --pv-primary: #5eb8ff;
    --pv-primary-light: #7ec8ff;
    --pv-primary-dark: #3ea8ff;
    --pv-secondary: #cccccc;
    --pv-success: #4cff72;
    --pv-warning: #ffd84c;
    --pv-danger: #ff6b6b;
    --pv-info: #4cdfff;
    --pv-nav-bg: #0a0a0a;
    --pv-dark: #ffffff;
    --pv-light: #000000;
    --pv-input-bg: #0a0a0a;
    --pv-hover-bg: #1a1a1a;
    --pv-scrollbar-thumb: #666666;
    --pv-scrollbar-track: #000000;
    --pv-drag-handle: #999999;
    --pv-drag-handle-hover: #cccccc;
    --pv-drag-bg: #1a1a1a;
    --pv-suggestion-hover: #1a1a1a;
    --pv-outlier-bg: #332d00;
    --pv-outlier-border: #ffd84c;
    --pv-outlier-bg-edit: #4a3800;
    --pv-outlier-border-edit: #ffa84c;
    --pv-code-bg: #0a0a0a;
    --pv-code-color: #ff99cc;
    --pv-callout-info-bg: rgba(94, 184, 255, 0.15);
    --pv-callout-warning-bg: rgba(255, 216, 76, 0.15);
    --pv-callout-success-bg: rgba(76, 255, 114, 0.15);
    --pv-callout-danger-bg: rgba(255, 107, 107, 0.15);
    --pv-tint-log: rgba(255, 216, 76, 0.1);
    --pv-tint-set: rgba(76, 255, 114, 0.1);
    --pv-tint-train: rgba(200, 150, 255, 0.1);
    --pv-tint-plan: rgba(94, 184, 255, 0.1);
    --pv-counter-bg: #1a1a1a;
    --pv-counter-color: #cccccc;
    --pv-article-badge: #5eb8ff;
    --pv-step-color: #cccccc;
    --pv-step-border: #ffffff;
    --pv-shadow-sm: 0 1px 2px 0 rgba(255, 255, 255, 0.1);
    --pv-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.15);
    --pv-shadow-md: 0 4px 6px -1px rgba(255, 255, 255, 0.15);
    --pv-overlay-bg: rgba(0, 0, 0, 0.7);
    --pv-search-gradient: linear-gradient(135deg, #0a0a0a, #000000);
    --pv-danger-text: #ff6b6b;
}

/* ── Pastel theme ──── */
[data-theme="pastel"] {
    --pv-bg: #fdf6f0;
    --pv-bg-card: #ffffff;
    --pv-surface: #ffffff;
    --pv-surface-hover: #fef9f5;
    --pv-surface-active: #fdeee2;
    --pv-text: #4a4353;
    --pv-text-body: #4a4353;
    --pv-text-muted: #8e8698;
    --pv-border: #d4c4b8;
    --pv-primary: #7c6caf;
    --pv-primary-light: #9688c4;
    --pv-primary-dark: #635298;
    --pv-secondary: #8e8698;
    --pv-success: #6bba7e;
    --pv-warning: #e0a458;
    --pv-danger: #d47878;
    --pv-info: #6aafbf;
    --pv-nav-bg: #5c4a6e;
    --pv-dark: #4a4353;
    --pv-light: #fdf6f0;
    --pv-input-bg: #ffffff;
    --pv-hover-bg: #f8f0e8;
    --pv-scrollbar-thumb: #c8bdb4;
    --pv-scrollbar-track: #fdf6f0;
    --pv-drag-handle: #b0a598;
    --pv-drag-handle-hover: #8e8078;
    --pv-drag-bg: #fdeee2;
    --pv-suggestion-hover: #fdeee2;
    --pv-outlier-bg: #fef3e0;
    --pv-outlier-border: #e0a458;
    --pv-outlier-bg-edit: #fde8c8;
    --pv-outlier-border-edit: #d48838;
    --pv-code-bg: #f5ebe3;
    --pv-code-color: #a85882;
    --pv-callout-info-bg: #eee8f5;
    --pv-callout-warning-bg: #fef3e0;
    --pv-callout-success-bg: #e8f5ec;
    --pv-callout-danger-bg: #f9e8e8;
    --pv-tint-log: #fef3e0;
    --pv-tint-set: #e8f5ec;
    --pv-tint-train: #f0eaf8;
    --pv-tint-plan: #e5eff8;
    --pv-counter-bg: #efe5dc;
    --pv-counter-color: #6a5f58;
    --pv-article-badge: #7c6caf;
    --pv-step-color: #8e8698;
    --pv-step-border: #e8ddd4;
    --pv-overlay-bg: rgba(74, 67, 83, 0.3);
    --pv-search-gradient: linear-gradient(135deg, #fdf6f0, #f5ebe3);
    --pv-danger-text: #d47878;
    --pv-module-set: #6bba7e;
    --pv-module-log: #e0a458;
    --pv-module-train: #9688c4;
    --pv-module-plan: #6aafbf;
}

/* ── Warm theme ──── */
[data-theme="warm"] {
    --pv-bg: #f5f0e8;
    --pv-bg-card: #fffdf8;
    --pv-surface: #fffdf8;
    --pv-surface-hover: #f8f4ec;
    --pv-surface-active: #f0e8d8;
    --pv-text: #3d3428;
    --pv-text-body: #3d3428;
    --pv-text-muted: #8a7e6e;
    --pv-border: #c4b8a4;
    --pv-primary: #b07040;
    --pv-primary-light: #c08050;
    --pv-primary-dark: #905830;
    --pv-secondary: #8a7e6e;
    --pv-success: #5a8a4a;
    --pv-warning: #c49030;
    --pv-danger: #b85040;
    --pv-info: #4a8aaa;
    --pv-nav-bg: #5a4830;
    --pv-dark: #3d3428;
    --pv-light: #f5f0e8;
    --pv-input-bg: #fffdf8;
    --pv-hover-bg: #f0e8d8;
    --pv-scrollbar-thumb: #c4b8a4;
    --pv-scrollbar-track: #f5f0e8;
    --pv-drag-handle: #a89880;
    --pv-drag-handle-hover: #887860;
    --pv-drag-bg: #f0e8d8;
    --pv-suggestion-hover: #f0e8d8;
    --pv-outlier-bg: #f8eed8;
    --pv-outlier-border: #c49030;
    --pv-outlier-bg-edit: #f0e0c0;
    --pv-outlier-border-edit: #b07040;
    --pv-code-bg: #f0e8d8;
    --pv-code-color: #905830;
    --pv-callout-info-bg: #e8f0f5;
    --pv-callout-warning-bg: #f8eed8;
    --pv-callout-success-bg: #e8f0e0;
    --pv-callout-danger-bg: #f5e0d8;
    --pv-tint-log: #f8eed8;
    --pv-tint-set: #e8f0e0;
    --pv-tint-train: #f0e8f0;
    --pv-tint-plan: #e0ecf5;
    --pv-counter-bg: #e8dfd0;
    --pv-counter-color: #6a5e4e;
    --pv-article-badge: #b07040;
    --pv-step-color: #8a7e6e;
    --pv-step-border: #ddd4c4;
    --pv-overlay-bg: rgba(61, 52, 40, 0.3);
    --pv-search-gradient: linear-gradient(135deg, #f5f0e8, #e8dfd0);
    --pv-danger-text: #b85040;
    --pv-module-set: #5a8a4a;
    --pv-module-log: #c49030;
    --pv-module-train: #8a6aa0;
    --pv-module-plan: #4a8aaa;
}

/* ── Ocean theme ──── */
[data-theme="ocean"] {
    --pv-bg: #eef4f8;
    --pv-bg-card: #f8fbfd;
    --pv-surface: #f8fbfd;
    --pv-surface-hover: #f0f6fa;
    --pv-surface-active: #dceaf2;
    --pv-text: #1a3040;
    --pv-text-body: #1a3040;
    --pv-text-muted: #607888;
    --pv-border: #c8d8e4;
    --pv-primary: #1a6fa0;
    --pv-primary-light: #2a80b0;
    --pv-primary-dark: #105880;
    --pv-secondary: #607888;
    --pv-success: #1a8060;
    --pv-warning: #c07020;
    --pv-danger: #b03030;
    --pv-info: #108090;
    --pv-nav-bg: #1a3040;
    --pv-dark: #1a3040;
    --pv-light: #eef4f8;
    --pv-input-bg: #f8fbfd;
    --pv-hover-bg: #e4eef5;
    --pv-scrollbar-thumb: #a0b8c8;
    --pv-scrollbar-track: #eef4f8;
    --pv-drag-handle: #88a0b0;
    --pv-drag-handle-hover: #608898;
    --pv-drag-bg: #dceaf2;
    --pv-suggestion-hover: #dceaf2;
    --pv-outlier-bg: #fef3e0;
    --pv-outlier-border: #c07020;
    --pv-outlier-bg-edit: #fde8c8;
    --pv-outlier-border-edit: #a06018;
    --pv-code-bg: #e4eef5;
    --pv-code-color: #a03060;
    --pv-callout-info-bg: #dceaf2;
    --pv-callout-warning-bg: #fef3e0;
    --pv-callout-success-bg: #dcf0e8;
    --pv-callout-danger-bg: #f5e0e0;
    --pv-tint-log: #fef3e0;
    --pv-tint-set: #dcf0e8;
    --pv-tint-train: #e8e0f0;
    --pv-tint-plan: #dceaf2;
    --pv-counter-bg: #d4e4ee;
    --pv-counter-color: #3a5868;
    --pv-article-badge: #1a6fa0;
    --pv-step-color: #607888;
    --pv-step-border: #c8d8e4;
    --pv-overlay-bg: rgba(26, 48, 64, 0.3);
    --pv-search-gradient: linear-gradient(135deg, #eef4f8, #d4e4ee);
    --pv-danger-text: #b03030;
    --pv-module-set: #1a8060;
    --pv-module-log: #c07020;
    --pv-module-train: #7860a0;
    --pv-module-plan: #1a6fa0;
}

/* ── Colorblind theme ──── */
[data-theme="colorblind"] {
    --pv-bg: #f0f4ff;
    --pv-bg-card: #fafcff;
    --pv-surface: #fafcff;
    --pv-surface-hover: #eef2fa;
    --pv-surface-active: #dde6f5;
    --pv-text: #1a2030;
    --pv-text-body: #1a2030;
    --pv-text-muted: #5a6878;
    --pv-border: #b8c8d8;
    --pv-primary: #0055aa;
    --pv-primary-light: #1a70c0;
    --pv-primary-dark: #004088;
    --pv-secondary: #5a6878;
    /* Key: success=blue, danger=orange — distinguishable by ALL color vision types */
    --pv-success: #0077bb;
    --pv-warning: #ee8800;
    --pv-danger: #cc5500;
    --pv-info: #0099cc;
    --pv-nav-bg: #1a2030;
    --pv-dark: #1a2030;
    --pv-light: #f0f4ff;
    --pv-input-bg: #fafcff;
    --pv-hover-bg: #e4eaf5;
    --pv-scrollbar-thumb: #8898a8;
    --pv-scrollbar-track: #f0f4ff;
    --pv-drag-handle: #7888a0;
    --pv-drag-handle-hover: #5a6888;
    --pv-drag-bg: #dde6f5;
    --pv-suggestion-hover: #dde6f5;
    --pv-outlier-bg: #fff0dd;
    --pv-outlier-border: #ee8800;
    --pv-outlier-bg-edit: #ffe4c0;
    --pv-outlier-border-edit: #cc5500;
    --pv-code-bg: #eef2fa;
    --pv-code-color: #8800aa;
    --pv-callout-info-bg: #e0eeff;
    --pv-callout-warning-bg: #fff0dd;
    --pv-callout-success-bg: #e0eeff;
    --pv-callout-danger-bg: #ffead0;
    --pv-tint-log: #fff0dd;
    --pv-tint-set: #e0eeff;
    --pv-tint-train: #f0e8f8;
    --pv-tint-plan: #e0eeff;
    --pv-counter-bg: #d8e4f0;
    --pv-counter-color: #3a4858;
    --pv-article-badge: #0055aa;
    --pv-step-color: #5a6878;
    --pv-step-border: #b8c8d8;
    --pv-overlay-bg: rgba(26, 32, 48, 0.3);
    --pv-search-gradient: linear-gradient(135deg, #f0f4ff, #dde6f5);
    --pv-danger-text: #cc5500;
    --pv-module-set: #0077bb;
    --pv-module-log: #ee8800;
    --pv-module-train: #8866cc;
    --pv-module-plan: #0099cc;
}