/*
 * THEME: terminal
 * ---------------------------------------------------------------
 * A theme is only a set of design tokens (colours, fonts, noise).
 * base.css never contains a hard-coded colour, so a new look is just a new file:
 *   1. copy this file to css/themes/<name>.css
 *   2. change the tokens inside [data-style="<name>"][data-mode="dark"|"light"]
 *   3. add a <link> for it in index.html and set data-style="<name>" on <html>
 */
:root {
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

[data-style="terminal"][data-mode="dark"] {
  color-scheme: dark;
  --bg: #161616;
  --bg-elev: #202020;
  --bg-input: #0f0f0f;
  --fg: #d8d8d8;
  --fg-dim: #8c8c8c;
  --fg-faint: #5a5a5a;
  --line: #3a3a3a;
  --line-strong: #5c5c5c;
  --accent: #3fdc6a;
  --accent-contrast: #07210f;
  --accent-bg: rgba(63, 220, 106, .09);
  --cyan: #38d8d8;
  --yellow: #f4df3a;
  --red: #ff5f56;
  --mine-bg: #12231a;
  --mine-line: #2b9d4c;
  --theirs-bg: #1e1e1e;
  --theirs-line: #4a4a4a;
  --noise-opacity: .055;
  --scrim: rgba(0, 0, 0, .72);
}

[data-style="terminal"][data-mode="light"] {
  color-scheme: light;
  --bg: #f0f0ea;
  --bg-elev: #e4e4dc;
  --bg-input: #ffffff;
  --fg: #1b1d1b;
  --fg-dim: #575c57;
  --fg-faint: #8a8f8a;
  --line: #b6b9b1;
  --line-strong: #858a82;
  --accent: #117a38;
  --accent-contrast: #ffffff;
  --accent-bg: rgba(17, 122, 56, .09);
  --cyan: #0a7580;
  --yellow: #7d6400;
  --red: #bf261d;
  --mine-bg: #d9ebdd;
  --mine-line: #117a38;
  --theirs-bg: #ffffff;
  --theirs-line: #a7aba3;
  --noise-opacity: .07;
  --scrim: rgba(240, 240, 234, .85);
}