/* Colour tokens and themes, shared by the app and the landing page.

   The landing page has no build step — build:site copies this file to
   dist/themes.css and links it — so it must stay plain CSS with nothing but
   custom properties in it. Anything that styles an element belongs in
   style.css, not here, or the site inherits rules it has no markup for. */

:root {
  --bg: #e7ecf0;
  --card: #ffffff;
  --card-back: #fbefd2;
  --ink: #16233b;
  --muted: #5a6a7f;
  --line: #cfd8e1;
  --saffron: #d99a12;
  --olive: #3f6b4a;
  --error: #a23a2a;
  --serif: 'Literata Variable', 'Literata', 'Iowan Old Style', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

/* Themes.
   `:root` above is Paper, the default. With no data-theme set the OS decides
   between Paper and Ink; picking one pins it. Each block restates every token,
   so nothing leaks from the block it overrides.

   Two selectors per theme on purpose. `:root[data-theme=x]` outranks the
   :not() in the media query below, which is what lets an explicit choice beat
   the OS. The bare `[data-theme=x]` lets the picker put a theme on a single
   swatch, so each chip paints itself in its own colours. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0f1826;
    --card: #1a2536;
    --card-back: #34290f;
    --ink: #e7ecf2;
    --muted: #93a1b5;
    --line: #2c3a50;
    --saffron: #f0b43a;
    --olive: #7fb08a;
    --error: #f08b78;
    color-scheme: dark;
  }
}

/* --- Light ---------------------------------------------------------------- */

:root[data-theme='paper'], [data-theme='paper'] {
  --bg: #e7ecf0;
  --card: #ffffff;
  --card-back: #fbefd2;
  --ink: #16233b;
  --muted: #5a6a7f;
  --line: #cfd8e1;
  --saffron: #d99a12;
  --olive: #3f6b4a;
  --error: #a23a2a;
  color-scheme: light;
}

:root[data-theme='sepia'], [data-theme='sepia'] {
  --bg: #ece1cf;
  --card: #fbf6ec;
  --card-back: #eedcb2;
  --ink: #3a2e20;
  --muted: #776550;
  --line: #d9c8ad;
  --saffron: #a9761a;
  --olive: #536d3d;
  --error: #9e4029;
  color-scheme: light;
}

:root[data-theme='rose'], [data-theme='rose'] {
  --bg: #f7e4e8;
  --card: #fffafb;
  --card-back: #fbd9e2;
  --ink: #3a1f2a;
  --muted: #8a5c6a;
  --line: #ecc9d2;
  --saffron: #c07a1e;
  --olive: #4f7050;
  --error: #b83a56;
  color-scheme: light;
}

:root[data-theme='lavender'], [data-theme='lavender'] {
  --bg: #ebe7f6;
  --card: #fdfbff;
  --card-back: #e6dcf7;
  --ink: #241d3a;
  --muted: #665c85;
  --line: #d8d0ec;
  --saffron: #a5761f;
  --olive: #4a6b52;
  --error: #a93c52;
  color-scheme: light;
}

:root[data-theme='mint'], [data-theme='mint'] {
  --bg: #dcefe2;
  --card: #f8fffa;
  --card-back: #d2ebcf;
  --ink: #16302a;
  --muted: #4f7268;
  --line: #c2ddcd;
  --saffron: #9c7a15;
  --olive: #2f6e4f;
  --error: #a53f33;
  color-scheme: light;
}

/* --- Dark ------------------------------------------------------------------ */

:root[data-theme='ink'], [data-theme='ink'] {
  --bg: #0f1826;
  --card: #1a2536;
  --card-back: #34290f;
  --ink: #e7ecf2;
  --muted: #93a1b5;
  --line: #2c3a50;
  --saffron: #f0b43a;
  --olive: #7fb08a;
  --error: #f08b78;
  color-scheme: dark;
}

:root[data-theme='forest'], [data-theme='forest'] {
  --bg: #0d1a13;
  --card: #16261d;
  --card-back: #24401f;
  --ink: #e3efe5;
  --muted: #8da899;
  --line: #253a2d;
  --saffron: #dfb457;
  --olive: #74c08d;
  --error: #ef8f79;
  color-scheme: dark;
}

/* Pulled well away from Ink: that was navy on navy. This one is properly
   cyan, in the background as much as in the accents. */
:root[data-theme='ocean'], [data-theme='ocean'] {
  --bg: #06222b;
  --card: #0e3542;
  --card-back: #10495a;
  --ink: #dcf1f6;
  --muted: #84b2bf;
  --line: #1a4655;
  --saffron: #f2c45c;
  --olive: #5fd0b4;
  --error: #f79284;
  color-scheme: dark;
}

:root[data-theme='plum'], [data-theme='plum'] {
  --bg: #17101f;
  --card: #241a2e;
  --card-back: #431b33;
  --ink: #efe6f3;
  --muted: #a595b0;
  --line: #362a42;
  --saffron: #e8b559;
  --olive: #86c59a;
  --error: #f4907f;
  color-scheme: dark;
}

:root[data-theme='cocoa'], [data-theme='cocoa'] {
  --bg: #1b1410;
  --card: #2a201a;
  --card-back: #473520;
  --ink: #f2e8df;
  --muted: #b39e8c;
  --line: #3d2f26;
  --saffron: #e6b45e;
  --olive: #8cc08a;
  --error: #f0917c;
  color-scheme: dark;
}