/*
  Course Builder — shared design theme
  =====================================
  Canonical color/shape/type tokens for every page in this project: the
  student-facing prototype (prototype/index.html) links this file
  directly, and any future page any agent builds — llm-interface's real
  chat UI, a future ui-qa test harness, a QA-review redesign, whatever
  comes next — should link it too (or copy these exact values) rather
  than inventing a new palette. The point of this file is that there is
  exactly ONE place these values live; if a page's colors disagree with
  this file, the page is wrong, not this file.

  Full rationale + decision history (why these exact colors, what was
  tried and rejected, open questions): data/design-system.md §2.
  Course-list *ordering* rules (unrelated to color): data/course-display-rules.md.

  Usage:
    <link rel="stylesheet" href="../data/theme.css">   (adjust the
    relative path to wherever your page lives relative to data/)
  then reference tokens as var(--token-name) in your own CSS. Don't
  hardcode a hex value that duplicates one of these — if a genuinely new
  color is needed, add it here first (and explain why in
  design-system.md §2) so every page stays in sync automatically.

  Light-only. No dark mode — a prefers-color-scheme dark variant existed
  earlier and was removed 2026-09-27 after repeated "black background"
  feedback despite retuning the light values twice; see design-system.md
  §2 before ever re-adding one.
*/
:root{
  /* ---------- structural: neutrals + interactive accent ----------
     The only tokens a typical page needs for its own chrome (backgrounds,
     borders, text, buttons/links). Blue accent, plain (not hue-biased)
     grays, white ground — literal, direct choices, not a stylized concept. */
  --bg:#ffffff; --panel:#ffffff; --panel-2:#f4f5f4;
  --ink:#1a1a1a; --ink-soft:#6b7280;
  --line:#e5e7eb; --line-strong:#cbd1d9;
  --accent:#007ba7; --accent-soft:#e6f2f6;
  /* Header bar background — exact value given directly. Started as the
     literal "plan"-text color sampled from assets/wordmark.png
     (paleturquoise, #afeeee), lightened once (#cff5f5), then set to this
     exact hex on request. Distinct from --accent-soft above, which is a
     separate hand-blended tint used elsewhere. */
  --accent-pale:#eff8fa;
  --agent:var(--accent-pale); --user:#007ba7; --user-ink:#ffffff;
  /* --panel and --bg are the same white on purpose — this system has no
     separate "page vs. card" shade by default. The one deliberate
     exception: give a repeating box (a course card, a list-item box)
     --panel-2 instead of --panel so it visibly stands out against a white
     page — then flip anything nested INSIDE that box back to --panel, so
     it in turn stands out against the now-gray box. See
     data/design-system.md §2 ("gray box on white") before copying this
     into a new page, and don't reach for a third shade — two is the
     whole system. */

  /* ---------- per-item difficulty badges (easy / medium / hard / very-hard) ----------
     Punchier than the "calm" status tokens below. Reach for calm-g/y/r
     instead by default, INCLUDING for a one-off per-card badge — tried
     punchy there too and it still read "neon" (design-system.md §2/§6).
     These exist for a genuinely momentary flash/highlight (e.g. an
     animation frame), not anything that sits on screen for the life of
     a card or a page load. */
  --easy:#1a7f4b; --easy-bg:#e6f4ec;
  --medium:#5b6270; --medium-bg:#eef0f2;
  --hard:#b06a00; --hard-bg:#fbefdd;
  --vhard:#c0392b; --vhard-bg:#fbe9e7;

  /* ---------- semantic: alerts, not passive status ---------- */
  --ok:#1a7f4b; --warn:#b06a00; --gap:#c0392b;

  /* ---------- calm palette: always-on summary/status UI ----------
     Same-hue, desaturated versions of easy/hard/vhard above. Use THESE
     (not the punchier tokens above) for anything that's continuously
     visible as running status — workload ratings, "requirement met"
     pills, a confirmed-item outline — the punchier versions read as
     "neon" at that frequency (this is exactly the feedback that led to
     calm-g/y/r existing at all — see design-system.md §2/§6). */
  --calm-g:#4d7f63; --calm-g-bg:#eef3f0;
  --calm-y:#9c7a3f; --calm-y-bg:#f4f0e6;
  --calm-r:#a15b56; --calm-r-bg:#f5edec;

  /* ---------- department / subject-area colors ----------
     A frequency-chart/legend color per subject area — e.g. a
     prior-coursework bar chart. NOT for coloring every item's border by
     category — tried once, removed after "too many colors" feedback
     (design-system.md §2). Reach for these only in a genuine legend. */
  --d-english:#7c3aed; --d-math:#2563eb; --d-science:#0891b2; --d-social:#c2410c;
  --d-lang:#be185d; --d-arts:#9333ea; --d-pe:#4d7c0f; --d-cte:#0f766e;
  --d-elective:#64748b; --d-support:#94a3b8; --d-business:#a16207;

  /* ---------- shape / elevation / type ---------- */
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}