/* The Lab Games — design tokens. Every color, font size, space, radius and shadow on the site comes from here.
 * Loaded on every page (simulations included) before site.css; everything is --tlg-* so it never collides with a
 * simulation's own variables. Dark mode: html[data-theme="dark"], set by dark-mode.js from the header toggle.
 * Contrast: every text/background pair below meets WCAG AA (4.5:1) in both themes; see docs in README.md.
 * Palette (Sept 2026 rebrand): retro-future. Express teal, Nebula purple, Rocket orange, Jacket red, Chrome grey, space navy.
 */
:root {
  /* ── Type: one family, one scale ─────────────────────────────────────── */
  --tlg-font-display: "Righteous", "Arial Black", Arial, sans-serif;  /* logo text and home tile titles only */
  --tlg-font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tlg-text-sm: 14px;     /* the smallest text anywhere */
  --tlg-text-md: 16px;     /* body */
  --tlg-text-lg: 18px;
  --tlg-text-xl: 22px;
  --tlg-text-2xl: 28px;
  --tlg-text-3xl: 36px;
  --tlg-weight-regular: 400;
  --tlg-weight-bold: 700;
  --tlg-weight-link: 600;   /* Atkinson Hyperlegible ships 400 + 700, so this renders at 700 */
  --tlg-leading-body: 1.5;
  --tlg-leading-heading: 1.2;
  --tlg-leading-tight: 1;  /* single-line UI: badges, big numbers */
  --tlg-tracking-caps: .06em;
  --tlg-tracking-code: .14em;
  --tlg-prose: 70ch;
  /* the join-code projector view is sized to the room, not the page */
  --tlg-text-projector-code: min(21vw, 42vh);
  --tlg-text-projector-title: min(6.5vw, 10vh);
  --tlg-text-projector-sub: min(3.6vw, 5.5vh);
  --tlg-text-projector-label: min(2.6vw, 4vh);

  /* ── Spacing: 4px steps ───────────────────────────────────────────────── */
  --tlg-space-1: 4px;
  --tlg-space-2: 8px;
  --tlg-space-3: 12px;
  --tlg-space-4: 16px;
  --tlg-space-5: 20px;
  --tlg-space-6: 24px;
  --tlg-space-8: 32px;
  --tlg-space-10: 40px;
  --tlg-space-12: 48px;
  --tlg-space-16: 64px;
  --tlg-space-20: 80px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --tlg-radius-sm: 8px;    /* inputs, buttons, chips, cells */
  --tlg-radius-lg: 16px;   /* cards, panels, dialogs */
  --tlg-radius-full: 999px;/* pills and circles (a shape, not a third radius) */
  --tlg-border-width: 1px;
  --tlg-border-width-strong: 2px;
  --tlg-tap: 44px;         /* minimum touch target */
  --tlg-page-w: 1280px;
  --tlg-header-h: 68px;    /* the sticky site header */

  /* ── Focus ────────────────────────────────────────────────────────────── */
  --tlg-focus-width: 3px;
  --tlg-focus-offset: 2px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --tlg-ease: .15s ease;

  /* ── Neutrals (light): cool greys ──────────────────────────────────────── */
  --tlg-bg: #f2f4f6;             /* page */
  --tlg-bg-band: #e6eaee;        /* full-width bands */
  --tlg-surface: #ffffff;        /* cards */
  --tlg-surface-2: #eef1f4;      /* sunken: chips, table headers, empty cells */
  --tlg-surface-3: #e2e7ec;      /* hover on sunken */
  --tlg-border: #d3d9df;
  --tlg-border-strong: #7a8591;  /* input and control outlines (3.7:1 on white) */
  --tlg-text: #15191f;           /* 17:1 on white */
  --tlg-text-muted: #3f4754;     /* secondary text, 9:1 on white */
  --tlg-text-subtle: #4a5360;    /* tertiary text, 7:1 on white, 6:1 on surface-2 */
  --tlg-on-solid: #ffffff;       /* text on any -solid-strong color below */
  --tlg-scrim: rgb(10 15 25 / .5);
  --tlg-grid-line: rgb(27 34 56 / .06);
  /* Space navy: the site header, the footer and the home hero's starfield, the same in both themes. */
  --tlg-space-navy: #1b2238;
  --tlg-header-bg: var(--tlg-space-navy);
  --tlg-header-text: #edeff2;    /* 13.7:1 on the navy */
  --tlg-header-muted: #c3ccd5;   /* 10:1 on the navy */
  --tlg-header-rule: #3fb5a3;    /* the header's bottom border and the current-course underline */
  --tlg-header-control: #8c98a4; /* control outlines on the navy (5.5:1) */
  --tlg-star: rgb(237 239 242 / .5);
  --tlg-star-dim: rgb(237 239 242 / .22);
  /* home page text on the navy starfield */
  --tlg-home-text: #edeff2;
  --tlg-home-text-muted: #c3ccd5;
  --tlg-home-focus: #7fd8c9;
  --tlg-drawer-bg: #edeff2;      /* a home tile's open activity list */

  /* ── Primary (links, main buttons, focus) ─────────────────────────────── */
  --tlg-primary: #0e5e5a;        /* 7.6:1 on white; white text on it 7.6:1 */
  --tlg-primary-hover: #0a4744;
  --tlg-primary-tint: #e0f3f0;
  --tlg-link: #0e6e68;           /* 6.1:1 on white */
  --tlg-focus: #0e6e68;

  /* ── Subjects ─────────────────────────────────────────────────────────────
     solid: the brand color, used for tile and hero backgrounds whose text carries a black outline.
     solid-strong: a darker solid for plain white text (buttons, badges); biology, earth and games solids
       are too light for white text, chemistry and physics pass as they are.
     fg: text/icons on page surfaces. tint: soft backgrounds (about a 12% wash of the solid). */
  --tlg-biology-solid: #3fb5a3;   --tlg-biology-solid-strong: #1f8375;   --tlg-biology-fg: #0e5e5a;   --tlg-biology-tint: #e8f6f4;
  --tlg-chemistry-solid: #6e3f8f; --tlg-chemistry-solid-strong: #6e3f8f; --tlg-chemistry-fg: #5a2f78; --tlg-chemistry-tint: #eee8f2;
  --tlg-earth-solid: #f39237;     --tlg-earth-solid-strong: #b15e19;     --tlg-earth-fg: #8f4308;     --tlg-earth-tint: #fef2e7;
  --tlg-physics-solid: #d2362f;   --tlg-physics-solid-strong: #d2362f;   --tlg-physics-fg: #a3241f;   --tlg-physics-tint: #fae7e6;
  --tlg-games-solid: #4a7fd6;     --tlg-games-solid-strong: #2b5797;     --tlg-games-fg: #23498f;     --tlg-games-tint: #e8eff9;
  /* Home tiles and course banners: plain text, no outline. Biology and Earth keep their bright brand color with navy
     text (6.3:1, 6.7:1); Chemistry, Physics and Games use the solid-strong color with white text (7.6:1, 4.9:1, 7.2:1).
     The tile carries its own background, so these are the same in both themes. */
  --tlg-biology-tile-bg: #3fb5a3;   --tlg-biology-tile-text: #1b2238;
  --tlg-chemistry-tile-bg: #6e3f8f; --tlg-chemistry-tile-text: #ffffff;
  --tlg-earth-tile-bg: #f39237;     --tlg-earth-tile-text: #1b2238;
  --tlg-physics-tile-bg: #d2362f;   --tlg-physics-tile-text: #ffffff;
  --tlg-games-tile-bg: #2b5797;     --tlg-games-tile-text: #ffffff;

  /* ── Status: always a color + an icon + a label ───────────────────────── */
  --tlg-status-done-fg: #166534;     --tlg-status-done-bg: #dcfce7;     /* ✓ Turned in */
  --tlg-status-progress-fg: #854d0e; --tlg-status-progress-bg: #fef3c7; /* ◐ In progress */
  --tlg-status-none-fg: #3f4754;     --tlg-status-none-bg: #eef1ec;     /* – Not started */
  --tlg-status-missing-fg: #b91c1c;  --tlg-status-missing-bg: #fee2e2; /* ⚠ Missing ID */
  --tlg-status-done-solid: #15803d;  --tlg-status-progress-solid: #ca8a04; --tlg-status-missing-solid: #dc2626;
  --tlg-danger-fg: #b91c1c;          --tlg-danger-bg: #fee2e2;

  /* ── Brand pieces ─────────────────────────────────────────────────────── */
  --tlg-logo-a: #edeff2;         /* the wordmark sits on the navy header in both themes */
  --tlg-logo-b: #3fb5a3;         /* 6.3:1 on the navy */
  --tlg-footer-bg: var(--tlg-space-navy);
  --tlg-footer-text: #edeff2;
  --tlg-footer-muted: #c3ccd5;   /* 10:1 on the footer */
  --tlg-footer-logo-a: #edeff2;
  --tlg-footer-logo-b: #3fb5a3;
  --tlg-footer-rule: rgb(255 255 255 / .14);
  /* footer column headings: the subjects' dark-mode fg colors (all 7:1 or more on the navy) */
  --tlg-footer-h1: #7fd8c9;
  --tlg-footer-h2: #c9a6e0;
  --tlg-footer-h3: #f9b872;
  --tlg-footer-h4: #f28b84;
  --tlg-band-bg: #1b2238;        /* dark bands (the .tlg-btn--light buttons) */
  --tlg-band-text: #ffffff;
  --tlg-band-muted: #c3ccd5;
  --tlg-band-accent: #7fd8c9;
  --tlg-code-bg: #0f172a;        /* CSV preview */
  --tlg-code-text: #e2e8f0;
  --tlg-toast-bg: #0f172a;
  --tlg-toast-text: #ffffff;
  --tlg-toast-danger-bg: #991b1b;
  /* projector view stays light in both themes so it reads from the back of the room */
  --tlg-projector-bg: #ffffff;
  --tlg-projector-text: #0b1220;
  --tlg-projector-muted: #3f4754;
  --tlg-projector-accent: #0e5e5a;
  --tlg-projector-ok: #166534;

  /* ── Elevation: two levels ────────────────────────────────────────────── */
  --tlg-shadow-1: 0 1px 2px rgb(21 25 31 / .06), 0 6px 16px -8px rgb(21 25 31 / .18);
  --tlg-shadow-2: 0 20px 48px -16px rgb(21 25 31 / .35);

  color-scheme: light;
}

