/* ============================================================================
   Markus platform tokens (13 Oct 2026)

   The one place the brand's values live. BRAND_GUIDE.md at the repo root is
   the written version; this file is the code version. Keep them in step:
   change a value here only when the guide changes first.

   Loaded FIRST by every layout (before Bootstrap and site.css), so any page
   can use var(--mk-*). This file only declares variables, plus the shared
   wordmark class, so linking it changes nothing on screen by itself.

   Rules for new code (guide section 11):
   - Use these variables. Never type a hex value into a view or new CSS.
   - If a value is missing, add it to BRAND_GUIDE.md, then here, then use it.
   - JavaScript that draws colours reads them with getComputedStyle.
   ========================================================================== */
:root {
  /* ---- brand (guide section 2) ---- */
  --mk-blue: #2563EB;          /* Markus blue: main button, links, selected */
  --mk-blue-deep: #1D4ED8;     /* hover, focus ring, info text */
  --mk-blue-deeper: #1E40AF;   /* pressed */
  --mk-blue-tint: #DBEAFE;     /* selected rows, info notes */
  --mk-teal: #06B6D4;          /* the ribbon only. Never a button */
  --mk-navy: #1D3D7A;          /* teacher sidebar only */
  --mk-ribbon: linear-gradient(90deg, #2563EB, #06B6D4);
  --mk-hero: linear-gradient(158deg, #1E3A8A 0%, #1D4ED8 55%, #2563EB 100%);

  /* ---- neutrals: the Living Colour grey set (guide section 3) ---- */
  --mk-page: #F2F3F5;
  --mk-card: #FFFFFF;
  --mk-ink: #16181C;           /* headings, values */
  --mk-body: #3F434A;          /* body text */
  --mk-muted: #5B6068;         /* the only muted grey for small text */
  --mk-line: #E3E6EB;          /* borders */
  --mk-hairline: #EDEFF3;      /* inner rules */
  --mk-chip: #F1F3F7;          /* chip fill, disabled fill */
  --mk-on-blue: #FFFFFF;       /* text and icons on blue or navy */

  /* ---- status: text on a soft fill, plus a solid fill (guide section 4) ---- */
  --mk-good: #15803D;  --mk-good-soft: #DCFCE7;  --mk-good-fill: #22C55E;
  --mk-warn: #B45309;  --mk-warn-soft: #FEF3C7;  --mk-warn-fill: #F59E0B;
  --mk-bad: #B91C1C;   --mk-bad-soft: #FEE2E2;   --mk-bad-fill: #DC2626;
  --mk-info: #1D4ED8;  --mk-info-soft: #DBEAFE;  --mk-info-fill: #2563EB;
  --mk-neutral: #3F434A; --mk-neutral-soft: #F1F3F7; --mk-neutral-fill: #C4C8D2;

  /* ---- subjects (guide section 5, decision F) ---- */
  --mk-maths: #1D4ED8;    --mk-maths-soft: #DBEAFE;
  --mk-english: #BE185D;  --mk-english-soft: #FCE7F3;
  --mk-fs: #0D9488;       --mk-fs-soft: #CCFBF1;   --mk-fs-text: #0F766E;

  /* ---- maths topics (guide section 5): white pill with a coloured dot ---- */
  --mk-topic-number: #1D4ED8;   --mk-topic-number-soft: #DBEAFE;
  --mk-topic-algebra: #6D28D9;  --mk-topic-algebra-soft: #EDE9FE;
  --mk-topic-geometry: #0E7490; --mk-topic-geometry-soft: #CFFAFE;
  --mk-topic-ratio: #BE185D;    --mk-topic-ratio-soft: #FCE7F3;
  --mk-topic-stats: #A21CAF;    --mk-topic-stats-soft: #FAE8FF;

  /* ---- mastery, skill state ONLY, always with a word (guide section 5) ---- */
  --mk-mastery-secure: #16A34A;
  --mk-mastery-developing: #F59E0B;
  --mk-mastery-needs-work: #DC2626;
  --mk-mastery-not-seen-border: #C4C8D2;   /* white cell, dashed grey border */

  /* ---- Living Colour English band (decision H): a decorative band, never a button ---- */
  --mk-lc-english-band: linear-gradient(135deg, #9333EA 0%, #DB2777 100%);

  /* ---- off screen: a people state on live boards, not an answer state ---- */
  --mk-off-wash: #FBEAEA;  --mk-off-border: #E9BFBF;  --mk-off-chip: #8E2424;

  /* ---- support violet: hints and tools, never a button ---- */
  --mk-violet: #7C3AED;  --mk-violet-text: #6D28D9;  --mk-violet-tint: #EDE9FE;  --mk-violet-border: #C4B5FD;

  /* ---- answers on any readout (guide section 5, Andy's law) ---- */
  --mk-ans-right: #2B4ED0;
  --mk-ans-wrong: #FF9F0A;      /* a fill only, never text */
  --mk-ans-text-amber: #8A5200;
  --mk-ans-text-grey: #6E7480;
  --mk-ans-part: #F59E0B;
  --mk-ans-right-soft: #93B4F5;  /* partial credit on grids and matrices: a lighter right blue */

  /* ---- whiteboard pens (board and English annotate): pen inks, never UI colours ---- */
  --mk-pen-black: #18223E;
  --mk-pen-blue: #2B4BC4;
  --mk-pen-green: #1FA55C;
  --mk-pen-red: #D64545;
  --mk-pen-yellow: #FBBF24;

  /* ---- type (guide section 6). Faces come from lcm-fonts.css ---- */
  --mk-font-head: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mk-font-exam: "STIX Two Text", Georgia, serif;
  --mk-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- shape (guide section 7) ---- */
  --mk-r-sm: 8px;      /* small controls, tags */
  --mk-r-btn: 10px;    /* buttons and inputs */
  --mk-r-card: 16px;   /* cards */
  --mk-r-sheet: 20px;  /* learner cards and sheets */
  --mk-r-pill: 999px;
  --mk-shadow-card: 0 1px 3px rgba(16, 24, 40, .05);
  --mk-shadow-raised: 0 12px 32px rgba(15, 23, 42, .12);
  --mk-focus: 3px solid #1D4ED8;   /* use with outline-offset: 2px */

  /* ---- the public site (guide section 14, 14 Oct 2026): the shop window keeps
     its own display treatment. Same colours, buttons and wordmark text; Inter
     display, white body, the original hero gradient, an ink wordmark on the
     desktop nav and an ink burger on phones. #3B82F6 survives only inside
     these two gradients. ---- */
  --mk-font-head-public: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mk-page-public: #FFFFFF;
  --mk-hero-public: linear-gradient(165deg, #1E3A8A 0%, #2563EB 55%, #3B82F6 100%);
  --mk-grad-public: linear-gradient(160deg, #3B82F6 0%, #1D4ED8 100%);

  /* ---- the main button (guide section 8, decision A: flat Markus blue) ---- */
  --mk-btn: #2563EB;
  --mk-btn-hover: #1D4ED8;
}

/* The wordmark (decision G): typed lowercase "markus", no dot, no full stop.
   Markup: <span class="mk-wordmark">markus</span>. Blue on light grounds;
   add .mk-wordmark--on-blue on blue bars. Never an image, never a dot. */
.mk-wordmark {
  font-family: var(--mk-font-head);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--mk-blue);
  text-decoration: none;
}
.mk-wordmark--on-blue { color: #FFFFFF; }
.mk-wordmark--ink { color: var(--mk-ink); }   /* the public site's desktop nav only */