/* Colour tokens, light and dark. Everything else uses these variables, never raw colours.
   --tc-* and --hl-* are the note text colours and highlights. */

:root {
  color-scheme: light;
  --bg: #ede9de;
  --surface: #e5e0d2;
  --sheet: #f5f2ea;
  --tab: #e5e0d2;
  --fg: #3d3929;
  --muted: #8a8470;
  --line: #dcd6c6;
  --accent: #c15f3c;
  --accent-soft: #f2d9c8;
  --ok: #4f8a3c;
  --warn: #b5651d;
  --danger: #b33a2b;
  --tc-red: #c62828; --tc-orange: #c25e00; --tc-green: #2e7d32; --tc-blue: #1f5fbf; --tc-purple: #7b3fb8; --tc-gray: #7a8593;
  --hl-yellow: #f6e59a; --hl-green: #d4e8c8; --hl-blue: #d6e2f2; --hl-pink: #f4d6dc; --hl-orange: #f2d9c8;
  --font-ui: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-text: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-data: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* the tick in a checked checkbox (an image file: the CSP blocks data: images) */
  --check-img: url("/img/check-white.svg");
}

/* Dark comes in five looks (data-dark on <html>, set by core/theme.js; blue when unset). Each look
   sets the --d-* palette; dark mode copies it into the real tokens. Light ignores the look. */
:root,
:root[data-dark="blue"] {
  --d-bg: #0c0f14; --d-sheet: #121721; --d-fg: #c3d4ea; --d-muted: #66778e; --d-line: #1f2836; --d-tab: #0f131a; --d-accent: #6aa8ff; --d-soft: #1e3557;
  --d-check: url("/img/check-white.svg");
}
:root[data-dark="claude"] { --d-bg: #1f1e1b; --d-sheet: #2a2824; --d-fg: #e8e2d4; --d-muted: #8a8475; --d-line: #3a3731; --d-tab: #24221f; --d-accent: #d97757; --d-soft: #5a3426; }
:root[data-dark="mono"] { --d-check: url("/img/check-black.svg"); --d-bg: #0a0a0a; --d-sheet: #111111; --d-fg: #e6e6e6; --d-muted: #7d7d7d; --d-line: #2a2a2a; --d-tab: #0e0e0e; --d-accent: #ffffff; --d-soft: #333333; }
:root[data-dark="green"] { --d-bg: #0d1110; --d-sheet: #141a17; --d-fg: #b8e6c4; --d-muted: #67806f; --d-line: #23302a; --d-tab: #101614; --d-accent: #6fdc8c; --d-soft: #1f3a2a; }
:root[data-dark="amber"] { --d-bg: #110f0b; --d-sheet: #18150f; --d-fg: #f0d3a0; --d-muted: #8a7653; --d-line: #33291a; --d-tab: #14110c; --d-accent: #f2a93b; --d-soft: #3d2f17; }

/* Before main.js runs there's no data-theme yet, so follow the system to avoid a light flash. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--d-bg);
    --surface: var(--d-tab);
    --sheet: var(--d-sheet);
    --tab: var(--d-tab);
    --fg: var(--d-fg);
    --muted: var(--d-muted);
    --line: var(--d-line);
    --accent: var(--d-accent);
    --accent-soft: var(--d-soft);
    --check-img: var(--d-check);
    --ok: #5cc28d;
    --warn: #e0a060;
    --danger: #ec7063;
    --tc-red: #ff7b72; --tc-orange: #f0a35e; --tc-green: #6fd08c; --tc-blue: #7fb2ff; --tc-purple: #c39bf5; --tc-gray: #97a3b1;
    --hl-yellow: #5a4c10; --hl-green: #1e4a2b; --hl-blue: #1d3a60; --hl-pink: #5a2442; --hl-orange: #5c3815;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--d-bg);
  --surface: var(--d-tab);
  --sheet: var(--d-sheet);
  --tab: var(--d-tab);
  --fg: var(--d-fg);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --accent: var(--d-accent);
  --accent-soft: var(--d-soft);
  --check-img: var(--d-check);
  --ok: #5cc28d;
  --warn: #e0a060;
  --danger: #ec7063;
  --tc-red: #ff7b72; --tc-orange: #f0a35e; --tc-green: #6fd08c; --tc-blue: #7fb2ff; --tc-purple: #c39bf5; --tc-gray: #97a3b1;
  --hl-yellow: #5a4c10; --hl-green: #1e4a2b; --hl-blue: #1d3a60; --hl-pink: #5a2442; --hl-orange: #5c3815;
}

/* Derived from the tokens above, so they follow light and dark. */
:root {
  --tline: color-mix(in srgb, var(--accent) 58%, var(--line));
  --tedge: color-mix(in srgb, var(--accent) 30%, var(--line));
  --sel-bg: color-mix(in srgb, var(--accent) 13%, var(--tab));
  --sel-glow: 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Keyboard focus: one accent ring on every button, as in The System. Pieces with their own focus
   look (menu items, the focus view) override it. */
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font-ui);
}

/* Scrollbars: thin, square, tinted with the theme's accent instead of the default grey */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--line)) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 0; background: color-mix(in srgb, var(--accent) 45%, var(--line)); background-clip: padding-box; }

@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
}