/* ═══════════════════════════════════════════════════════════════
   VISION FINANCE — Design tokens (light + dark + aliases legacy)
   Extracted from templates/base.html — VIS-257 (F17 P1a)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens light ── */
:root {
    --bg:          #F4F5F7;
    --surface:     #FFFFFF;
    --surface2:    #F0F1F4;
    --surface3:    #E8EAF0;
    --border:      #E2E4E9;
    --border2:     #D1D5DB;
    --surface-raised: var(--surface2);
    --border-strong:  var(--border2);

    --sb-bg:       #0C0F14;
    --sb-bg2:      #161B24;
    --sb-border:   rgba(255,255,255,0.06);
    --sb-text:     #8B95A8;
    --sb-text-hover: #C8CDD8;
    --sb-active-bg: rgba(0,184,122,0.10);
    --sb-active-border: #00B87A;

    --accent:      #00B87A;
    --accent-hover:#00A36D;
    --accent-bg:   rgba(0,184,122,0.08);
    --accent-txt:  #007A52;
    --danger:      #EF4444;
    --danger-bg:   rgba(239,68,68,0.08);
    --danger-txt:  #C22222;
    --warning:     #F59E0B;
    --warning-bg:  rgba(245,158,11,0.08);
    --warning-txt: #D97706;
    --info:        #3B82F6;
    --info-bg:     rgba(59,130,246,0.08);
    --info-txt:    #2563EB;

    --neutral:     #94A3B8;
    --neutral-bg:  rgba(148,163,184,0.08);
    --neutral-txt: #64748B;

    --gold:        #D4A843;
    --gold-bg:     rgba(212,168,67,0.08);
    --gold-txt:    #B8902E;

    --purple:      #8B5CF6;
    --purple-bg:   rgba(139,92,246,0.10);
    --purple-txt:  #7C3AED;

    --danger-light:#F87171;
    --cyan:        #06B6D4;
    --cyan-txt:    #22D3EE;
    --cyan-bg:     rgba(6,182,212,0.10);

    /* F12 PR10 (VIS-207) — WCAG AA :
       --t2 #6B7485 → #4B5563 (Tailwind gray-600, ratio ~7.4:1 sur #FFFFFF)
       --t3 #9CA3B0 → #6B7280 (Tailwind gray-500, ratio ~4.6:1 sur #FFFFFF) */
    --t1: #0C0F14;
    --t2: #4B5563;
    --t3: #6B7280;
    --t4: #BFC4CE;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
    --shadow:    0 4px 12px rgba(0,0,0,.10);
    --shadow-md: 0 4px 12px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.14);

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;

    --font-2xs: 10px;
    --font-xs:  11px;
    --font-sm:  12px;
    --font-base:13px;
    --font-md:  14px;
    --font-lg:  16px;
    --font-xl:  20px;
    --font-2xl: 24px;
    --font-3xl: 32px;

    --sb-width-closed: 52px;
    --sb-width-open:   210px;
    --topbar-h:        42px;
    --transition:      0.22s cubic-bezier(.4,0,.2,1);
    --transition-fast: 0.15s ease;

    /* ── Aliases legacy ───────────────────────────────────────────────────────
       Plusieurs templates historiques utilisent des noms de variables qui ne
       correspondent pas aux tokens canoniques de ce fichier (--t1/--t2/--t3,
       --bg/--surface/--accent, etc.). Pour éviter de toucher 30 templates et
       600+ occurrences, on déclare ici des aliases qui pointent vers les
       tokens réels. À terme, les templates devront migrer aux noms canoniques.
       ────────────────────────────────────────────────────────────────────── */
    --success-green:    var(--accent);
    --danger-red:       var(--danger);
    --warning-orange:   var(--warning);
    --primary-blue:     var(--info);
    --text-primary:     var(--t1);
    --text-secondary:   var(--t2);
    --text-muted:       var(--t3);
    --dark-bg:          var(--bg);
    --dark-card:        var(--surface);
    --dark-elevated:    var(--surface-raised);
    --dark-hover:       var(--surface-raised);
    --border-primary:   var(--border);
    --border-secondary: var(--border-strong);
    --transition-normal: var(--transition);
    --gradient-primary: linear-gradient(135deg, var(--info), var(--accent));
    --gradient-success: linear-gradient(135deg, var(--accent), var(--accent-hover));
    --gradient-danger:  linear-gradient(135deg, var(--danger), var(--danger-light));
}

/* ── Tokens dark ── */
[data-theme="dark"] {
    --bg:          #080A0E;
    --surface:     #0D1117;
    --surface2:    #141B26;
    --surface3:    #1E2535;
    --border:      #1E2535;
    --border2:     #2A3348;
    --surface-raised: #141B26;
    --border-strong:  #252E3D;

    --accent-bg:   rgba(0,184,122,0.08);
    --accent-txt:  #00D68F;
    --danger-bg:   rgba(239,68,68,0.08);
    --warning-bg:  rgba(245,158,11,0.08);
    --info-bg:     rgba(59,130,246,0.08);

    --gold-txt:    #D4A843;
    --neutral-txt: #8B95A8;

    --t1: #F0F2F5;
    --t2: #8B95A8;
    --t3: #7A8499;
    --t4: #262D3D;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.22);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.32);
    --shadow:    0 4px 12px rgba(0,0,0,.42);
    --shadow-md: 0 4px 12px rgba(0,0,0,.42);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.58);
}