/* Shared palette — design tokens only.
 *
 * Kanban predates the shared UI package and has its own component CSS in
 * every page, so it takes the palette rather than the whole stylesheet:
 * loading a full component stylesheet here would restyle every bare <button> on nine pages
 * that already style their own. What has to stay in sync across the fleet
 * is the colour and the type, and that is exactly what this file is.
 *
 * The block below is the token layer. Do not hand-edit
 * the values — change them there and re-copy, or the fleet drifts.
 *
 * Everything after it maps kanban's own token names onto the same colours,
 * so the existing components inherit the house style unchanged.
 */

:root {
  /* Surfaces — warm, never pure white */
  --paper: #f4f1ea;
  --card: #fffdf8;
  --line: #ded7c9;
  --line-strong: #c9c0ae;

  /* Ink */
  --ink: #14120f;
  --ink-soft: #5c574d;
  --ink-faint: #8b8579;

  /* Accents — rust is the only loud colour, used once per screen */
  --rust: #c4351c;
  --rust-soft: #f6e7e3;
  --signal: #ffd400;

  /* States */
  --ok: #2f6f43;
  --ok-soft: #e6f0e7;
  --warn: #8a6116;
  --warn-soft: #fdf3dd;
  --bad: #a32b1c;
  --bad-soft: #fbeae7;

  /* Type */
  --font-display: Fraunces, "Iowan Old Style", Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
             Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --surface: var(--card);
  --surface2: #eae5da;
  --text: var(--ink);
  --muted: var(--ink-soft);
  --border: var(--line);
  --accent: var(--rust);

  /* Rhythm */
  --radius: 6px;
  --radius-pill: 999px;
  --gap: 0.8rem;
  --shadow: 0 1px 2px rgba(20, 18, 15, 0.05);
}

/* ---- kanban's own names ---------------------------------------------
 *
 * These are the tokens the nine kanban pages were written against. They
 * are kept as aliases rather than renamed across 400KB of markup, so the
 * retheme is a palette swap instead of a rewrite.
 */

:root {
  --bg: var(--paper);
  --border-light: #e9e3d6;

  /* Kanban's three semantic colours. "Cart" was the blue that marked
   * anything queued; it becomes rust, which is now the app's one accent. */
  --reorder: var(--bad);
  --reorder-bg: var(--bad-soft);
  --cart: var(--rust);
  --cart-bg: var(--rust-soft);
  --ok-bg: var(--ok-soft);

  --mono: var(--font-mono);
  --sans: var(--font-ui);

  --font-size: 14px;
}

/* ---- dark ------------------------------------------------------------
 *
 * The house colours inverted: darks stay warm (brown-black, not
 * blue-black) and rust is lifted, since #c4351c on near-black fails
 * contrast.
 *
 * The switch is `data-theme` on :root, set by kanban-theme.js — the same
 * mechanism as the rest of the fleet. It has to be :root and not a body
 * class: the aliases above are declared on :root, and `--bg: var(--paper)`
 * is substituted where it is DECLARED. Override --paper on a descendant
 * and --bg keeps the light value it already computed, which is exactly
 * how this file's first version half-applied — header flipping, page
 * staying light. Same element, no surprise.
 */

:root[data-theme="dark"] {
  --paper: #16140f;
  --card: #211e19;
  --line: #3a352c;
  --line-strong: #4a4438;

  --ink: #f2eee4;
  --ink-soft: #a8a294;
  --ink-faint: #857f70;

  --rust: #e35c40;
  --rust-soft: #3a201a;

  --ok: #6fbc85;
  --ok-soft: #1c2c21;
  --warn: #d9ac52;
  --warn-soft: #2e2717;
  --bad: #e2705c;
  --bad-soft: #33201c;

  --surface2: #2b2721;
  --border-light: #2e2a23;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  /* Form controls and scrollbars follow the theme too. */
  color-scheme: dark;
}

/* ---- display face ----------------------------------------------------
 *
 * The one piece of the component layer worth bringing over: the
 * serif headline. Page titles are the only place kanban has anything
 * heading-shaped, so they get it and nothing else does.
 */

.page-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* ---- theme switch ----------------------------------------------------
 *
 * Rendered by kanban-theme.js into the slot beside the app switcher. Styled
 * here rather than in each page so all nine agree — kanban has no shared
 * stylesheet beyond this file.
 */

.theme-toggle {
  background: var(--surface2);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: var(--radius);
  padding: 7px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: all 0.15s;
  /* Without this the switch is flexible, and on a phone the brand text
   * beside it wins the space — it shrank to a 1px sliver against the app
   * switcher and read as simply missing. The brand ellipsises instead. */
  flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--rust); color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
/* One icon per theme: the sun offers the light you'd switch to. */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }