/*
 * Thème : jetons de couleur sémantiques, clair par défaut, sombre selon le réglage du système
 * ou le bouton de la barre du haut (attribut data-theme sur <html>).
 */
:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f0f2f5;
  --text: #171a21;
  --muted: #5d6573;
  --subtle: #8a92a0;
  --border: #e4e7ec;
  --border-strong: #cdd2da;
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --brand-soft: #eef0ff;
  --brand-text: #3730a3;
  --on-brand: #ffffff;
  --accent: #d97706;
  --accent-soft: #fef3c7;
  --accent-text: #92400e;
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --ok-text: #166534;
  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --danger-text: #b91c1c;
  --violet-soft: #ede9fe;
  --violet-text: #5b21b6;
  --warn-bg: #fffbeb;
  --warn-border: #fcd34d;
  --warn-text: #78350f;
  --sidebar-bg: #1e3a8a;
  --note-bg: #fffdf5;
  --scrollbar: #cdd2da;
  --hero-from: #312e81;
  --hero-to: #4f46e5;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow: 0 1px 3px rgb(16 24 40 / 0.07), 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-lg: 0 16px 40px rgb(16 24 40 / 0.16), 0 2px 6px rgb(16 24 40 / 0.06);
  --radius: 12px;
  --radius-sm: 8px;
  --topbar-h: 56px;
  --focus: 0 0 0 3px rgb(79 70 229 / 0.35);
  --ease: 0.15s ease;
  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #1b1f27;
    --surface-3: #242935;
    --text: #e8eaef;
    --muted: #a3aab7;
    --subtle: #7c8492;
    --border: #2a2f3a;
    --border-strong: #3b4251;
    --brand: #818cf8;
    --brand-hover: #a5b4fc;
    --brand-soft: #262b4d;
    --brand-text: #c7d2fe;
    --on-brand: #0f1115;
    --accent: #f59e0b;
    --accent-soft: #3a2a0c;
    --accent-text: #fcd34d;
    --ok: #4ade80;
    --ok-soft: #12301f;
    --ok-text: #86efac;
    --danger: #f87171;
    --danger-soft: #3b1818;
    --danger-text: #fca5a5;
    --violet-soft: #2c2450;
    --violet-text: #c4b5fd;
    --warn-bg: #2a220f;
    --warn-border: #7a5d1a;
    --warn-text: #fde3a7;
    --sidebar-bg: #172554;
    --note-bg: #1d1c17;
    --scrollbar: #3b4251;
    --hero-from: #1e1b4b;
    --hero-to: #3730a3;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow: 0 1px 3px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55);
    --focus: 0 0 0 3px rgb(129 140 248 / 0.45);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #1b1f27;
  --surface-3: #242935;
  --text: #e8eaef;
  --muted: #a3aab7;
  --subtle: #7c8492;
  --border: #2a2f3a;
  --border-strong: #3b4251;
  --brand: #818cf8;
  --brand-hover: #a5b4fc;
  --brand-soft: #262b4d;
  --brand-text: #c7d2fe;
  --on-brand: #0f1115;
  --accent: #f59e0b;
  --accent-soft: #3a2a0c;
  --accent-text: #fcd34d;
  --ok: #4ade80;
  --ok-soft: #12301f;
  --ok-text: #86efac;
  --danger: #f87171;
  --danger-soft: #3b1818;
  --danger-text: #fca5a5;
  --violet-soft: #2c2450;
  --violet-text: #c4b5fd;
  --warn-bg: #2a220f;
  --warn-border: #7a5d1a;
  --warn-text: #fde3a7;
  --sidebar-bg: #172554;
  --note-bg: #1d1c17;
  --scrollbar: #3b4251;
  --hero-from: #1e1b4b;
  --hero-to: #3730a3;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.55);
  --focus: 0 0 0 3px rgb(129 140 248 / 0.45);
}