/* ================================
   TOKENS (core.css uniquement)
   ================================ */
:root {
  /* Brand */
  --primary: #0d6efd;
  --primary-600: #0b5ed7;
  --secondary: #6c757d;
  --secondary-600: #5a5f63;

  /* Feedback */
  --success: #198754;
  --warning: #f59f00;
  --danger:  #dc3545;
  --info:    #0dcaf0;
  --white:   #ffffff;
  /* =====================
     Typographie (tokens)
     ===================== */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono",
               "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono",
               Consolas, "Liberation Mono", monospace;

  --font-size-base: 16px;
  --line-height-base: 1.5;
  --heading-weight: 700;
  --text-weight:    400;

  /* =====================
     Surfaces & texte (LIGHT)
     ===================== */
  --text:            #111827;
  --text-muted:      #6b7280;
  --bg-page:         #ffffff;
  --surface-1:       #ffffff;   /* cartes/panneaux */
  --surface-2:       #f8fafc;   /* hover léger / élevé */
  --surface-3:       #f1f5f9;   /* états marqués */
  --border:          #e5e7eb;
  --shadow:          0 10px 30px rgba(0,0,0,.08);
  /* alias pratiques (déjà couverts par tes tokens, mais en utilitaires) */
  --surface-bg-1: var(--surface-1);
  --surface-bg-2: var(--surface-2);
  --surface-bg-3: var(--surface-3);

  /* Layout */
  --radius: .25rem;
  --z-navbar: 900;
  --z-dropdown: 1000;
  --z-overlay: 950;

  --sidebar-w: 260px;
  --sidebar-w-sm: 70vw;
  --sidebar-w-sm-max: 300px;

  /* Topbar*/
  --topbar-h: 56px;
  --topbar-bg: #ffffff;
  --topbar-fg: var(--text);
  --topbar-border: rgba(17,24,39,.08);
  --topbar-title-fg: #334155; /* Gris anthracite élégant */
  --tb-gutter:32px;

    /* ombres (clair) */
  --shadow-topbar-strong: 0 6px 18px rgba(0,0,0,.06);
  --shadow-topbar-weak:   0 4px 16px rgba(0,0,0,.06);

  /* dropdowns (clair) */
  --dd-bg: #ffffff;
  --dd-fg: #111827;

  /* Sidebar (LIGHT) */
  --menu-bg:        #f5f7fb;
  --menu-fg:        #1f2937;
  --menu-fg-muted:  #6b7280;
  --menu-border:    rgba(17,24,39,.06);
  --menu-hover-bg:  rgba(13,110,253,.08);
  --menu-hover-fg:  #0d6efd;
  --menu-active-bg: rgba(13,110,253,.15);
  --menu-active-bar: var(--primary);
  --menu-focus-shadow: rgba(13,110,253,.25);
  --logo-color:     #111827;
  --light: #f8f9fa;  /* si tu tiens à badge-light */
  --dark:  #111827;  /* si tu tiens à badge-dark */
  
  /* Compat ascendante */
  --content-page: var(--bg-page);
  --panel:        var(--surface-1);
  
  --muted: var(--text-muted);
}

/* ================================
   OVERRIDES DARK
   ================================ */
:root[data-theme="dark"],
.dark {
  --text:           #e6ebf0;
  --text-muted:     #cbd5e1;
  --bg-page:        #111827;
  --surface-1:      #1a2438;
  --surface-2:      #202b41;
  --surface-3:      #0f172a;
  --border:         rgba(255,255,255,.10);

  /* Topbar (DARK) */
  --topbar-bg:      linear-gradient(180deg,#182235 0%,#141c2e 100%);
  --topbar-fg:      #e6ebf0;
  --topbar-border:  rgba(255,255,255,.08);
  --topbar-title-fg: #e0e7ff; /* Indigo clair lisible */
  
  /* ombres (sombre) – un peu plus diffuses */
  --shadow-topbar-strong: 0 10px 28px rgba(0,0,0,.38);
  --shadow-topbar-weak:   0  8px 22px rgba(0,0,0,.32);

  /* dropdowns (sombre) */
  --dd-bg: var(--surface-2);
  --dd-fg: var(--text);

  /* Sidebar (DARK) */
  --menu-bg:        #141c2e;
  --menu-fg:        rgba(241,245,249,.92);
  --menu-fg-muted:  rgba(203,213,225,.55);
  --menu-border:    rgba(255,255,255,.06);
  --menu-hover-bg:  rgba(129,140,248,.16);
  --menu-hover-fg:  #c7d2fe;
  --menu-active-bg: rgba(99,102,241,.22);
  --menu-active-bar:#818cf8;
  --logo-color:     #f8fafc;

  --menu-scroll-thumb: rgba(255,255,255,.18);
  --menu-scroll-thumb-hover: rgba(255,255,255,.28);
  --menu-logo-gradient: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%);
  /* Compat ascendante */
  --content-page:   var(--bg-page);
}

/* ======================================================
   TOKENS — extensions design system (core.css)
   Ajoute : échelles (radius/space/shadow), focus, motion,
   breakpoints, z-index détaillé, scrollbars & helpers a11y
   ====================================================== */

