/* core theme ("Night Shift"). The art pass edits THIS file and drops images in public/art/; app.css only reads these tokens.
   Look: the lesson art's own palette (deep navy, royal blue, ice blue, a hot coral accent, gold for money) on a flat night
   background cut by two angular shards, solid sharp-cornered panels, a squared heading face, coral for the one main action. */

/* Fonts are self-hosted (public/fonts, SIL Open Font License, licence texts alongside) so no student browser contacts a third party.
   Each family is declared over a weight RANGE, so the many `font: 800 ...` shorthands in app.css and the module styles pick a real
   face instead of a synthesised bold: any weight of the heading family is Chakra Petch Bold, any weight of the label family is
   Chakra Petch SemiBold, and Barlow answers 400, 500 and 600-900. */
@font-face { font-family: 'core Display'; src: url('/fonts/ChakraPetch-700.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'core Label'; src: url('/fonts/ChakraPetch-600.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-400.woff2') format('woff2'); font-weight: 100 450; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-500.woff2') format('woff2'); font-weight: 451 550; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-600.woff2') format('woff2'); font-weight: 551 900; font-display: swap; }

:root {
  color-scheme: dark;

  /* palette (from the lesson art) */
  --royal: #1438d6;
  --ice: #9cc4f2;
  --snow: #eef3ff;
  --night: #070d22;
  --navy: #0b1430;
  --panel: #101c44;
  --shard: #0e1b4d;
  --gold: #f5b83d;
  --coral: #f0525a;
  --lime: #b5d334;
  --ember: var(--coral);
  --aurora: #46e0b0;

  /* type */
  --font-display: 'core Display', 'Trebuchet MS', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel: 'core Label', 'Trebuchet MS', system-ui, sans-serif;   /* the small uppercase label face (the name is from the pixel-font theme) */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-base: 1.0625rem;
  --text-small: 0.875rem;
  --text-display: clamp(2.25rem, 6.4vw, 4.25rem);
  --text-hero: clamp(3rem, 11vw, 5.5rem);

  /* colour roles */
  --ink: var(--snow);
  --ink-muted: #c9d6ee;
  --ink-on-accent: var(--navy);
  --accent: var(--gold);          /* money, hero numbers, focus ring */
  --accent-strong: #d99a1c;
  --accent-glow: rgba(245, 184, 61, 0);
  --label: var(--ice);
  --ok: var(--lime);
  --bad: #ff9a8f;                 /* coral, lightened for contrast on the navy panels */
  --line: rgba(156, 196, 242, 0.3);
  --coin-face: var(--gold);
  --coin-rim: #a87a12;
  --coin-shine: #ffe9a8;

  /* buttons: the main action is coral with navy ink, two corners cut */
  --btn-face: var(--coral);
  --btn-face-hover: #ff6b72;
  --btn-cut: 11px;
  --btn-bg: linear-gradient(135deg, transparent var(--btn-cut), var(--btn-face) calc(var(--btn-cut) + 0.5px)) top left / 51% 100% no-repeat,
            linear-gradient(-45deg, transparent var(--btn-cut), var(--btn-face) calc(var(--btn-cut) + 0.5px)) bottom right / 51% 100% no-repeat;
  --btn-bg-hover: linear-gradient(135deg, transparent var(--btn-cut), var(--btn-face-hover) calc(var(--btn-cut) + 0.5px)) top left / 51% 100% no-repeat,
                  linear-gradient(-45deg, transparent var(--btn-cut), var(--btn-face-hover) calc(var(--btn-cut) + 0.5px)) bottom right / 51% 100% no-repeat;
  --btn-ink: var(--navy);
  --btn-border: transparent;
  --btn-shadow: none;

  /* panels (the token names are from the glass theme; the panels are solid now) */
  --glass-bg: var(--panel);
  --pill-bg: var(--navy);
  --glass-bg-solid: var(--panel);
  --glass-border: rgba(156, 196, 242, 0.22);
  --glass-shadow: none;
  --blur: 0px;
  --field-bg: rgba(156, 196, 242, 0.1);
  --field-border: rgba(156, 196, 242, 0.45);
  --row-line: rgba(156, 196, 242, 0.18);
  --text-shadow: none;

  /* shape: sharp */
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;
  --tap: 48px;                    /* minimum touch target */

  /* scene: a flat night ground cut by two angular shards */
  --scene-fallback: var(--night);
  --scene-shards: linear-gradient(104deg, transparent 0 78%, rgba(20, 56, 214, 0.5) 78% 100%), linear-gradient(111deg, transparent 0 44%, var(--shard) 44% 100%);

  /* mascot slot, bottom-right */
  --mascot-image: url('/art/wolf.png?v=2');   /* the DAA Wolf (masters in design/mascot/). Art is cached for a week by address: raise v when the drawing changes */
  --mascot-size: 220px;

  /* Learning Road: the drawn road */
  --road: #1b2a63;
  --road-edge: #3a4c82;
  --road-line: rgba(238, 243, 255, 0.55);

  /* print (PIN cards stay black on white whatever the theme) */
  --print-paper: #ffffff;
  --print-ink: #000000;
  --print-line: #888888;
}

/* ---------- scenes ----------
   data-zone on .scene is the building key (student.js), 'gate' on the login screen, 'teach' in the console. This theme draws the same
   flat background everywhere. The zone photos of the earlier theme are still in public/art/scenes/ (a night and a day version per
   zone); a theme that wants them back sets background-image per [data-zone] here. The Agora photo is held back until the Indigenous
   education lead has reviewed it (PLAN.md "Respect"). */
body { margin: 0; background: var(--scene-fallback); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; }
.scene {
  position: fixed; inset: 0; z-index: -1;
  background-color: var(--scene-fallback);
  background-image: var(--scene-shards);
  background-repeat: no-repeat;
}

/* ---------- panel ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ---------- display type ---------- */
.display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--text-display); line-height: 1; letter-spacing: 0.01em; margin: 0;
  overflow-wrap: anywhere;
}
.wordmark { text-transform: none; }   /* the app name "core" is always lowercase, even inside an uppercase heading */
.label {
  font-family: var(--font-pixel); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.4;
  color: var(--label); display: inline-flex; align-items: center; gap: 0.7em;
}
.label::before { content: ''; width: 1.1em; height: 0.34em; background: var(--coral); flex: none; transform: skewX(-32deg); }   /* a short paint slash */

