/* ==========================================================================
   palette.css : le seul fichier qui contient des valeurs de couleur brutes.

   Direction (15 octobre 2026, inspirée de whatismyip) : une page blanche, des
   couleurs qui orientent. La terre cuite agit, le rose accueille, l'azur
   explique, le miel souligne ; le vert est réservé à une réussite observée.
   Aucune couleur ne dit un niveau d'aide : le niveau 5 n'est pas une erreur.

   1. Palette : les valeurs, nommées par famille. 2. Rôles : ce qu'utilisent
   les feuilles de style (--c-*). 3. Thème sombre : les mêmes rôles. 4. Anciens
   noms (style.css, atelier) et couleurs de l'atelier.
   Changer une couleur : modifier ce fichier, rien d'autre.
   ========================================================================== */

/* 1. Palette -------------------------------------------------------------- */
:root {
  --palette-terra: #904b3a;
  --palette-terra-strong: #763a2d;
  --palette-rose: #fff0ed;
  --palette-rose-strong: #ffdad2;
  --palette-azure: #e9f5ff;
  --palette-azure-strong: #dceeff;
  --palette-on-azure: #16324d;
  --palette-blue: #1268b3;
  --palette-honey: #f7e1a6;
  --palette-honey-strong: #f2d58c;
  --palette-cream: #fff5e4;
  --palette-on-honey: #594919;
  --palette-ochre: #8a5a00;
  --palette-green: #2b7356;
  --palette-green-soft: #e9f1eb;
  --palette-red: #a12635;
  --palette-red-soft: #fff0f2;
  --palette-ink: #231917;
  --palette-body: #534340;
  --palette-muted: #6d5b55;
  --palette-line: #f1dfdb;
  --palette-line-strong: #ecd6d0;
  --palette-outline: #738a9d;
  --palette-surface-soft: #fff8f6;
  --palette-white: #ffffff;
  --palette-shadow: #000000;
}

/* 2. Rôles ---------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Page et texte */
  --c-page: var(--palette-white);
  --c-surface: var(--palette-white);
  --c-surface-subtle: var(--palette-surface-soft);
  --c-ink: var(--palette-ink);
  --c-body: var(--palette-body);
  --c-muted: var(--palette-muted);
  --c-line: var(--palette-line);
  --c-line-strong: var(--palette-line-strong);
  /* Contour perceptible (3:1) des champs et des boutons secondaires */
  --c-control-border: var(--palette-outline);

  /* Agir : terre cuite */
  --c-action: var(--palette-terra);
  --c-action-hover: var(--palette-terra-strong);
  --c-on-action: var(--palette-white);

  /* Accueillir : rose (accueil, messages de l'élève, sélection) */
  --c-welcome-bg: var(--palette-rose);
  --c-welcome-line: var(--palette-rose-strong);

  /* Expliquer : azur (exemples, reprises guidées) */
  --c-explanation-bg: var(--palette-azure);
  --c-explanation-line: var(--palette-azure-strong);
  --c-explanation-ink: var(--palette-on-azure);

  /* Repères : bleu (focus, quota) */
  --c-info: var(--palette-blue);
  --c-focus: var(--palette-blue);

  /* Souligner : miel (reprise, point à retenir, quota presque atteint) */
  --c-emphasis-bg: var(--palette-honey);
  --c-emphasis-hover: var(--palette-honey-strong);
  --c-note-bg: var(--palette-cream);
  --c-emphasis-ink: var(--palette-on-honey);

  /* Réussite observée, et seulement elle */
  --c-success: var(--palette-green);
  --c-success-bg: var(--palette-green-soft);

  /* Erreur technique ou alerte urgente (espace parent) */
  --c-danger: var(--palette-red);
  --c-danger-bg: var(--palette-red-soft);

  /* Dessins mathématiques : des rôles propres, sans lien avec l'aide */
  --c-figure-1: var(--palette-terra);
  --c-figure-2: var(--palette-blue);
  --c-figure-3: var(--palette-ochre);

  --c-backdrop: color-mix(in srgb, var(--palette-shadow) 35%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--palette-shadow) 4%, transparent),
    0 10px 28px color-mix(in srgb, var(--palette-shadow) 6%, transparent);
}

/* 3. Thème sombre : les mêmes rôles, automatiquement ---------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --c-page: #171311;
    --c-surface: #211b19;
    --c-surface-subtle: #29211e;
    --c-ink: #f7eeeb;
    --c-body: #d3bfb8;
    --c-muted: #bca69d;
    --c-line: #4b3933;
    --c-line-strong: #5a463f;
    --c-control-border: #9b8880;

    --c-action: #f0ac99;
    --c-action-hover: #f6c4b6;
    --c-on-action: #29150f;

    --c-welcome-bg: #36231f;
    --c-welcome-line: #4d322c;

    --c-explanation-bg: #192d3d;
    --c-explanation-line: #24425a;
    --c-explanation-ink: #d6e9fc;

    --c-info: #88c9ff;
    --c-focus: #88c9ff;

    --c-emphasis-bg: #4a3c1c;
    --c-emphasis-hover: #594a24;
    --c-note-bg: #362c16;
    --c-emphasis-ink: #f7e1a6;

    --c-success: #a9d8be;
    --c-success-bg: #1c3025;

    --c-danger: #ffb3bd;
    --c-danger-bg: #3b1d24;

    --c-figure-1: #f0ac99;
    --c-figure-2: #88c9ff;
    --c-figure-3: #e8c46a;

    --c-backdrop: color-mix(in srgb, #000000 55%, transparent);
    --shadow: 0 1px 2px color-mix(in srgb, #000000 30%, transparent), 0 10px 28px color-mix(in srgb, #000000 25%, transparent);
  }
}

/* 4. Anciens noms (style.css, atelier) et couleurs de l'atelier ------------
   Des renvois vers les rôles, pas de nouvelles valeurs. */
:root {
  --bg: var(--c-page);
  --surface: var(--c-surface);
  --surface-2: var(--c-surface-subtle);
  --ink: var(--c-ink);
  --ink-2: var(--c-muted);
  --line: var(--c-line);
  --accent: var(--c-action);
  --accent-ink: var(--c-on-action);
  --accent-soft: var(--c-welcome-bg);
  --warn: var(--c-emphasis-ink);
  --warn-soft: var(--c-note-bg);
  --bad: var(--c-danger);
  --bad-soft: var(--c-danger-bg);

  /* Échelle de l'atelier (première version de Sevrage), qui affiche ses niveaux en couleur. Le tuteur ne s'en sert pas. */
  --lvl-5: #a8441a;
  --lvl-4: #9a5c10;
  --lvl-3: #7d6d10;
  --lvl-2: #4f7a22;
  --lvl-1: #2c7a52;
  --lvl-0: #1f6657;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lvl-5: #e8935f;
    --lvl-4: #e2a54f;
    --lvl-3: #cdb84e;
    --lvl-2: #93bf64;
    --lvl-1: #66bf8d;
    --lvl-0: #6fbfa6;
  }
}