/* ---------- TYPO SCALE (optionnelle) ---------- */
/* Garde tes bases, ajoute des steps si besoin de modularité */
:root {
  --font-size-xs:  .75rem;   /* 12px */
  --font-size-sm:  .875rem;  /* 14px */
  --font-size-md:  1rem;     /* 16px – alias de base */
  --font-size-lg:  1.125rem; /* 18px */
  --font-size-xl:  1.25rem;  /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
}

/* ---------- SPACING SCALE ---------- */
:root {
  --space-0: 0;
  --space-1: .25rem;  /* 4px  */
  --space-2: .5rem;   /* 8px  */
  --space-3: .75rem;  /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem;   /* 48px */
}

/* ---------- RADIUS SCALE (unifie arrondis) ---------- */
:root {
  --radius-sm: .25rem;
  --radius:    .5rem;   /* valeur par défaut pour cards/inputs */
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --radius-full: 999px;
}

/* ---------- SHADOW / ELEVATION ---------- */
:root {
  --shadow-sm: 0 4px 14px rgba(0,0,0,.06);
  --shadow:    0 10px 30px rgba(0,0,0,.08);  /* ta valeur actuelle */
  --shadow-lg: 0 18px 48px rgba(0,0,0,.10);
}

/* ---------- FOCUS TOKENS ---------- */
:root {
  --focus-color: #c7d2fe;                 /* Indigo 200 approx */
  --focus-ring: 0 0 0 3px rgba(99,102,241,.15);
  --focus-ring-strong: 0 0 0 3px rgba(99,102,241,.28);
}

/* ---------- Z-INDEX SCALE (granulaire) ---------- */
/* Tu as navbar/dropdown/overlay – on complète le haut du stack */
:root {
  --z-navbar:   900;
  --z-overlay:  950;
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-toast:    1200;
  --z-modal:    1300;
  --z-popover:  1400;
  --z-tooltip:  1500;
}

/* ---------- BREAKPOINTS / CONTAINERS ---------- */
:root {
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;

  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1320px;
}

/* ---------- MOTION / EASING ---------- */
:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --ease:     cubic-bezier(.4,0,.2,1);
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .3s;
}

/* ---------- STATES SEMANTIQUES ---------- */
/* Ajoute des alphas utiles pour backgrounds “soft” */
:root {
  --success-weak: color-mix(in srgb, var(--success) 12%, #fff 88%);
  --warning-weak: color-mix(in srgb, var(--warning) 16%, #fff 84%);
  --danger-weak:  color-mix(in srgb, var(--danger)  12%, #fff 88%);
  --info-weak:    color-mix(in srgb, var(--info)    12%, #fff 88%);

  /* Texte sur surfaces colorées (contraste) */
  --on-primary: #fff;
  --on-secondary: #fff;
  --on-success: #fff;
  --on-warning: var(--text);
  --on-danger:  #fff;
  --on-info:    #0f172a; /* ajuste si ton --info fonce */
}

/* ---------- SCROLLBARS (globaux) ---------- */
/* Utilise ces tokens si tu stylises des scrollbars génériques */
:root {
  --scrollbar-track: color-mix(in srgb, var(--text) 2%, transparent);
  --scrollbar-thumb: color-mix(in srgb, var(--text) 18%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--text) 28%, transparent);
}

/* ---------- OVERLAYS / BACKDROPS ---------- */
:root {
  --backdrop: rgba(0,0,0,.45);
  --glass-blur: 4px; /* si tu veux utiliser backdrop-filter */
}

/* ---------- SYSTEM THEME HELPER ---------- */
/* Permet au navigateur d’adapter les contrôles natifs */
:root { color-scheme: light dark; }

/* ======================================================
   DARK OVERRIDES — extensions en cohérence avec ton bloc
   (reprend ta logique et décline les nouveaux tokens)
   ====================================================== */
:root[data-theme="dark"],
.dark {
  /* Shadows un peu plus diffuses */
  --shadow-sm: 0 6px 18px rgba(0,0,0,.28);
  --shadow:    0 10px 28px rgba(0,0,0,.38);
  --shadow-lg: 0 18px 52px rgba(0,0,0,.44);

  /* Focus */
  --focus-ring:        0 0 0 3px rgba(129,140,248,.28);
  --focus-ring-strong: 0 0 0 3px rgba(129,140,248,.45);

  /* States “weak” mélangés au fond sombre */
  --success-weak: color-mix(in srgb, var(--success) 20%, #0f1422 80%);
  --warning-weak: color-mix(in srgb, var(--warning) 24%, #0f1422 76%);
  --danger-weak:  color-mix(in srgb, var(--danger)  20%, #0f1422 80%);
  --info-weak:    color-mix(in srgb, var(--info)    20%, #0f1422 80%);

  /* Scrollbars */
  --scrollbar-track: rgba(255,255,255,.06);
  --scrollbar-thumb: rgba(255,255,255,.18);
  --scrollbar-thumb-hover: rgba(255,255,255,.28);

  /* Backdrop */
  --backdrop: rgba(0,0,0,.55);
}

/* ======================================================
   OPTIONAL HELPERS
   (tu peux les déplacer dans utilities.css)
   ====================================================== */

/* Focus visible générique basé sur tokens */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Scrollbar base (webkit) – utilise les tokens ci-dessus */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scrollbar-track); }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* High-contrast: assure un outline visible si thèmes forcés */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; box-shadow: none !important; }
}

/* Option : thème auto selon préférences OS (si tu veux un mode "system") */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
*/