/* ==========================================================================
   Aravis English Academy - brand tokens
   Derived from "04 Web/tokens.css" in the V0.5 brand kit (Plainview Studio).
   Served at /brand/tokens.css by the express.static mount in src/server.js,
   and linked by every page the app renders.

   WHERE THE FULL KIT LIVES
   Google Drive, not this repo:
     My Drive / Aravis English Academy / Brand / Aravis English Academy - v0.5
   It is 22MB of fonts, layered artwork and the PDF charte, none of which the
   app serves - so only the files actually requested by a page are committed,
   here under public/brand/. Section numbers quoted in the comments below
   refer to brand-guidelines.md inside that kit. If a new logo or image is
   needed, copy it out of the kit into public/brand/ rather than pointing the
   app at a path outside the repo.

   WHY THIS FILE EXISTS
   Before it, four pages (teacher-dashboard.html, exercise-set-page.html,
   authPages.js, emeric-student-view.html) each carried their own :root
   block with its own hand-copied hex values - and they had already drifted
   apart from each other and from the charte (#FAEFDA vs the real #fff6db,
   #226475 vs #226375, #CC5C20 vs #cf5c13). One file, linked everywhere, is
   what stops that happening again. A page must not redefine these.

   THE ALIAS LAYER
   The pages were written against English names (--cream, --teal,
   --teal-deep, --orange, --line...). Rather than rewrite several thousand
   lines of CSS to the charte's French names, the legacy names are kept and
   repointed at the official inks below. Both vocabularies therefore work,
   and they can never disagree. New CSS should prefer the semantic roles
   (--surface, --encre, --accent) over either.

   NO TEXTURE. Charte section 5: the cream is pure - #fff6db as a flat fill,
   no grain tile, no multiply overlay, no filter. The ink texture lives
   inside the delivered logo and illustration files and nowhere else.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');

:root {

  /* --- Brand inks - charte section 3.1 --------------------------------- */
  --creme:            #fff6db;
  --bleu:             #226375;
  --bleu-nuit:        #154453;
  --orange:           #cf5c13;   /* surfaces and accents - NOT small text  */
  --orange-fonce:     #933c1b;   /* the warm colour that is legible as text */
  --brun:             #4a3721;

  /* --- Neutrals, tinted toward the palette (never a pure grey) --------- */
  --neutre-100:       #ece8d0;
  --neutre-200:       #d5d6c3;
  --neutre-300:       #afb9ad;
  --neutre-400:       #859994;
  --neutre-500:       #577679;
  --neutre-600:       #315963;

  /* --- States ---------------------------------------------------------- */
  --succes:           #2f5d4a;   /* 6.99:1 on cream */
  --erreur:           #9e2b1f;   /* 6.90:1 on cream */
  --alerte:           #8f6a10;   /* 4.59:1 on cream */

  /* --- Semantic roles - prefer these in new CSS ------------------------ */
  --fond:             var(--creme);
  --surface:          #ffffff;
  --surface-alt:      var(--neutre-100);
  --bordure:          var(--neutre-200);
  --encre:            var(--bleu-nuit);
  --encre-secondaire: var(--neutre-600);
  --encre-inversee:   var(--creme);
  --accent:           var(--orange);
  --accent-encre:     var(--orange-fonce);
  --lien:             var(--bleu);
  --focus:            var(--bleu);

  /* --- Typography - charte section 4 ------------------------------------
     One family, Libre Franklin, across the whole product. Body copy at 400
     (300 is acceptable); weight 100 is display-only - at 15px on cream the
     stems fall under a pixel and the text goes grey. */
  --police:           "Libre Franklin", system-ui, -apple-system, sans-serif;
  --font:             var(--police);       /* English alias, same thing */
  --graisse-titre:    700;
  --graisse-texte:    400;
  --interlettrage-titre: -0.02em;
  --interlettrage-label: 0.10em;

  /* --- Radii and shadow ------------------------------------------------
     Charte section 7: the territory is screen-printed, not rounded-web. A
     discreet 2-4px, and a short flat shadow rather than a diffuse one.
     --radius-pill stays round on purpose, for the things that are actually
     pills: toggle tracks, count badges, chat bubbles. */
  --radius:           3px;
  --radius-pill:      999px;
  --ombre:            0 1px 2px rgba(21, 68, 83, .14);

  /* --- Legacy aliases - see THE ALIAS LAYER above ---------------------- */
  --cream:            var(--creme);
  --cream-2:          var(--neutre-100);
  --teal:             var(--bleu);
  --teal-deep:        var(--bleu-nuit);
  --burnt-orange:     var(--orange-fonce);
  /* No charte equivalent: a light tint of the burnt orange, used as the
     "inactive student" chip background. Derived, not invented - it is the
     orange laid thinly over cream. */
  --burnt-orange-light: #f5decc;
  --correct:          var(--succes);
  --incorrect:        var(--erreur);
  --line:             rgba(21, 68, 83, 0.14);
}

/* --- Shared base ---------------------------------------------------------
   Only what every page already agreed on. Layout stays with each page. */
body {
  font-family: var(--police);
  font-weight: var(--graisse-texte);
}
h1, h2, h3 {
  font-weight: var(--graisse-titre);
  letter-spacing: var(--interlettrage-titre);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* --- Brand marks ---------------------------------------------------------
   The wordmark replaces the typed "ARAVIS ENGLISH ACADEMY" the pages used
   to set in Anton. Charte section 2.5: the wordmark is vectorised as curves
   in the file and must not be re-typed. Its protective margin is already
   inside the viewBox (section 2.4), so it is never given extra padding and
   never cropped. */
.brand-wordmark {
  display: block;
  width: 100%;
  max-width: 210px;
  margin: 0 auto;
  height: auto;
}
.brand-lockup {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  height: auto;
}