/* theme.css - the one theme file every page loads, right after theme-boot.js and
   before any other stylesheet. It holds the color tokens for light and dark, the
   text sizes and every palette. No other stylesheet defines these at :root. */
:root {
  --paper:#f3f2ee; --card:#fff; --card2:#faf9f6; --ink:#1f2328; --muted:#5f656c;
  --line:#dcdad3; --teal:#12716a; --teal-ink:#0c5751; --teal-wash:#e4efee; --teal-line:#cfe3e1;
  --on-accent:#fff;
  /* reform 10-13: the sidebar used to always be dark, in every theme - it now matches
     whatever the rest of the console is wearing (same surface and text as --card/--ink),
     so it is light in light mode with dark, readable text, like everything else on screen. */
  --sidebar:#fff; --sidebar-ink:#1f2328; --sidebar-line:#dcdad3;
  --code-inline:#eceae4; --notice-bg:#fbf3e2; --notice-line:#ecd9ad; --notice-ink:#6a4e14;
  --err-bg:#fbeae7; --err-line:#e6b6ae; --red:#b23b2e; --amber:#8a5a00; --fs:15px;
  /* Terminal, log and code blocks stay dark in both modes. */
  --code-bg:#0f1318; --code-ink:#d6dde4;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,monospace;
  color-scheme:light;
}
html[data-theme=dark]{
  --paper:#16191d; --card:#1e2227; --card2:#252a31; --ink:#e4e9ee; --muted:#96a0aa;
  --line:#2e353d; --teal:#2a9d92; --teal-ink:#8fd6cb; --teal-wash:#173532; --teal-line:#245049;
  /* Text on the accent. White fails 4.5:1 on every brighter dark-mode accent, so dark
     mode puts near-black text on it instead (the accents themselves stay as they are). */
  --on-accent:#0b1215;
  --sidebar:#1e2227; --sidebar-ink:#e4e9ee; --sidebar-line:#2e353d;
  --code-inline:#2a3138; --notice-bg:#332d1c; --notice-line:#5a4a22; --notice-ink:#e6cf8a;
  --err-bg:#3a2320; --err-line:#6b3a33; --red:#f08b7f; --amber:#e0b050;
  color-scheme:dark;
}
html[data-size=small]{--fs:14px}
html[data-size=large]{--fs:17px}

/* ============================ THEMES (palettes) ============================
   Every palette recolors the accent ramp (--teal* tokens are the app's single
   accent, used by buttons, links, focus rings, chips, the guide banner and
   active steps) and tints the sidebar, for BOTH light and dark. The neutral
   base (paper / card / ink / line) is shared per mode, so contrast and legibility
   stay consistent while each theme feels distinct. Default (no attribute, or
   "teal") uses the :root / [data-theme=dark] values above. Text on an accent is
   var(--on-accent): white in light mode, near-black in dark mode, at least 4.5:1 on
   every accent (tests/test_pr_g54_contrast.py checks every palette in both modes). */

/* Indigo */
html[data-palette=indigo]{--teal:#4f46e5;--teal-ink:#3730a3;--teal-wash:#eceafe;--teal-line:#d7d3f7}
html[data-palette=indigo][data-theme=dark]{--teal:#7b74ee;--teal-ink:#c3bff8;--teal-wash:#211f45;--teal-line:#39346a}
/* Violet */
html[data-palette=violet]{--teal:#7c3aed;--teal-ink:#5b21b6;--teal-wash:#f2e9fe;--teal-line:#e2d2fb}
html[data-palette=violet][data-theme=dark]{--teal:#9d6ff0;--teal-ink:#d3bbf7;--teal-wash:#2a1d47;--teal-line:#463370}
/* Azure */
html[data-palette=azure]{--teal:#1667d4;--teal-ink:#0f4c9c;--teal-wash:#e6f0fc;--teal-line:#c9def8}
html[data-palette=azure][data-theme=dark]{--teal:#3f8ae5;--teal-ink:#9ec8f5;--teal-wash:#132a45;--teal-line:#244a72}
/* Emerald */
html[data-palette=emerald]{--teal:#0b7a4c;--teal-ink:#0a6b43;--teal-wash:#e4f5ed;--teal-line:#c6e9d7}
html[data-palette=emerald][data-theme=dark]{--teal:#16a86a;--teal-ink:#68d6a4;--teal-wash:#123528;--teal-line:#1f5540}
/* Rose */
html[data-palette=rose]{--teal:#c62a54;--teal-ink:#93213f;--teal-wash:#fce8ee;--teal-line:#f6cbd7}
html[data-palette=rose][data-theme=dark]{--teal:#df5876;--teal-ink:#f4a8ba;--teal-wash:#3a1f28;--teal-line:#63333f}
/* Copper */
html[data-palette=copper]{--teal:#a85826;--teal-ink:#7f3f19;--teal-wash:#fbeade;--teal-line:#f0d2ba}
html[data-palette=copper][data-theme=dark]{--teal:#cf7b3f;--teal-ink:#eebf97;--teal-wash:#38271a;--teal-line:#5e4128}
/* Graphite (neutral, minimal) */
html[data-palette=slate]{--teal:#475569;--teal-ink:#334155;--teal-wash:#eef1f5;--teal-line:#d6dde6}
html[data-palette=slate][data-theme=dark]{--teal:#7386a0;--teal-ink:#c2ccda;--teal-wash:#222a35;--teal-line:#3a4655}

/* Midnight and Paper are whole token sets (surfaces, text, lines and the accent ramp), not only an
   accent: Midnight is a cool neutral that goes to near-black in dark mode, Paper a warm cream that
   goes to a warm brown-black. Both have to pass tests/test_pr_g54_contrast.py in both modes. */
html[data-palette=midnight]{--paper:#eef0f4;--card:#fff;--card2:#f6f7fa;--ink:#13161b;--muted:#545b66;--line:#d4d8e0;--code-inline:#e4e7ed;--teal:#2f49c9;--teal-ink:#25399c;--teal-wash:#e6eafa;--teal-line:#cbd3f3;--on-accent:#fff;--sidebar:#fff;--sidebar-ink:#13161b;--sidebar-line:#d4d8e0}
html[data-palette=midnight][data-theme=dark]{--paper:#08090c;--card:#101216;--card2:#171a1f;--ink:#e8ebf0;--muted:#98a0ac;--line:#252932;--code-inline:#1c2027;--teal:#6c8cf0;--teal-ink:#b4c4fa;--teal-wash:#141c36;--teal-line:#26335f;--on-accent:#0b1215;--sidebar:#101216;--sidebar-ink:#e8ebf0;--sidebar-line:#252932}
html[data-palette=paper]{--paper:#f5efe3;--card:#fffdf8;--card2:#faf4e8;--ink:#2a251e;--muted:#675e50;--line:#ded3bd;--code-inline:#ece3d0;--teal:#2f5778;--teal-ink:#244560;--teal-wash:#e6edf2;--teal-line:#cbd9e3;--on-accent:#fff;--sidebar:#fffdf8;--sidebar-ink:#2a251e;--sidebar-line:#ded3bd}
html[data-palette=paper][data-theme=dark]{--paper:#1a1713;--card:#231f19;--card2:#2b261f;--ink:#efe8d9;--muted:#ab9f8b;--line:#3a3328;--code-inline:#2f291f;--teal:#7ba3c6;--teal-ink:#bcd5ea;--teal-wash:#1c2833;--teal-line:#2f4559;--on-accent:#0b1215;--sidebar:#231f19;--sidebar-ink:#efe8d9;--sidebar-line:#3a3328}
