/* Sprinto admin + (later) user-facing pages: a "cozy literary" design system.
 *
 * Warm paper-and-ink palette, a characterful serif for headings over a clean
 * sans for data. Everything is driven by the design tokens in :root, so a theme
 * is just a different token block. The night theme in :root ("ink", blue-black)
 * is the default; the light "paper" theme is below under [data-theme="paper"],
 * and the website's pages start in it. */

:root {
  /* Night ("ink") */
  color-scheme: dark;
  --paper: #11151c;
  --surface: #181e28;
  --surface-2: #202835;
  --ink: #e8e9ec;
  --muted: #98a2b3;
  --border: #2c3544;
  --accent: #e0653a;        /* terracotta / sunset */
  --accent-strong: #c8552e;
  --accent-soft: rgba(224, 101, 58, .16);
  /* Text on an --accent fill (a primary button): dark, 5.3:1. White on this
   * accent was 3.45:1, under the 4.5:1 small text needs. */
  --on-accent: #1b1410;
  --amber: #e0a44a;
  --good: #7cbb93;
  --bad: #d9776a;
  /* Text on a --bad fill (Delete): dark, 6:1; white was 3.1:1. */
  --on-bad: #1b1410;
  --link: #f0a473;
  --break: #9fb4da;         /* a chain's break, on the lounge's bar and ring */

  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;

  --radius: 9px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 22px rgba(0, 0, 0, .22);
}

/* The light "paper" theme: the website's pages start in it, and a writer can
 * pick it for the Focus Lounge too (Settings, Colors). */
:root[data-theme="paper"] {
  color-scheme: light;
  --paper: #f6f0e4;
  --surface: #fdfaf2;
  --surface-2: #efe7d6;
  --ink: #2b2420;
  /* The text colors below are dark enough for small text (4.5:1) on all
   * three backgrounds above, which the Lounge's tags and notes are. */
  --muted: #665b4b;
  --border: #e2d7c2;
  --accent: #b94a25;        /* white text on it is 5:1 */
  --accent-strong: #a33f1f;
  --accent-soft: rgba(185, 74, 37, .14);
  --on-accent: #fff;
  --amber: #865c12;
  --good: #33694f;
  --bad: #a33c26;
  --on-bad: #fff;
  --link: #a5441a;
  --break: #53648a;
  --shadow: 0 1px 2px rgba(80, 60, 30, .08), 0 6px 22px rgba(80, 60, 30, .10);
}

/* Other night palettes, which a writer picks in Settings, Colors (see
 * `web/colors.rs`); on the admin panel, `?theme=charcoal` (or forest, plum,
 * terracotta, ink). Each one overrides only the surface and text tokens above
 * (the accent and phase colors are shared), so a new token needs adding here
 * only if it depends on the background. The `--c-*` lines are the admin
 * charts' grid and axis colors (app.css), so the charts sit on the same hue. */
:root[data-theme="charcoal"] {
  --paper: #17181a;
  --surface: #202124;
  --surface-2: #292a2e;
  --ink: #ece8e1;
  --muted: #a5a39f;
  --border: #36383d;
  --c-axis: #8f9196; --c-grid: #2a2c30; --c-grid2: #222326; --c-rule: #4a4c52; --c-inset: #1c1d20;
}

/* Terracotta: the warm brown night theme that was the default until 2026-10. */
:root[data-theme="terracotta"] {
  --paper: #1c1813;
  --surface: #26201a;
  --surface-2: #2f2820;
  --ink: #efe6d6;
  --muted: #a99d89;
  --border: #3a3128;
  --link: #e9a06a;
  --good: #79b18d;
  --break: #8fa3c7;
  --c-inset: #1c2129;
}

:root[data-theme="forest"] {
  --paper: #121a16;
  --surface: #19241f;
  --surface-2: #212e28;
  --ink: #e9ebe3;
  --muted: #9daca3;
  --border: #2d3d35;
  --link: #eba26e;
  --good: #8bcaa0;
  --break: #93a8cc;
  --c-axis: #8fa096; --c-grid: #26332d; --c-grid2: #1e2924; --c-rule: #45574e; --c-inset: #17201c;
}

:root[data-theme="plum"] {
  --paper: #18141d;
  --surface: #211c28;
  --surface-2: #2a2433;
  --ink: #eee7ee;
  --muted: #aaa0b4;
  --border: #383043;
  --link: #eda271;
  --good: #7fb894;
  --break: #9aaad4;
  --c-axis: #988fa5; --c-grid: #2e2738; --c-grid2: #251f2d; --c-rule: #4f4560; --c-inset: #1d1823;
}

* { box-sizing: border-box; }