/* ============================================================
   TOKENS.CSS — Diill Design System v5
   Source of truth pour toutes les variables CSS
   Light mode par défaut · Dark mode via [data-theme="dark"]
   ============================================================ */

/* ============================================================
   LIGHT MODE (défaut)
   ============================================================ */
: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);

  /* ── 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 ── */
  --color-text-primary:   #111827;
  --color-text-secondary: #374151;
  --color-text-muted:     #6b7280;
  --color-text-faint:     #9ca3af;
  --color-text-on-brand:  #ffffff;

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

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

  /* ── Header ── */
  --color-header-bg:      #111827;
  --color-header-text:    #ffffff;

  /* ── Nav ── */
  --color-nav-bg:         #ffffff;
  --color-nav-active:     var(--color-brand-dark);
  --color-nav-inactive:   #9ca3af;

  /* ── Input ── */
  --color-input-bg:       #ffffff;
  --color-input-border:   rgba(0,0,0,.12);
  --color-input-focus:    var(--color-brand-dark);

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

  /* ── Sheet ── */
  --color-sheet-bg:       #ffffff;
  --color-sheet-handle:   #e5e7eb;

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

  /* ── Camembert ── */
  --color-chart-center:   #0d0f14;

  /* ── 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;

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

  --text-xs:   .68rem;   /* 10px @ base 15 */
  --text-sm:   .8rem;    /* 12px */
  --text-base: .933rem;  /* 14px */
  --text-md:   1rem;     /* 15px */
  --text-lg:   1.133rem; /* 17px */
  --text-xl:   1.333rem; /* 20px */
  --text-2xl:  1.6rem;   /* 24px */
  --text-3xl:  2rem;     /* 30px */

  --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 (light)
     ============================================================ */
  --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 -4px 32px rgba(0,0,0,.08);

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

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  /* ── Brand identique ── */
  --color-brand:          #00c896;
  --color-brand-dark:     #00c896;
  --color-brand-darker:   #00a87e;
  --color-brand-dim:      rgba(0,200,150,.12);
  --color-brand-glow:     rgba(0,200,150,.07);

  /* ── Scores dark ── */
  --score-a-bg:    rgba(0,200,150,.12);   --score-a-text: #00c896; --score-a-fill: #00c896;
  --score-b-bg:    rgba(77,158,255,.12);  --score-b-text: #4d9eff; --score-b-fill: #4d9eff;
  --score-c-bg:    rgba(245,166,35,.12);  --score-c-text: #f5a623; --score-c-fill: #f5a623;
  --score-d-bg:    rgba(249,115,22,.12);  --score-d-text: #fb923c; --score-d-fill: #fb923c;
  --score-f-bg:    rgba(255,92,92,.12);   --score-f-text: #ff5c5c; --score-f-fill: #ff5c5c;

  /* ── Texte ── */
  --color-text-primary:   #f0f2f7;
  --color-text-secondary: #9098b8;
  --color-text-muted:     #5a6080;
  --color-text-faint:     #3d4260;
  --color-text-on-brand:  #0d0f14;

  /* ── Surfaces ── */
  --color-bg-page:        #0e1024;
  --color-bg-card:        #1a1e38;
  --color-bg-elevated:    #1e2244;
  --color-bg-sunken:      #13162e;
  --color-bg-overlay:     rgba(0,0,0,.65);

  /* ── Bordures ── */
  --color-border-faint:   rgba(255,255,255,.05);
  --color-border-default: rgba(255,255,255,.09);
  --color-border-strong:  rgba(255,255,255,.15);

  /* ── Header ── */
  --color-header-bg:      #0a0c1a;
  --color-header-text:    #f0f2f7;

  /* ── Nav ── */
  --color-nav-bg:         #13162e;
  --color-nav-active:     #00c896;
  --color-nav-inactive:   #5a6080;

  /* ── Input ── */
  --color-input-bg:       #1a1e38;
  --color-input-border:   rgba(255,255,255,.1);
  --color-input-focus:    #00c896;

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

  /* ── Sheet ── */
  --color-sheet-bg:       #1a1e38;
  --color-sheet-handle:   rgba(255,255,255,.12);

  /* ── Auth ── */
  --color-auth-bg:        #0e1024;
  --color-auth-card:      #1a1e38;

  /* ── Camembert ── */
  --color-chart-center:   #0e1024;

  /* ── Shadows dark ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5);
  --shadow-sheet: 0 -4px 32px rgba(0,0,0,.5);

  /* Sémantique identique, contraste ok sur fond dark */
  --color-success-dim:    rgba(0,200,150,.12);
  --color-info-dim:       rgba(77,158,255,.12);
  --color-warning-dim:    rgba(245,166,35,.12);
  --color-danger-dim:     rgba(255,92,92,.12);
  --color-purple-dim:     rgba(167,139,250,.12);
}