/* Design system — un seul endroit pour les couleurs, les espacements et les
   typographies. Jetons relevés sur docs.teeptrak.com.
   Règle : aucune couleur en dur ailleurs que dans ce fichier. */

:root {
  color-scheme: light;

  /* Relevés sur teeptrak-opcua.net, qui reprend teeptrak.com : la même main. */
  --brand: #eb352c;
  --brand-soft: #fdebe9;
  --brand-ink: #c8281f;

  /* Réussite. Utilisé par la correction du quiz, où il ne porte jamais seul le
     sens : chaque ligne corrigée est aussi étiquetée en toutes lettres. */
  --ok: #2e7d32;
  --ok-soft: #e8f3e9;

  --ink: #232120;
  --body-text: #3d3a38;
  --muted: #737373;

  --page: #ffffff;
  --surface: #ffffff;
  --surface-subtle: #faf9f8;
  --line-warm: #e7e4e2;
  /* `--line` était utilisé dix-sept fois et jamais défini : dix-sept bordures
     invisibles — sommaire, quiz, filtres, matrice. Un `var()` sans valeur ne
     prévient pas, il annule la déclaration. */
  --line: #ebebeb;
  --code-bg: #f4f2f1;
  --shadow: 0 10px 30px rgba(35, 33, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(35, 33, 32, 0.16);

  --n50: #fafafa;
  --n100: #f5f5f5;
  --n200: #e5e5e5;
  --n300: #d4d4d4;
  --n400: #a1a1a1;
  --n500: #737373;
  --n600: #525252;
  --n700: #404040;
  --n800: #262626;
  --n900: #171717;

  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Noto Sans SC', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* La courbe des transitions de teeptrak.com : un départ franc, une arrivée douce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Les bandes de marque — le héros rouge, l'appel sombre — ne suivent pas le
     thème : ce sont des surfaces inversées, lisibles en clair comme en sombre,
     et leur couleur est celle de TEEPTRAK. Ces trois jetons sont donc définis
     une seule fois, ici, et ne sont **pas** redéfinis en mode nuit.

     Sans cela : `--ink` devenant presque blanc la nuit, la bande « Commencez
     par un sujet » passait en blanc avec du texte blanc — illisible ; et
     `--brand` virant au corail, le haut du héros s'éclaircissait au lieu de
     foncer, tandis que le libellé du bouton d'inscription perdait son
     contraste sur blanc. */
  --bande-sombre: #232120;
  --bande-rouge: #eb352c;
  --bande-rouge-encre: #c8281f;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  /* Employé treize fois avant d'être défini : un `padding` dont une variable
     manque tombe à zéro, silencieusement. */
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --reading-width: 68ch;
  /* La page d'un sujet : plus large que la lecture d'une leçon, parce qu'elle
     porte des fiches sur deux colonnes ; centrée. */
  --sujet-width: 60rem;
  --content-width: 1240px;

  --focus-ring: 2px solid var(--brand);
}

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

  --brand: #ff6b62;
  --brand-soft: #3a1c1a;
  --brand-ink: #ff9a94;

  --ok: #7bc47f;
  --ok-soft: #1e2b1f;

  --ink: #f5f4f3;
  --body-text: #d6d3d1;
  --muted: #a1a1a1;

  --page: #171717;
  --surface: #1f1f1f;
  --surface-subtle: #242424;
  --line-warm: #383533;
  --line: #333130;
  --code-bg: #232323;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --brand: #ff6b62;
    --brand-soft: #3a1c1a;
    --brand-ink: #ff9a94;

    --ok: #7bc47f;
    --ok-soft: #1e2b1f;

    --ink: #f5f4f3;
    --body-text: #d6d3d1;
    --muted: #a1a1a1;

    --page: #171717;
    --surface: #1f1f1f;
    --surface-subtle: #242424;
    --line-warm: #383533;
    --line: #333130;
    --code-bg: #232323;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  }
}