html[data-theme="dark"] {
  --tlg-bg: #11161f;
  --tlg-bg-band: #151c28;
  --tlg-surface: #1a2230;
  --tlg-surface-2: #232d3d;
  --tlg-surface-3: #2d394b;
  --tlg-border: #364256;
  --tlg-border-strong: #8290a3;
  --tlg-text: #f2f4f6;
  --tlg-text-muted: #c9d1d9;
  --tlg-text-subtle: #b3bdc7;    /* 7:1 on surface-2 */
  --tlg-on-solid: #ffffff;
  --tlg-scrim: rgb(0 0 0 / .6);
  --tlg-grid-line: rgb(200 220 255 / .045);
  --tlg-drawer-bg: #222a3a;

  --tlg-primary: #1c8277;        /* white text on it 4.7:1 (the brief's #1F8F82 is 4.0:1, so one step darker) */
  --tlg-primary-hover: #176b62;
  --tlg-primary-tint: #12302d;
  --tlg-link: #7fd8c9;
  --tlg-focus: #7fd8c9;

  /* solids and solid-strongs are the same in both themes; fg becomes light for dark surfaces;
     tint is the solid darkened to about 15% lightness */
  --tlg-biology-fg: #7fd8c9;   --tlg-biology-tint: #143933;
  --tlg-chemistry-fg: #c9a6e0; --tlg-chemistry-tint: #291735;
  --tlg-earth-fg: #f9b872;     --tlg-earth-tint: #482504;
  --tlg-physics-fg: #f28b84;   --tlg-physics-tint: #3f100e;
  --tlg-games-fg: #9dbcf0;     --tlg-games-tint: #14223a;

  --tlg-status-done-fg: #bbf7d0;     --tlg-status-done-bg: #14532d;
  --tlg-status-progress-fg: #fde68a; --tlg-status-progress-bg: #4a3208;
  --tlg-status-none-fg: #c9d1d9;     --tlg-status-none-bg: #232d3d;
  --tlg-status-missing-fg: #fecaca;  --tlg-status-missing-bg: #4c1414;
  --tlg-danger-fg: #fecaca;          --tlg-danger-bg: #4c1414;

  --tlg-footer-bg: #141a2c;
  --tlg-code-bg: #0b1117;
  --tlg-toast-bg: #f2f4f6;
  --tlg-toast-text: #11161f;

  --tlg-shadow-1: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -8px rgb(0 0 0 / .6);
  --tlg-shadow-2: 0 20px 48px -16px rgb(0 0 0 / .8);

  color-scheme: dark;
}

