/* Hanguru brand palette — the ONE place these values live for every page outside the app.
 *
 * Linked by: ja.html zh.html ar.html ru.html fr.html privacy.html hangul-guide.html
 *            topik1-grammar-guide.html ja/hangul-guide.html
 *
 * WHY this file exists: the same nine tokens used to be copy-pasted into each of those pages'
 * own <style> block. On 2026-08-26 the app moved from purple to terracotta and every one of them
 * was missed — for two days a visitor arriving from search saw the brand colour change under them
 * on the way into the app. Nothing warned about it; it was found by eye.
 *
 * The Worker's own admin pages link this file too (ADMIN_PAGE_HEAD_CSS in src/worker.js) — they
 * are served from the same origin as everything else, so being generated server-side was never a
 * reason to copy the palette. They define only --row-alt, which nothing outside them uses.
 *
 * Two copies remain that genuinely CANNOT link this file:
 *   index.html                                    inline on purpose — a render-blocking request
 *                                                 on the app's critical path is not worth it
 *   scripts/generate_content_pages.py  PAGE_CSS   embedded into 77 generated pages
 * plus the <meta name="theme-color"> tags, which are markup and cannot read a CSS variable.
 *
 * test-brand-consistency.mjs asserts all of them still agree with this file. If you change a
 * colour here and that test goes red, change it in the place it names too — do not edit the test.
 */
:root{
  --bg:#fbf7f0;
  --bg2:#f5eee3;
  --card:#ffffff;
  --accent:#d9694a;
  --text:#2b2018;
  --muted:#8a7d6e;
  --tint:#f5eee3;
  --shadow:rgba(217,105,74,.12);
  --shadow-strong:rgba(217,105,74,.3);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17171a;
    --bg2:#1f1f22;
    --card:#26262a;
    --accent:#f0805a;
    --text:#f5ede3;
    --muted:#b3a290;
    /* Must differ from --card. They were identical from 2026-08-28 until 2026-08-30, which made
       every tint-on-a-card element invisible in dark mode — progress-bar tracks, badge pills, the
       streak dots, and on the generated pages the .level-badge and the item-block divider. */
    --tint:#2f2f35;
    --shadow:rgba(0,0,0,.35);
    --shadow-strong:rgba(0,0,0,.45);
  }
}