/* ============================================================
   TOKENS.CSS — Diill Design System v5 · Split Band
   Light mode permanent — pas de [data-theme="dark"]
   Zones dark (hero, sheets, gate) via variables --sp-* locales
   ============================================================ */

:root {

  /* ── Couleur brand ── */
  --color-brand:          #00c896;
  --color-brand-dark:     #0f6e56;
  --color-brand-darker:   #085041;
  --color-brand-dim:      rgba(0,200,150,.12);
  --color-brand-glow:     rgba(0,200,150,.08);

  /* ── Sémantique ── */
  --color-success:        #00c896;
  --color-success-dim:    rgba(0,200,150,.12);
  --color-info:           #4d9eff;
  --color-info-dim:       rgba(77,158,255,.12);
  --color-warning:        #f5a623;
  --color-warning-dim:    rgba(245,166,35,.12);
  --color-danger:         #ff5c5c;
  --color-danger-dim:     rgba(255,92,92,.12);
  --color-purple:         #a78bfa;
  --color-purple-dim:     rgba(167,139,250,.12);

  /* ── Tons foncés sémantiques (texte sur fond dim) ── */
  --color-info-dark:      #0c447c;   /* texte sur color-info-dim */
  --color-warning-dark:   #854f0b;   /* texte sur color-warning-dim */
  --color-danger-dark:    #a32d2d;   /* texte sur color-danger-dim */

  /* ── Scores ── */
  --score-a-bg:    #ecfdf5; --score-a-text: #065f46; --score-a-fill: #00c896;
  --score-b-bg:    #f0fdf4; --score-b-text: #166534; --score-b-fill: #22c55e;
  --score-c-bg:    #fffbeb; --score-c-text: #92400e; --score-c-fill: #f5a623;
  --score-d-bg:    #fff7ed; --score-d-text: #9a3412; --score-d-fill: #f97316;
  --score-f-bg:    #fef2f2; --score-f-text: #991b1b; --score-f-fill: #ff5c5c;

  /* ── Neutres texte ── */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6b7280;
  --color-text-faint:     #9ca3af;
  --color-text-on-brand:  #ffffff;

  /* ── Surfaces light ── */
  --color-bg-page:        #f4f6f8;
  --color-bg-card:        #ffffff;
  --color-bg-elevated:    #ffffff;
  --color-bg-sunken:      #f9fafb;
  --color-bg-overlay:     rgba(0,0,0,.5);

  /* ── Bordures light ── */
  --color-border-faint:   rgba(0,0,0,.06);
  --color-border-default: rgba(0,0,0,.10);
  --color-border-strong:  rgba(0,0,0,.18);

  /* ── Nav (toujours light) ── */
  --color-nav-bg:         #ffffff;
  --color-nav-active:     #0f6e56;
  --color-nav-inactive:   #9ca3af;

  /* ── Input (light dans l'onglet Ajouter) ── */
  --color-input-bg:       #ffffff;
  --color-input-border:   rgba(0,0,0,.12);
  --color-input-focus:    #0f6e56;

  /* ── Stat card ── */
  --color-stat-bg:        #f3f4f6;

  /* ── Auth ── */
  --color-auth-bg:        #f4f6f8;
  --color-auth-card:      #ffffff;

  /* ── Camembert ── */
  --color-chart-center:   #f4f6f8;

  /* ── Couleurs camembert ── */
  --chart-1: #00c896; --chart-2: #4d9eff; --chart-3: #f5a623;
  --chart-4: #a78bfa; --chart-5: #ff5c5c; --chart-6: #0f6e56;
  --chart-7: #185fa5; --chart-8: #854f0b;

  /* ============================================================
     PALETTE SPLIT-BAND — zones dark (hero, sheets, gate)
     Préfixe --sp-* pour différencier des tokens système
     ============================================================ */
  --sp-dark:          #111827;   /* fond bande hero + sheets + gate */
  --sp-dark-raised:   #1a2035;   /* surface légèrement soulevée */
  --sp-dark-border:   rgba(255,255,255,.09);
  --sp-dark-border-f: rgba(255,255,255,.05);
  --sp-text-1:        #f0f2f7;   /* texte primaire sur fond dark */
  --sp-text-2:        #8b90a8;   /* texte secondaire sur fond dark */
  --sp-text-3:        rgba(255,255,255,.2); /* placeholder sur fond dark */
  --sp-input-bg:      rgba(255,255,255,.06);
  --sp-input-border:  rgba(255,255,255,.09);
  --sp-btn-ghost-bg:  rgba(255,255,255,.06);
  --sp-btn-ghost-hover: rgba(255,255,255,.1);

  /* ── Sheet (dark dans V3) ── */
  --color-sheet-bg:     var(--sp-dark);
  --color-sheet-handle: rgba(255,255,255,.15);

  /* ============================================================
     TYPOGRAPHIE
     ============================================================ */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', 'Roboto Mono', ui-monospace, monospace;

  --text-xs:   .68rem;
  --text-sm:   .8rem;
  --text-base: .933rem;
  --text-md:   1rem;
  --text-lg:   1.133rem;
  --text-xl:   1.333rem;
  --text-2xl:  1.6rem;
  --text-3xl:  2rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     ESPACEMENTS (scale 4px)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast: all .12s ease;
  --transition-base: all .18s ease;
  --transition-slow: all .3s ease;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.1);
  --shadow-sheet: 0 -12px 48px rgba(0,0,0,.4);

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-nav:   100;
  --z-sheet: 200;
  --z-gate:  300;
  --z-toast: 400;
}