/* =========================================================================
   alexi — colour tokens. THE ONE PLACE THE SITE'S COLOURS LIVE.
   Theme 1.2.1, 28 Sep 2026 (palette consolidated; Alex delegated the calls).

   The theme loads this file first on every page, and ASC Framework loads it
   inside every H5P exercise iframe too. The theme's stylesheet and every ASC
   plugin refer to these names with var(--alexi-…) and never to a hex code.
   To change a colour: edit here, bump the theme version, upload the theme,
   purge LiteSpeed. Nothing else.

   THE PALETTE = one grey family + five colour families, ~27 values.
   House pattern (Alex): a highlight is a PALE TINT with DARK INK of the same
   hue. Solid colour appears in exactly three places: the Start/Continue
   button (green), the Free tag + Mark complete (orange), Reset progress (red).
   Each colour family has the same three or four roles:
     solid  → hover        the button/tag colour and its pressed/hover step
     tint   → ink          the pale block and the dark text that sits on it
   ========================================================================= */

:root {
	/* --- Greys: the "Never Too Small" warm neutrals -------------------------
	   One family for the whole site. (Until 1.2.1 the theme's pages used cooler
	   greys left over from Astra — #334155 / #1E293B / #64748B / #E2E8F0 — while
	   the course UI used these; now everything is set in these.) */
	--alexi-ground: #FFFFFF;        /* page and card background */
	--alexi-ink: #1A1A1A;           /* headings, site title, strongest text */
	--alexi-body: #2E2E2C;          /* body text, button labels (13.6:1 on white) */
	--alexi-muted: #74746F;         /* secondary text: dates, captions, placeholders (4.7:1 — was #8C8C88 at 3.4:1, too faint for AA) */
	--alexi-line: #E7E6E1;          /* hairlines, dividers, card and input borders */
	--alexi-outline: #C9C8C3;       /* border of outlined controls (Details, Featured design items) and stronger rules */
	--alexi-surface: #EFEFEC;       /* soft panels, thumbnails' empty ground — the same grey as a button at rest */

	/* --- The grey pill: every ordinary button, incl. H5P Check/Retry --------- */
	--alexi-btn-bg: #EFEFEC;
	--alexi-btn-bg-hover: #DEDED9;
	--alexi-btn-bg-disabled: #F5F5F3;
	--alexi-btn-text-disabled: #A9A9A4;
	/* button label colour = --alexi-body (see the aliases below) */

	/* --- Slate: the accent (Alex's #3C4F62) ---------------------------------
	   Links at rest, progress %, section underline, current-item marks, focus
	   rings, Notes/Clips tabs, THIS CLIP tag, Clip times pill, login buttons.
	   Never ordinary buttons, never body text. */
	--alexi-accent: #3C4F62;
	--alexi-accent-hover: #334454;
	--alexi-accent-soft: #EAEEF2;   /* its pale tint — selected/pressed states in the Notes panel */

	/* --- Blue tint: "you are here" (28 Sep 2026, was pale green) -----------
	   Hovered links and rows, the current clip, the exercise pill above every
	   H5P, THIS CLIP block, Done badge, Complete tag, door-icon hover, login
	   panel tints. */
	--alexi-tint: #DEE8F3;
	--alexi-tint-ink: #0F2A47;      /* 11.8:1 on the tint */
	--alexi-tint-active: #CCDCEE;   /* pressed, one step deeper */

	/* --- Green: success / progress (stays green on purpose) ------------------
	   Progress bar, completion ticks, the 3px left edge on the current clip and
	   the THIS CLIP box, and the ONE solid green button: Start / Continue. */
	--alexi-success: #2FA36B;       /* white text on it is 3.2:1 — Alex's choice, keep the label short and 600 weight */
	--alexi-success-hover: #268A5A;
	--alexi-success-tint: #EEF4F0;  /* "saved" / "built" chips */
	--alexi-success-ink: #23503C;   /* 8.3:1 on the tint */

	/* --- Orange: highlight — the Free tag, Mark complete, notices ------------
	   1.2.1: the terracotta notice (Notes panel, members-only) now uses this
	   family's tint + ink instead of its own; one warm colour, not two. */
	--alexi-highlight: #F28C28;     /* white text on it is 2.5:1 — Alex accepted this for the Free tag; offer dark ink if he ever finds it hard to read */
	--alexi-highlight-hover: #D9781E;
	--alexi-highlight-tint: #FBF1E6;
	--alexi-highlight-ink: #7A5122; /* 6.2:1 on the tint */

	/* --- Red: danger / error -------------------------------------------------- */
	--alexi-danger: #A6462F;        /* Reset progress button (solid, white text) */
	--alexi-error-bg: #F7E6E0;      /* error message ground */
	--alexi-error-ink: #8F3F28;     /* error message text, 6:1 on the ground */

	/* --- Keyboard focus ring: the accent at 30% (was a neutral grey) --------- */
	--alexi-focus-ring: rgba(60, 79, 98, 0.3);

	/* =====================================================================
	   COMPATIBILITY ALIASES — names the theme and plugins still reference.
	   Do not use these in new code; use the token they point at. Each one is a
	   1.2.1 consolidation decision:
	   ===================================================================== */
	--alexi-text: var(--alexi-body);            /* theme body text: was cool #334155 → the one body grey */
	--alexi-heading: var(--alexi-ink);          /* theme headings / site title: was #1E293B → ink */
	--alexi-text-muted: var(--alexi-muted);     /* theme meta text: was #64748B */
	--alexi-link: var(--alexi-accent);          /* links at rest: was near-black #132E49, indistinguishable from text without an underline → the slate accent (8.4:1), hover = the tint */
	--alexi-border: var(--alexi-line);          /* theme card borders: was #E2E8F0 */
	--alexi-border-strong: var(--alexi-outline);/* theme table/form borders: was #D1D5DB */
	--alexi-btn-text: var(--alexi-body);        /* button labels: was #3A3A38, indistinguishable from body */
	--alexi-accent-strong: var(--alexi-accent-hover); /* Notes panel deeper accent: was #2E3D4C */
	--alexi-warm-tint: var(--alexi-highlight-tint);   /* terracotta notice → orange family */
	--alexi-warm-tint-hover: var(--alexi-highlight-tint);
	--alexi-warm-ink: var(--alexi-highlight-ink);
}