/* Course UI tokens: the player courses only. premium-app-sync adds this file for a course that uses the player.
   One attribute picks the course: <html data-course="b|ea|lh|pc">. Theme: data-theme="dark" (default light).
   --c-*: course colour. --paper*, --pen-*: the board. Everything else is shared. */
@font-face{font-family:Inter;font-weight:400 800;font-display:swap;src:url(fonts/InterVar-latin.woff2) format("woff2")}
@font-face{font-family:"Patrick Hand";font-weight:400;font-display:swap;src:url(fonts/PatrickHand.woff2) format("woff2")}
:root{
 color-scheme:light;
 /* page, same values as the Marketplace mock */
 --bg:#f5f6f4;--panel:#fff;--ink:#1c2430;--ink2:#3d4756;--mute:#5d6775;--line:#e6e8e4;--line2:#c9cec8;
 --good:#177a55;--good-t:#e2f4ec;--bad:#b3261e;--bad-t:#fdecea;--warn-t:#fbf0d6;--warn:#7a5208;
 /* type */
 --font-ui:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
 --font-hand:"Patrick Hand","Comic Sans MS",cursive;
 --font-fig:Inter,system-ui,sans-serif;
 /* board paper. Stays light in both themes, so figures never need a dark version */
 --paper:#fdfdfb;--paper-dot:rgba(30,42,60,.13);--paper-line:#dfe2dc;
 --pen-ink:#1b2330;--pen-mute:#535d6c;--pen-wrong:#b3261e;--pen-right:#14663a;--pen-fig:#535d6c;
 /* board type */
 --board-fs:clamp(22px,19px + .75vw,28px);--board-lh:1.27;--board-head:1.3;
 /* motion, numbers not adjectives. Reduced motion sets them all to 0 */
 --dur-ink:90ms;--dur-page:180ms;--dur-ui:160ms;
 /* radius */
 --r-card:18px;--r-btn:12px;--r-board:14px;
}
/* one accent for every new course (owner 2026-10-31): the site's blue (globals.css --color-brand #185fa5, dark #6fa8dc, tint #e6f1fb / #1c3a5e).
   Red is only for wrong, green with a check only for right. The Marketplace covers keep their own colours; they are not these */
[data-course]{--c-tint:#d3e5f7;--c-soft:#eef5fc;--c-deep:#0f3561;--c-accent:#185fa5;--c-hl:#cfe3fa}
[data-course]{--c-on:#fff;--c-ui:var(--c-accent);--c-ui-deep:var(--c-deep);--pen-accent:var(--c-accent);--page:var(--c-soft)}

/* dark: page goes dark, the accent lightens for the page, the board paper dims but stays paper */
[data-theme=dark]{color-scheme:dark;
 --bg:#111316;--panel:#1a1d21;--ink:#f0f2f4;--ink2:#cdd2d9;--mute:#a4acb8;--line:#2b2f35;--line2:#454b54;
 --good:#5fd3a2;--good-t:#123026;--bad:#ff9a90;--bad-t:#381b19;--warn-t:#33290f;--warn:#efc873;
 --paper:#e8e5da;--paper-dot:rgba(30,42,60,.16);--paper-line:#c9c6ba;
 --pen-mute:#4a5361;--pen-wrong:#a11f18;--pen-right:#0f5a31;
 --page:#111316}
[data-theme=dark][data-course]{--c-ui:#6fa8dc;--c-ui-deep:#d4e6f8;--c-tint:#1c3a5e;--c-soft:#14202e;--pen-accent:#185fa5;--c-on:#0b1116}
@media(prefers-reduced-motion:reduce){:root{--dur-ink:0ms;--dur-page:0ms;--dur-ui:0ms}}

/* the app's older names, so every page and sheet the player already draws follows the tokens above and a dark system setting does nothing on its own */
html[data-course]{color-scheme:light;
 --brand:var(--c-ui);--brand-dark:var(--c-ui-deep);--tint:var(--c-soft);--on-brand:var(--c-on);--surface:var(--panel);--muted-bg:var(--bg);--soft:var(--mute);--hair:var(--line);
 --good-tint:var(--good-t);--bad-tint:var(--bad-t);--shadow:0 1px 2px rgba(28,36,48,.05);--frame:transparent;--frame-in:transparent;--boardbg:var(--paper);
 --head:var(--font-ui);--body:var(--font-ui);--hand:var(--font-hand);--band:var(--c-soft);--deep:var(--c-deep);--deep2:var(--c-accent);--hero1:var(--c-tint);--brand-text:var(--c-ui);
 --background:var(--bg);--surface-muted:var(--bg);--ink-muted:var(--ink2);--ink-soft:var(--mute);--hairline:var(--line);--border-strong:var(--line2);--brand-tint:var(--c-soft);--warn-tint:var(--warn-t);
 --pp-bg:var(--bg);--pp-surface:var(--panel);--pp-muted:var(--bg);--pp-ink:var(--ink);--pp-ink2:var(--ink2);--pp-soft:var(--mute);--pp-hair:var(--line);--pp-line:var(--line2);--pp-brand:var(--c-ui);--pp-brand-d:var(--c-ui-deep);--pp-tint:var(--c-soft);--pp-brand-t:var(--c-ui);--pp-on:var(--c-on);--pp-good:var(--good);--pp-good-t:var(--good-t);--pp-bad:var(--bad);
 --tk-0:var(--c-tint);--tk-1:var(--c-tint);--tk-2:var(--c-tint);--tk-3:var(--c-tint);--tk-4:var(--c-tint);--tk-5:var(--c-tint);--tk-6:var(--c-tint);--tk-7:var(--c-tint);--tk-R:var(--c-tint);--tk-ink:var(--c-ui-deep);
 --sb-page:var(--bg);--sb-dark:var(--c-ui);--sb-dark-h:var(--c-ui-deep);--sb-on:var(--c-on);--sb-pill:var(--c-soft);--sb-pill-ink:var(--c-ui);--sb-hair:var(--line);--sb-card:0 1px 2px rgba(28,36,48,.05);--sb-chip-on:var(--panel);
 --pp-h1:700 clamp(2.2rem,1.2rem + 4vw,4rem)/1.06 var(--font-ui);--pp-h2:700 clamp(1.8rem,1.2rem + 2vw,2.8rem)/1.1 var(--font-ui);--pp-h1-app:700 clamp(26px,2vw + 18px,36px)/1.12 var(--font-ui)}
html[data-course][data-theme=dark]{color-scheme:dark;--sb-pill:var(--c-tint);--sb-pill-ink:var(--c-ui-deep);--tint:var(--c-tint);--brand-tint:var(--c-tint);--pp-tint:var(--c-tint);--sb-card:none;--shadow:none}