/* The design tokens: the only stylesheet with colour literals. Light is the default; theme.js sets
   data-theme="dark" (for "auto" it follows the system). Colour carries meaning: violet is the AI,
   teal is AI text a person has edited, green is done, amber needs a look, red went wrong. */
:root {
  color-scheme: light;
  --bg: #f7f5f0; --raised: #ffffff; --sunk: #eeeae2;
  --ink: #1d1b18; --muted: #5f594f; --faint: #8a8377; --hair: #e6e1d8;
  --action: #1d1b18; --action-ink: #ffffff;
  --ai: #6a3fc4; --ai-tint: #efe9fb;
  --edited: #0b6a78; --edited-tint: #e1f2f3;
  --ok: #1e7144; --ok-tint: #e2f2e7;
  --warn: #8a5300; --warn-tint: #fbefd6;
  --bad: #b42318; --bad-tint: #fbe6e3;
  --focus: #2f6fec;
  --shadow-float: 0 12px 32px rgb(20 16 10 / .14), 0 2px 6px rgb(20 16 10 / .08);
  --scrim: rgb(20 16 10 / .35);

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --script: "Courier Prime", "Courier New", Courier, monospace;

  /* The animatic keeps its black stage in both themes. */
  --stage: #000; --stage-ink: #fff; --stage-ink-dim: #ddd;
  --stage-veil: rgb(0 0 0 / .67); --stage-veil-strong: rgb(0 0 0 / .8);
  /* The narrator is sepia, not violet: violet means the AI. */
  --narration-veil: rgb(44 30 10 / .74); --narration-ink: #fff4dc;

  --ins: var(--ok-tint); --del: var(--bad-tint);

  /* The Sinossi page: a tint per kind of change for a row, a solid one for the trail dots.
     Restored (olive), card and moved take their own hues, apart from the AI violet and the edited teal. */
  --syn-added: var(--ok-tint); --syn-added-solid: var(--ok);
  --syn-omitted: var(--bad-tint); --syn-omitted-solid: var(--bad);
  --syn-restored: #e9efc4; --syn-restored-solid: #5c6b00;
  --syn-text: var(--warn-tint); --syn-text-solid: var(--warn);
  --syn-card: #f9e4ef; --syn-card-solid: #a8326e;
  --syn-moved: #e0ebfb; --syn-moved-solid: #1f5fbf;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151412; --raised: #1e1c19; --sunk: #282521;
  --ink: #ede9e2; --muted: #a69e92; --faint: #7d766b; --hair: #2f2b27;
  --action: #ede9e2; --action-ink: #151412;
  --ai: #b9a1ff; --ai-tint: #2c2442;
  --edited: #5cc8d4; --edited-tint: #14302f;
  --ok: #6fd09a; --ok-tint: #16301f;
  --warn: #e8b65a; --warn-tint: #372b12;
  --bad: #ff8f80; --bad-tint: #3d1c18;
  --focus: #7ea8ff;
  --shadow-float: 0 12px 32px rgb(0 0 0 / .5);
  --scrim: rgb(0 0 0 / .55);
  --syn-restored: #2a2f12; --syn-restored-solid: #c3d45a;
  --syn-card: #3b1d2d; --syn-card-solid: #f08dbb;
  --syn-moved: #172a47; --syn-moved-solid: #7fb0ff;
}