/* ============================================================
   TOKENS — source unique pour couleurs, tailles, typos, etc.
   Aucune valeur hardcodée ailleurs dans le CSS ou le JS.
   ============================================================ */

:root {
  /* Typographie */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md:   1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.375rem;  /* 22 */
  --fs-2xl:  1.75rem;   /* 28 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-hero: 3rem;      /* 48 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --lh-tight: 1.15;
  --lh-body:  1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* Espacement (base 4px) */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Rayons */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Transitions */
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;
  --ease:       cubic-bezier(.2, .7, .2, 1);

  /* Layout */
  --container-max: 1280px;
  --header-height: 56px;

  /* =======================================================
     LIGHT THEME (défaut)
     Palette : neutres chauds + accent teal discret.
     ======================================================= */
  --bg:              #FAFAF7;
  --bg-elev:         #FFFFFF;
  --surface:         #FFFFFF;
  --surface-muted:   #F3F3F0;
  --surface-sunken:  #EDEDE9;

  --border:          #E5E5E0;
  --border-strong:   #D1D1CB;

  --text:            #0B0B0C;
  --text-muted:      #5F5F64;
  --text-subtle:     #8A8A90;

  --accent:          #0F766E;
  --accent-soft:     #CCFBF1;
  --accent-hover:    #0D665F;

  --success:         #15803D;
  --success-soft:    #DCFCE7;
  --warning:         #B45309;
  --warning-soft:    #FEF3C7;
  --danger:          #B91C1C;
  --danger-soft:     #FEE2E2;
  --neutral-soft:    #E5E5E0;

  /* Séries graphique (pédagogie : 1 couleur = 1 notion) */
  --series-net:     var(--accent);       /* nettes */
  --series-incid:   var(--warning);      /* incidents */
  --series-never:   #94A3B8;             /* jamais activé */
  --series-resil:   var(--danger);       /* résilié */
  --series-brut:    #0B0B0C;             /* brutes (trait noir) */

  --grid-line:       rgba(11, 11, 12, 0.06);
  --grid-axis:       rgba(11, 11, 12, 0.45);

  --shadow-sm: 0 1px 2px rgba(11, 11, 12, 0.04);
  --shadow-md: 0 2px 6px rgba(11, 11, 12, 0.06), 0 1px 2px rgba(11, 11, 12, 0.04);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* =======================================================
   DARK THEME
   Charbon très doux, accent teal lumineux.
   ======================================================= */
[data-theme="dark"] {
  --bg:              #0B0B0C;
  --bg-elev:         #131316;
  --surface:         #131316;
  --surface-muted:   #1A1A1E;
  --surface-sunken:  #0F0F12;

  --border:          #24242A;
  --border-strong:   #34343B;

  --text:            #F7F7F4;
  --text-muted:      #A0A0A6;
  --text-subtle:     #6B6B72;

  --accent:          #2DD4BF;
  --accent-soft:     #0F3A37;
  --accent-hover:    #5EEAD4;

  --success:         #22C55E;
  --success-soft:    #0F2E1B;
  --warning:         #F59E0B;
  --warning-soft:    #2F2207;
  --danger:          #EF4444;
  --danger-soft:     #2A0F0F;
  --neutral-soft:    #24242A;

  --series-net:     var(--accent);
  --series-incid:   var(--warning);
  --series-never:   #64748B;
  --series-resil:   var(--danger);
  --series-brut:    #F7F7F4;

  --grid-line:       rgba(247, 247, 244, 0.06);
  --grid-axis:       rgba(247, 247, 244, 0.4);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}