/* ============================================================
   THÈME « Fineas Dark » — Couche 2 (identité de marque)
   Thème sombre aux accents violets — thème par défaut.
   Toutes les couleurs, polices, dégradés, ombres et surfaces
   sont déclarées ici comme custom properties.
   ============================================================ */

:root,
[data-theme="dark"] {

    /* ── Polices ──────────────────────────────────────────── */
    --font-body:             'Barlow', 'Arial', sans-serif;
    --font-display:          'Poppins', sans-serif;
    --font-heading:          'Inter', sans-serif;
    --font-mono:             'Courier New', monospace;
    --font-brand:            'Aboreto', cursive;

    /* ── Tailles de base ──────────────────────────────────── */
    --text-base-size:        16px;
    
    --base-color-for-glow: 139, 92, 246;
    --base-color-for-secondary-glow: 59, 130, 246;

    /* ── Couleurs principales (brand) ─────────────────────── */
    /*  -light / -dark  → texte lisible sur tout thème
        -pale           → DÉCORATIF seulement (icône, glow, halo)
                          ⚠ JAMAIS comme color: de texte lisible
                          (invisible sur thèmes clairs)              */

    --color-primary:         #9d6bff;
    --color-primary-dark:    #7C3AED;
    --color-primary-darker:  #6d28d9;
    --color-primary-light:   #a78bfa;
    --color-primary-lighter: #c4b5fd;
    --color-primary-pale:    #c8b8ff;
    --color-primary-glow:    rgba(var(--base-color-for-glow), 0.35);

    --color-secondary:       #3B82F6;
    --color-secondary-dark:  #2563eb;
    --color-secondary-light: #60a5fa;
    --color-secondary-pale:  #93c5fd;

    --color-accent:          #6366f1;
    --color-accent-light:    #818cf8;
    --color-accent-pale:     #a5b4fc;

    --color-teal:            #4bc0c0;
    --color-cyan:            #22d3ee;

    /* ── Couleurs sémantiques ─────────────────────────────── */
    /*  Texte : --color-*           → standard (messages, labels)
              --color-*-bright     → fort (titres d'alerte)
              --color-*-light      → secondaire coloré
              --color-*-pale       → ⚠ DÉCORATIF, pas de texte !
     Fonds : --color-*-bg          + --color-*-border          (standard)
             --color-*-bg-light    + --color-*-border-light    (léger)
     Règle : ne jamais mixer les niveaux (bg + border-light = ❌)  */

    --color-success:         #4caf50;
    --color-success-bright:  #22c55e;
    --color-success-light:   #4ade80;
    --color-success-pale:    #86efac;
    --color-success-dark:    #2e7d32;
    --color-success-bg:      rgba(34, 197, 94, 0.15);
    --color-success-border:  rgba(34, 197, 94, 0.4);

    --color-danger:          #ef4444;
    --color-danger-bright:   #f87171;
    --color-danger-light:    #ff6b6b;
    --color-danger-pale:     #fca5a5;
    --color-danger-deep:     #dc2626;
    --color-danger-dark:     #b91c1c;
    --color-danger-bg:       rgba(239, 68, 68, 0.15);
    --color-danger-border:   rgba(239, 68, 68, 0.4);

    --color-warning:         #f97316;
    --color-warning-light:   #ffb74d;
    --color-warning-icon:    #ffb86b;
    --color-warning-pale:    #fdba74;
    --color-warning-yellow:  #fbbf24;
    --color-warning-gold:    #ffcc00;
    --color-warning-bg:      rgba(249, 115, 22, 0.15);
    --color-warning-border:  rgba(249, 115, 22, 0.4);

    --color-success-bg-light:     rgba(34, 197, 94, 0.08);
    --color-success-border-light: rgba(34, 197, 94, 0.2);
    --color-danger-bg-light:      rgba(239, 68, 68, 0.08);
    --color-danger-border-light:  rgba(239, 68, 68, 0.2);
    --color-warning-bg-light:     rgba(249, 115, 22, 0.08);
    --color-warning-border-light: rgba(249, 115, 22, 0.2);

    --color-info:            #3B82F6;
    --color-info-light:      #60a5fa;
    --color-info-pale:       #93c5fd;
    --color-info-bg:         rgba(96, 165, 250, 0.1);
    --color-info-border:     rgba(96, 165, 250, 0.25);

    /* ── Arrière-plans ────────────────────────────────────── */
    --bg-body:               #1e1f2f;
    --bg-body-alt:           #1e1e2f;
    --bg-body-deep:          #0f111a;
    --bg-card:               #2c2f48;
    --bg-card-dark:          #1c1e2b;
    --bg-card-darker:        #262733;
    --bg-card-gradient-start:#2e2f4c;
    --bg-card-gradient-end:  #1e1f35;
    --bg-input:              #2e2e42;
    --bg-input-alt:          #1f2135;
    --bg-panel:              #1e1e2f;
    --bg-panel-dark:         #1a1c2e;
    --bg-nav-hover:          #3a3d5e;
    --bg-nav-active:         rgba(139, 92, 246, 0.12);
    --bg-table-row:          #34365c;

    /* Surfaces semi-transparentes
       --bg-glass-*    → opaques (panels, modals, drawers)
       --bg-subtle-*   → semi-transparent, échelle croissante :
         faint (0.015) → subtle (0.03) → hover (0.06)
         → active (0.08) → strong (0.12) → extra (0.15)
       ⚠ --bg-glass-light (0.98) ≠ subtil ! Pour un fond
         à peine visible, utiliser --bg-subtle-faint.          */
    --bg-glass:              rgba(30, 30, 50, 0.85);
    --bg-glass-heavy:        rgba(25, 25, 45, 0.95);
    --bg-glass-light:        rgba(25, 28, 44, 0.98);
    --bg-overlay:            rgba(0, 0, 0, 0.7);
    --bg-overlay-light:      rgba(0, 0, 0, 0.4);
    --bg-subtle-faint:       rgba(255, 255, 255, 0.015);
    --bg-subtle:             rgba(255, 255, 255, 0.03);
    --bg-subtle-hover:       rgba(255, 255, 255, 0.06);
    --bg-subtle-active:      rgba(255, 255, 255, 0.08);
    --bg-subtle-strong:      rgba(255, 255, 255, 0.12);
    --bg-subtle-extra:       rgba(255, 255, 255, 0.15);
    
    /* ── Texte ────────────────────────────────────────────── */
    /*  Hiérarchie d'opacité (du plus visible au plus discret) :
        --text-primary   (1.0)   titres, montants
        --text-bright    (0.9)   labels actifs
        --text-secondary (~0.8)  corps de texte
        --text-mid       (0.75)  sous-titres, meta
        --text-muted     (~0.67) labels secondaires
        --text-dim       (0.6)   légendes
        --text-faded     (0.5)   placeholders
        --text-very-dim  (0.4)   quasi invisible
        --text-hint      (0.3)   watermarks

        Variantes teintées : --text-soft, --text-lavender,
        --text-slate, --text-cool (opacité + couleur).         */
    --text-primary:          #ffffff;
    --text-secondary:        #cccccc;
    --text-muted:            #aaaaaa;
    --text-dim:              rgba(255, 255, 255, 0.6);
    --text-very-dim:         rgba(255, 255, 255, 0.4);
    --text-hint:             rgba(255, 255, 255, 0.3);
    --text-bright:           rgba(255, 255, 255, 0.9);
    --text-mid:              rgba(255, 255, 255, 0.75);
    --text-faded:            rgba(255, 255, 255, 0.5);
    --text-soft:             #a5a5c5;
    --text-soft-light:       #cfcfe8;
    --text-lavender:         #e6e6f0;
    --text-slate:            #9ca3af;
    --text-slate-light:      #cbd5e1;
    --text-cool:             #9fa4c6;
    --text-cool-light:       #dcdcff;
    --text-on-primary:       #ffffff;

    /* ── Bordures ─────────────────────────────────────────── */
    --border-subtle:         rgba(255, 255, 255, 0.06);
    --border-light:          rgba(255, 255, 255, 0.1);
    --border-medium:         rgba(255, 255, 255, 0.15);
    --border-strong:         rgba(255, 255, 255, 0.2);
    --border-card:           rgba(148, 163, 184, 0.08);
    --border-card-inner:     #343647;
    --border-input:          #444444;
    --border-muted:          #3a3f62;
    --border-danger:         rgba(255, 90, 90, 0.32);

    /* ── Rayons de bordure ────────────────────────────────── */
    --radius-xs:             4px;
    --radius-sm:             6px;
    --radius-md:             8px;
    --radius-lg:             12px;
    --radius-xl:             16px;
    --radius-2xl:            20px;
    --radius-pill:           999px;

    /* ── Ombres ───────────────────────────────────────────── */
    --shadow-xs:             0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-sm:             0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-lg:             0 6px 18px rgba(0, 0, 0, 0.35);
    --shadow-xl:             0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-2xl:            0 10px 26px rgba(0, 0, 0, 0.45);
    --shadow-primary:        0 4px 12px rgba(139, 92, 246, 0.35);
    --shadow-primary-strong: 0 0 15px rgba(139, 92, 246, 0.4);
    --shadow-success:        0 4px 12px rgba(0, 255, 100, 0.25);
    --shadow-danger:         0 0 15px rgba(239, 68, 68, 0.45);

    /* ── Dégradés ─────────────────────────────────────────── */
    --gradient-primary:      linear-gradient(135deg, #9d6bff, #4bc0c0);
    --gradient-accent-blue:  linear-gradient(90deg, #8B5CF6, #3B82F6);
    --gradient-accent:       linear-gradient(135deg, #8B5CF6, #6366F1);
    --gradient-accent-hover: linear-gradient(135deg, #7C3AED, #4F46E5);
    --gradient-accent-dark:  linear-gradient(90deg, #7c3aed, #3b82f6);
    --gradient-accent-teal:  linear-gradient(90deg, #8b5cf6, #22d3ee);
    --gradient-accent-tri:   linear-gradient(90deg, #7c3aed, #3b82f6, #22d3ee);
    --gradient-danger:       linear-gradient(90deg, #EF4444, #DC2626);
    --gradient-success:      linear-gradient(135deg, #10b981, #22c55e);
    --gradient-info:         linear-gradient(135deg, #06b6d4, #2563eb);
    --gradient-teal-accent:  linear-gradient(135deg, #38bdf8, #8b5cf6);
    --gradient-card:         linear-gradient(145deg, #2e2f4c, #1e1f35);
    --gradient-card-hover:   linear-gradient(145deg, #383a5b, #2b2c4a);
    --gradient-card-subtle:  linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    --gradient-disabled:     linear-gradient(135deg, #a5a5a5, #777);
    --gradient-calendar-low:    linear-gradient(145deg, #1c2b3a, #1a2733);
    --gradient-calendar-medium: linear-gradient(145deg, #256185, #1d4d6b);
    --gradient-calendar-high:   linear-gradient(145deg, #1a6b5a, #1f7c7c);

    /* ── Couleurs graphiques (Chart.js) ──────────────────── */
    /* Courbes principales */
    --chart-line-1:          #9d6bff;          /* primary — épargne, revenus          */
    --chart-line-2:          #4bc0c0;          /* teal — dispo, moyenne, bridge +     */
    --chart-line-3:          #ff6384;          /* rose — dépenses, bridge -            */
    /* Barres empilées */
    --chart-bar-1:           #00c9a7;          /* dispo / courant                     */
    --chart-bar-2:           #7a5cff;          /* épargne                             */
    --chart-bar-3:           #ffb347;          /* provisions / liquidités             */
    /* Compare mois */
    --chart-bar-current:     #9d6bff;          /* mois en cours                       */
    --chart-bar-previous:    #c2a9ff;          /* mois précédent                      */
    /* Budget sparklines / trend */
    --chart-spent:           #ef4444;          /* dépensé (danger)                    */
    --chart-spent-fill:      rgba(239,68,68,0.08);
    --chart-spent-bar:       rgba(239,68,68,0.6);
    --chart-spent-bar-hover: rgba(239,68,68,0.8);
    --chart-alloc:           #60a5fa;          /* alloué                              */
    --chart-alloc-bar:       rgba(96,165,250,0.35);
    --chart-alloc-bar-hover: rgba(96,165,250,0.55);
    /* Intérêts / impôts */
    --chart-tax-due:         rgba(255, 99, 132, 1);
    --chart-tax-smooth:      rgba(56, 199, 242, 1);
    --chart-tax-provision:   rgba(108, 99, 255, 1);
    /* Forecast (recurrences) */
    --chart-forecast-1:      rgba(54, 162, 235, 1);
    --chart-forecast-2:      rgba(255, 99, 132, 1);
    --chart-forecast-3:      rgba(75, 192, 192, 1);
    --chart-forecast-4:      rgba(255, 206, 86, 1);
    --chart-forecast-5:      rgba(153, 102, 255, 1);
    --chart-forecast-1-bg:   rgba(54, 162, 235, 0.2);
    --chart-forecast-2-bg:   rgba(255, 99, 132, 0.2);
    --chart-forecast-3-bg:   rgba(75, 192, 192, 0.2);
    --chart-forecast-4-bg:   rgba(255, 206, 86, 0.2);
    --chart-forecast-5-bg:   rgba(153, 102, 255, 0.2);
    /* Textes et grille */
    --chart-text:            #cccccc;
    --chart-text-muted:      #aaaaaa;
    --chart-text-dim:        #999999;
    --chart-grid:            rgba(255,255,255,0.04);
    --chart-grid-strong:     #333333;
    /* Tooltip */
    --chart-tooltip-bg:      rgba(0,0,0,0.8);
    --chart-tooltip-text:    #ffffff;
    --chart-tooltip-border:  #333333;
    /* Center text (doughnut) */
    --chart-center-label:    #aaaaaa;
    --chart-center-value:    #ffffff;
    /* Datalabels */
    --chart-datalabel:       #ffffff;
    /* Palette hue (for makePalette baseHue) */
    --chart-palette-hue:     195;

    /* ── Objectifs financiers ─────────────────────────────── */
    --goal-monthly-color:       var(--color-secondary-light);
    --goal-monthly-bg:          var(--color-info-bg);
    --goal-monthly-border:      rgba(96, 165, 250, 0.3);
    --goal-permanent-color:     var(--color-primary-light);
    --goal-permanent-bg:        rgba(167, 139, 250, 0.15);
    --goal-permanent-border:    rgba(167, 139, 250, 0.3);
    --goal-info-color:          var(--color-secondary-light);
    --goal-info-bg:             var(--color-info-bg);
    --goal-info-border:         var(--color-info-border);
    --goal-warning-color:       var(--color-warning);
    --goal-warning-bg:          var(--color-warning-bg);
    --goal-warning-border:      var(--color-warning-border);
    --goal-danger-color:        var(--color-danger);
    --goal-danger-bg:           var(--color-danger-bg);
    --goal-danger-border:       var(--color-danger-border);
    --goal-success-color:       var(--color-success-bright);
    --goal-success-bg:          var(--color-success-bg);
    --goal-success-border:      var(--color-success-border);

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast:       all 0.2s ease;
    --transition-normal:     all 0.3s ease;
    --transition-smooth:     all 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    /* Timing-only (pour transition: <prop> var(--duration-*) var(--easing-*)) */
    --duration-fast:         0.2s;
    --duration-normal:       0.3s;
    --duration-smooth:       0.35s;
    --easing-default:        ease;
    --easing-smooth:         cubic-bezier(0.22, 1, 0.36, 1);

    /* ── Sidebar ──────────────────────────────────────────── */
    --sidebar-width:         250px;
    --sidebar-collapsed:     60px;

    /* ── Breakpoints (référence) ──────────────────────────── */
    /* mobile:      480px   */
    /* tablet:      768px   */
    /* desktop-sm:  992px   */
    /* desktop:     1200px  */
    /* desktop-lg:  1400px  */
}