/* Jetons de couleur et d'espacement. Toutes les couleurs de l'interface passent par ces variables.
   light-dark() choisit la valeur selon color-scheme, lui-même piloté par data-theme sur <html>.
   Les variables --accent* sont calculées en JavaScript (js/theme.js) à partir de la couleur choisie. */

:root {
  color-scheme: light dark;

  --accent: #3b5bdb;
  --on-accent: #ffffff;
  --accent-text-on-light: #3b5bdb;
  --accent-text-on-dark: #91a7ff;
  --accent-text: light-dark(var(--accent-text-on-light), var(--accent-text-on-dark));

  --bg: light-dark(#f6f7f9, #121417);
  --surface: light-dark(#ffffff, #1b1e23);
  --surface-2: light-dark(#eef0f3, #262a32);
  --border: light-dark(#d5d9e0, #3a404b);
  --border-strong: light-dark(#8a929e, #6b7380);
  --text: light-dark(#1b1f24, #e8eaed);
  --text-muted: light-dark(#545c67, #a9b0bb);

  --danger: light-dark(#b42318, #ff8f85);
  --danger-bg: light-dark(#fdecea, #3a1d1b);
  --on-danger: light-dark(#ffffff, #1b0b0a);
  --danger-fill: light-dark(#b42318, #ff8f85);
  --success: light-dark(#1e6f36, #7ad99a);
  --success-bg: light-dark(#e7f6ec, #17311f);
  --warning: light-dark(#7a4f00, #ffcf70);
  --warning-bg: light-dark(#fff4d6, #3a2c0c);

  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 16px rgb(0 0 0 / 0.08);
  --shadow-strong: 0 8px 32px rgb(0 0 0 / 0.25);
  --backdrop: rgb(0 0 0 / 0.45);

  --radius: 10px;
  --radius-small: 6px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --text-small: 0.875rem;
  --text-base: 1rem;
  --text-large: 1.25rem;
  --text-title: 1.75rem;

  --sidebar-width: 15rem;
  --sidebar-collapsed-width: 4rem;
  --topbar-height: 3.5rem;
  --duration: 160ms;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}