/* One accent per subject. Anything inside [data-course="…"] reads --tlg-subject-*. --tlg-subject-solid carries plain
 * white text (buttons, badges, the current nav link), so it is the solid-strong color; --tlg-subject-bright is the
 * brand solid, for backgrounds whose text has a black outline (home tiles, course heroes). */
:root { --tlg-subject-solid: var(--tlg-primary); --tlg-subject-bright: var(--tlg-primary); --tlg-subject-fg: var(--tlg-link); --tlg-subject-tint: var(--tlg-primary-tint); --tlg-subject-tile-bg: var(--tlg-primary); --tlg-subject-tile-text: #ffffff; }
[data-course="biology"] { --tlg-subject-solid: var(--tlg-biology-solid-strong); --tlg-subject-bright: var(--tlg-biology-solid); --tlg-subject-fg: var(--tlg-biology-fg); --tlg-subject-tint: var(--tlg-biology-tint); --tlg-subject-tile-bg: var(--tlg-biology-tile-bg); --tlg-subject-tile-text: var(--tlg-biology-tile-text); }
[data-course="chemistry"] { --tlg-subject-solid: var(--tlg-chemistry-solid-strong); --tlg-subject-bright: var(--tlg-chemistry-solid); --tlg-subject-fg: var(--tlg-chemistry-fg); --tlg-subject-tint: var(--tlg-chemistry-tint); --tlg-subject-tile-bg: var(--tlg-chemistry-tile-bg); --tlg-subject-tile-text: var(--tlg-chemistry-tile-text); }
[data-course="earth-science"] { --tlg-subject-solid: var(--tlg-earth-solid-strong); --tlg-subject-bright: var(--tlg-earth-solid); --tlg-subject-fg: var(--tlg-earth-fg); --tlg-subject-tint: var(--tlg-earth-tint); --tlg-subject-tile-bg: var(--tlg-earth-tile-bg); --tlg-subject-tile-text: var(--tlg-earth-tile-text); }
[data-course="physics"] { --tlg-subject-solid: var(--tlg-physics-solid-strong); --tlg-subject-bright: var(--tlg-physics-solid); --tlg-subject-fg: var(--tlg-physics-fg); --tlg-subject-tint: var(--tlg-physics-tint); --tlg-subject-tile-bg: var(--tlg-physics-tile-bg); --tlg-subject-tile-text: var(--tlg-physics-tile-text); }
[data-course="games"] { --tlg-subject-solid: var(--tlg-games-solid-strong); --tlg-subject-bright: var(--tlg-games-solid); --tlg-subject-fg: var(--tlg-games-fg); --tlg-subject-tint: var(--tlg-games-tint); --tlg-subject-tile-bg: var(--tlg-games-tile-bg); --tlg-subject-tile-text: var(--tlg-games-tile-text); }

/* Legacy names from the previous shell. Several simulations (Microscope Slide Lab, Cell Division, Nuclear Chemistry,
 * Currents, Fault Lines) style themselves with these, so they stay as aliases of the tokens above. Don't use them in
 * new code. The subject aliases follow the current palette, using the -solid-strong colors so white text on them passes AA. */
:root {
  --tlg-page-bg: var(--tlg-bg);
  --tlg-ink: var(--tlg-text);
  --tlg-muted: var(--tlg-text-muted);
  --tlg-chip-bg: var(--tlg-surface-2);
  --tlg-font-heading: var(--tlg-font);
  --tlg-font-body: var(--tlg-font);
  --tlg-radius-card: var(--tlg-radius-lg);
  --tlg-radius-pill: var(--tlg-radius-full);
  --tlg-shadow-card: var(--tlg-shadow-1);
  --tlg-biology: var(--tlg-biology-solid-strong);
  --tlg-chemistry: var(--tlg-chemistry-solid-strong);
  --tlg-chemistry-dark: var(--tlg-chemistry-fg);
  --tlg-earth: var(--tlg-earth-solid-strong);
  --tlg-earth-dark: var(--tlg-earth-fg);
  --tlg-physics: var(--tlg-physics-solid-strong);
  --tlg-games: var(--tlg-games-solid-strong);
}