/* ============================================================
   THÈME « Ocean » — Couche 2 (thème alternatif)
   Thème clair aux accents bleu-océan / sarcelle.
   Montre la capacité de theming — même composants, autre peau.
   ============================================================ */

[data-theme="ocean"] {

    /* ── Polices ──────────────────────────────────────────── */
    --font-body:             'Inter', 'Segoe UI', sans-serif;
    --font-display:          'Poppins', sans-serif;
    --font-heading:          'Inter', sans-serif;
    --font-mono:             'Courier New', monospace;
    --font-brand:            'Poppins', sans-serif;

    /* ── Tailles de base ──────────────────────────────────── */
    --text-base-size:        16px;

    --base-color-for-glow: 14, 165, 233;
    --base-color-for-secondary-glow: 20, 184, 166;

    /* ── Couleurs principales (brand) ─────────────────────── */
    --color-primary:         #0ea5e9;
    --color-primary-dark:    #0284c7;
    --color-primary-darker:  #0369a1;
    --color-primary-light:   #38bdf8;
    --color-primary-lighter: #7dd3fc;
    --color-primary-pale:    #bae6fd;
    --color-primary-glow:    rgba(14, 165, 233, 0.3);

    --color-secondary:       #14b8a6;
    --color-secondary-dark:  #0d9488;
    --color-secondary-light: #2dd4bf;
    --color-secondary-pale:  #99f6e4;

    --color-accent:          #8b5cf6;
    --color-accent-light:    #a78bfa;
    --color-accent-pale:     #c4b5fd;

    --color-teal:            #14b8a6;
    --color-cyan:            #06b6d4;

    /* ── Couleurs sémantiques ─────────────────────────────── */
    --color-success:         #10b981;
    --color-success-bright:  #22c55e;
    --color-success-light:   #34d399;
    --color-success-pale:    #86efac;
    --color-success-dark:    #047857;
    --color-success-bg:      rgba(16, 185, 129, 0.12);
    --color-success-border:  rgba(16, 185, 129, 0.3);

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

    --color-warning:         #f59e0b;
    --color-warning-light:   #fbbf24;
    --color-warning-icon:    #fcd34d;
    --color-warning-pale:    #fde68a;
    --color-warning-yellow:  #eab308;
    --color-warning-gold:    #f59e0b;
    --color-warning-bg:      rgba(245, 158, 11, 0.1);
    --color-warning-border:  rgba(245, 158, 11, 0.3);

    --color-success-bg-light:     rgba(16, 185, 129, 0.05);
    --color-success-border-light: rgba(16, 185, 129, 0.15);
    --color-danger-bg-light:      rgba(239, 68, 68, 0.05);
    --color-danger-border-light:  rgba(239, 68, 68, 0.15);
    --color-warning-bg-light:     rgba(245, 158, 11, 0.05);
    --color-warning-border-light: rgba(245, 158, 11, 0.15);

    --color-info:            #0ea5e9;
    --color-info-light:      #38bdf8;
    --color-info-pale:       #7dd3fc;
    --color-info-bg:         rgba(14, 165, 233, 0.1);
    --color-info-border:     rgba(14, 165, 233, 0.25);

    /* ── Arrière-plans ────────────────────────────────────── */
    --bg-body:               #f0f4f8;
    --bg-body-alt:           #e8edf2;
    --bg-body-deep:          #dae2eb;
    --bg-card:               #ffffff;
    --bg-card-dark:          #f8fafc;
    --bg-card-darker:        #f1f5f9;
    --bg-card-gradient-start:#ffffff;
    --bg-card-gradient-end:  #f8fafc;
    --bg-input:              #f1f5f9;
    --bg-input-alt:          #e2e8f0;
    --bg-panel:              #ffffff;
    --bg-panel-dark:         #f8fafc;
    --bg-nav-hover:          rgba(14, 165, 233, 0.08);
    --bg-nav-active:         rgba(14, 165, 233, 0.12);
    --bg-table-row:          #f8fafc;

    /* Surfaces semi-transparentes */
    --bg-glass:              rgba(255, 255, 255, 0.9);
    --bg-glass-heavy:        rgba(255, 255, 255, 0.96);
    --bg-glass-light:        rgba(255, 255, 255, 0.85);
    --bg-overlay:            rgba(15, 23, 42, 0.5);
    --bg-overlay-light:      rgba(15, 23, 42, 0.25);
    --bg-subtle-faint:       rgba(0, 0, 0, 0.01);
    --bg-subtle:             rgba(0, 0, 0, 0.02);
    --bg-subtle-hover:       rgba(0, 0, 0, 0.04);
    --bg-subtle-active:      rgba(0, 0, 0, 0.06);
    --bg-subtle-strong:      rgba(0, 0, 0, 0.08);
    --bg-subtle-extra:       rgba(0, 0, 0, 0.1);

    /* ── Texte ────────────────────────────────────────────── */
    --text-primary:          #0f172a;
    --text-secondary:        #475569;
    --text-muted:            #64748b;
    --text-dim:              rgba(15, 23, 42, 0.6);
    --text-very-dim:         rgba(15, 23, 42, 0.4);
    --text-hint:             rgba(15, 23, 42, 0.3);
    --text-bright:           rgba(15, 23, 42, 0.9);
    --text-mid:              rgba(15, 23, 42, 0.75);
    --text-faded:            rgba(15, 23, 42, 0.5);
    --text-soft:             #64748b;
    --text-soft-light:       #94a3b8;
    --text-lavender:         #475569;
    --text-slate:            #64748b;
    --text-slate-light:      #94a3b8;
    --text-cool:             #475569;
    --text-cool-light:       #94a3b8;
    --text-on-primary:       #ffffff;

    /* ── Bordures ─────────────────────────────────────────── */
    --border-subtle:         rgba(0, 0, 0, 0.06);
    --border-light:          rgba(0, 0, 0, 0.1);
    --border-medium:         rgba(0, 0, 0, 0.15);
    --border-strong:         rgba(0, 0, 0, 0.2);
    --border-card:           #e2e8f0;
    --border-card-inner:     #e2e8f0;
    --border-input:          #cbd5e1;
    --border-muted:          #e2e8f0;
    --border-danger:         rgba(239, 68, 68, 0.25);

    /* ── 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 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:             0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:             0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
    --shadow-xl:             0 20px 25px rgba(0, 0, 0, 0.08), 0 8px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl:            0 25px 50px rgba(0, 0, 0, 0.12);
    --shadow-primary:        0 4px 14px rgba(14, 165, 233, 0.2);
    --shadow-primary-strong: 0 0 20px rgba(14, 165, 233, 0.25);
    --shadow-success:        0 4px 14px rgba(16, 185, 129, 0.2);
    --shadow-danger:         0 0 15px rgba(239, 68, 68, 0.2);

    /* ── Dégradés ─────────────────────────────────────────── */
    --gradient-primary:      linear-gradient(135deg, #0ea5e9, #14b8a6);
    --gradient-accent-blue:  linear-gradient(90deg, #0ea5e9, #0284c7);
    --gradient-accent:       linear-gradient(135deg, #0ea5e9, #0369a1);
    --gradient-accent-hover: linear-gradient(135deg, #0284c7, #0369a1);
    --gradient-accent-dark:  linear-gradient(90deg, #0284c7, #0369a1);
    --gradient-accent-teal:  linear-gradient(90deg, #0ea5e9, #14b8a6);
    --gradient-accent-tri:   linear-gradient(90deg, #0284c7, #0ea5e9, #14b8a6);
    --gradient-danger:       linear-gradient(90deg, #ef4444, #dc2626);
    --gradient-success:      linear-gradient(135deg, #10b981, #14b8a6);
    --gradient-info:         linear-gradient(135deg, #06b6d4, #0ea5e9);
    --gradient-teal-accent:  linear-gradient(135deg, #38bdf8, #0ea5e9);
    --gradient-card:         linear-gradient(145deg, #ffffff, #f8fafc);
    --gradient-card-hover:   linear-gradient(145deg, #f8fafc, #f1f5f9);
    --gradient-card-subtle:  linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.02));
    --gradient-disabled:     linear-gradient(135deg, #cbd5e1, #94a3b8);
    --gradient-calendar-low:    linear-gradient(145deg, #dbeafe, #bfdbfe);
    --gradient-calendar-medium: linear-gradient(145deg, #93c5fd, #60a5fa);
    --gradient-calendar-high:   linear-gradient(145deg, #5eead4, #2dd4bf);

    /* ── Couleurs graphiques (Chart.js) ──────────────────── */
    --chart-line-1:          #0ea5e9;
    --chart-line-2:          #14b8a6;
    --chart-line-3:          #f43f5e;
    --chart-bar-1:           #0ea5e9;
    --chart-bar-2:           #8b5cf6;
    --chart-bar-3:           #f59e0b;
    --chart-bar-current:     #0ea5e9;
    --chart-bar-previous:    rgba(14,165,233,0.35);
    --chart-spent:           #e11d48;
    --chart-spent-fill:      rgba(225,29,72,0.08);
    --chart-spent-bar:       rgba(225,29,72,0.6);
    --chart-spent-bar-hover: rgba(225,29,72,0.8);
    --chart-alloc:           #8b5cf6;
    --chart-alloc-bar:       rgba(139,92,246,0.35);
    --chart-alloc-bar-hover: rgba(139,92,246,0.55);
    --chart-tax-due:         rgba(225, 29, 72, 1);
    --chart-tax-smooth:      rgba(14, 165, 233, 1);
    --chart-tax-provision:   rgba(139, 92, 246, 1);
    --chart-forecast-1:      rgba(14, 165, 233, 1);
    --chart-forecast-2:      rgba(244, 63, 94, 1);
    --chart-forecast-3:      rgba(20, 184, 166, 1);
    --chart-forecast-4:      rgba(245, 158, 11, 1);
    --chart-forecast-5:      rgba(139, 92, 246, 1);
    --chart-forecast-1-bg:   rgba(14, 165, 233, 0.2);
    --chart-forecast-2-bg:   rgba(244, 63, 94, 0.2);
    --chart-forecast-3-bg:   rgba(20, 184, 166, 0.2);
    --chart-forecast-4-bg:   rgba(245, 158, 11, 0.2);
    --chart-forecast-5-bg:   rgba(139, 92, 246, 0.2);
    --chart-text:            #334155;
    --chart-text-muted:      #64748b;
    --chart-text-dim:        #94a3b8;
    --chart-grid:            rgba(0,0,0,0.06);
    --chart-grid-strong:     rgba(0,0,0,0.12);
    --chart-tooltip-bg:      rgba(15,23,42,0.9);
    --chart-tooltip-text:    #f8fafc;
    --chart-tooltip-border:  rgba(0,0,0,0.2);
    --chart-center-label:    #64748b;
    --chart-center-value:    #1e293b;
    --chart-datalabel:       #ffffff;
    --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.25);
    --goal-permanent-color:     var(--color-accent-light);
    --goal-permanent-bg:        rgba(139, 92, 246, 0.1);
    --goal-permanent-border:    rgba(139, 92, 246, 0.25);
    --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;
}