/* Schooler — tokens globaux (variables CSS uniquement, aucune classe utilitaire).
 * Consommé par les layouts et par les composants (chaque composant prefixe ses
 * propres classes par `ds-<composant>__` et réutilise ces variables).
 */

:root {
  /* Couleurs de surface / texte */
  --color-bg: #f7f7fb;
  --color-surface: #ffffff;
  --color-surface-alt: #f0f1f6;
  --color-text: #1f2330;
  --color-text-muted: #5b6172;
  --color-border: #e2e4ec;
  --color-border-strong: #c7cbd8;

  /* Accent générique + un accent par niveau et matière (consommé par taxonomie.json). */
  --accent: #7c3aed;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-maths-7h: #d97706;
  --accent-francais-7h: #168f5b;
  --accent-maths-8h: #dc2626;
  --accent-francais-8h: #2563eb;

  /* Espacements (échelle 4px) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Typographie fluide */
  --font-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-titre: var(--font-base);
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas,
    "Liberation Mono", Menlo, monospace;

  --font-size-sm: clamp(0.8rem, 0.78rem + 0.1vw, 0.88rem);
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --font-size-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
  --font-size-xl: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --font-size-2xl: clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);

  --line-height-base: 1.6;
  --line-height-tight: 1.25;

  /* Largeur de lecture */
  --content-width: 70ch;
  --content-width-wide: 90ch;

  /* Boîtes / encadrés génériques (consommés par les *-box) */
  --box-bg: var(--color-surface);
  --box-border: 1px solid var(--color-border);
  --box-border-accent: 2px solid var(--accent);
  --box-radius: var(--radius-md);
  --box-padding: var(--space-md) var(--space-lg);
  --box-shadow: 0 1px 2px rgba(20, 22, 35, 0.04),
    0 4px 12px rgba(20, 22, 35, 0.06);

  /* Transitions */
  --transition-fast: 120ms ease-out;
}

/* Réinitialisation minimale héritée par les layouts. */
* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}