/* ---------- hero number with coin ---------- */
.hero { display: flex; align-items: center; gap: 0.25em; font-family: var(--font-display); font-size: var(--text-hero); line-height: 1; color: var(--accent); }
.hero .coin { width: 0.8em; height: 0.8em; flex: none; }
.coin .face { fill: var(--coin-face); }
.coin .rim { fill: none; stroke: var(--coin-rim); stroke-width: 2.5; }
.coin .shine { fill: none; stroke: var(--coin-shine); stroke-width: 2; stroke-linecap: round; }
.coin .mark { fill: var(--coin-rim); font-family: var(--font-display); }

/* ---------- top-right bar ---------- */
.pills { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 16px;
  font: 600 0.875rem var(--font-pixel); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); cursor: pointer;
  background: var(--pill-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-pill); box-shadow: none;
}
.pill:hover { border-color: var(--ice); color: var(--ink); background: var(--pill-bg); }
.pill[aria-pressed='true'] { border-color: var(--ice); color: var(--ink); }
.pill svg { width: 1.25em; height: 1.25em; }

/* ---------- reserved mascot slot, bottom-right ---------- */
.mascot {
  position: fixed; right: 8px; bottom: 0; z-index: 1; pointer-events: none;
  width: var(--mascot-size); height: var(--mascot-size);
  background: var(--mascot-image) right bottom / contain no-repeat;
}
@media (max-width: 720px) { :root { --mascot-size: 0px; } }

/* ---------- focus ---------- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}