/* ═══════════════════════════════════════════════════════════
   English Academy — design tokens

   THIS IS THE ONLY FILE YOU NEED TO REPLACE TO RESTYLE THE SITE.
   Nothing else contains a colour, a font name, or a fixed size.

   The grotesque is the platform's voice.
   The serif is the learner's material.
   The mono is data — numbers, tags, evidence.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700&family=Source+Serif+4:wght@400;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* colour */
  --ink:#16232B;
  --slate:#47606E;
  --muted:#5A6E7B;
  --paper:#F1F3EF;
  --card:rgba(252,253,251,1);
  --line:rgba(22,35,43,.13);
  --line-soft:rgba(22,35,43,.07);

  --mark:#C0355F;              /* needs attention */
  --mark-bg:rgba(192,53,95,.08);
  --trace:#1B7A6E;             /* evidence, connection */
  --trace-bg:rgba(27,122,110,.10);
  --gold:#B8891C;              /* strong, mastered */
  --gold-bg:rgba(184,137,28,.14);

  /* type */
  --ui:"Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --text:"Source Serif 4",Georgia,serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;

  /* space and shape */
  /* 4 8 12 16 24 32 48 64. --s7 was used in five places and defined in
     none, so every padding and margin that asked for it silently became
     zero. An undefined custom property does not warn; it just does not
     happen, which is why it survived this long. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r:4px;
  --maxw:720px;

  /* background image, optional */
  --panel:transparent;
  --panel-pad:0px;
  --bg-image:none;
  --bg-size:cover;
  --bg-pos:center;
  --bg-repeat:no-repeat;
  --bg-scrim:0;
}

/* TOKENS_CSS_V1_END */