/* ============================================================================
   tokens.css — the one palette, for every portal.
   ----------------------------------------------------------------------------
   Owner, 2026-08-30: "i want all portals be affected by the global settings."

   EDIT THIS FILE AND EVERY PORTAL FOLLOWS. Before this, all eighteen pages
   carried a private copy of the palette in their own <style> block, and they
   had drifted: --text-muted had FIVE different values, --border-color four,
   --bg-main four. Changing the brand meant eighteen edits that all had to
   agree, so in practice it meant eighteen edits that did not.

   WHICH VALUES THESE ARE. The set the newest and largest portals already
   shared — admin, teacher, partner, the parent portal, the classroom screens,
   the manual and the T&C. Choosing the majority value variable-by-variable
   would have been arbitrary and would have moved those pages; choosing one
   coherent design system means the outliers move instead, which is what
   unifying means and what the owner asked for on 2026-08-30 having been shown
   exactly which seven pages change.

   THERE ARE TWO COPIES OF THIS FILE AND ONLY ONE IS EDITABLE.
   parents-portal deploys to its own site (portal.melophonicsconservatory.com),
   where /css/ is a different root, so it needs its own copy at
   parents-portal/css/tokens.css. That copy is GENERATED — never hand-edited —
   and qa/design-tokens-test.js fails if the two ever differ. The precedent for
   that guard is motion.css, which has the same two-copy arrangement, no check,
   and has already drifted: the portal's copy is missing 52 lines including the
   modal exit animation.

   A PORTAL MAY STILL OVERRIDE. Redefining a variable in a page's own <style>
   still wins, because that rule comes later. That is the escape hatch, not the
   habit — anything defined here should be changed here.
   ========================================================================= */

:root {
  /* ── brand ──────────────────────────────────────────────────────────── */
  --brand: #ffc100;
  --brand-hover: #e5ad00;
  --brand-dark: #b07d00;
  --brand-2: #f5b301;

  /* ── surfaces ───────────────────────────────────────────────────────── */
  --bg-main: #f5f8fa;
  --card-bg: #ffffff;

  /* ── text ───────────────────────────────────────────────────────────── */
  --text-dark: #181c32;
  --text-muted: #a1a5b7;

  /* ── lines ──────────────────────────────────────────────────────────── */
  --border-color: #eff2f5;

  /* ── status ─────────────────────────────────────────────────────────── */
  --danger: #f1416c;
  --success: #50cd89;
  --info: #009ef7;
  --warning: #ff9500;

  /* Tints behind a status message. Kept as their own tokens rather than an
     opacity of the colour above, because they sit under dark text and a
     faded red is not the same as a pale pink at the contrast that matters. */
  --danger-light: #fff5f8;
  --success-light: #e8fff3;
  --info-light: #e8f4ff;
  --warning-light: #fff8ec;
  --primary-light: #fff5d6;

  /* ── the sidebar (admin, teacher, partner) ──────────────────────────── */
  --sidebar-bg: #ffc100;
  --sidebar-item: #333333;
  --sidebar-item-hover: #000000;
  --sidebar-item-active-bg: rgba(0, 0, 0, 0.08);

  /* ── layout ─────────────────────────────────────────────────────────── */
  /* 20% of the screen, never below 220px, never above 340px. */
  --fluid-sidebar: clamp(220px, 20vw, 340px);

  /* ── the classroom, which is deliberately dark ──────────────────────── */
  /* A lit room behind a video call is a lamp pointed at the person using it,
     so the classroom is the one surface that does not follow the light
     palette above. These are still defined HERE so the dark set is edited in
     the same place as the light one. */
  --cr-bg: #14171f;
  --cr-surface: #1e222d;
  --cr-line: #2d3341;
  --cr-text: #f0f2f6;
  --cr-dim: #a1a5b7;
  --cr-brand: #ffc100;
  --cr-live: #50cd89;
  --cr-danger: #f1416c;
  --cr-warn: #ff9500;
  --cr-observe: #009ef7;

  /* ── older names for the same things ────────────────────────────────── */
  /* Four portals were written before the names above settled and use these.
     Defined in terms of the canonical tokens rather than repeated as literals,
     so a page still saying var(--bg-card) follows a change to --card-bg and
     cannot quietly fall behind it. Do not add to this list; use the names
     above in anything new. */
  --bg-card: var(--card-bg);
  --bg-color: var(--bg-main);
  --primary: var(--brand);
  --text-main: var(--text-dark);
}