/* Amaneki palette + motif. All pages inherit these variables so the
   dark-mode toggle works everywhere. Don't add colours here that
   aren't intentional; we had exactly ten colours at launch and
   adding an eleventh should be a deliberate choice. */

:root {
  --ink:     #0a0a0a;
  --paper:   #fafafa;
  --rule:    #e5e5e5;
  --muted:   #595959;
  --surface: #ffffff;
  --low:     #1e4976;
  --normal:  #1b5e3f;
  --high:    #7d2222;
  --accent:  #0a0a0a;
}

html[data-theme="dark"] {
  --ink:     #e8e8e8;
  --paper:   #0d1014;
  --rule:    #25282e;
  --muted:   #8a8f99;
  --surface: #14171d;
  /* regime colours keep their hue but lift the luminance for contrast */
  --low:     #5882b5;
  --normal:  #5aa77f;
  --high:    #c86b6b;
  --accent:  #e8e8e8;
}

html, body { background-color: var(--paper); color: var(--ink); }
body { transition: background-color .15s ease, color .15s ease; }

/* Tailwind utility shims so class names stay meaningful across themes */
.bg-paper   { background-color: var(--paper); }
.bg-ink     { background-color: var(--ink); color: var(--paper); }
.bg-white   { background-color: var(--surface); }
.bg-muted   { background-color: var(--muted); }
.text-ink   { color: var(--ink); }
.text-muted { color: var(--muted); }
.text-paper { color: var(--paper); }
.text-high  { color: var(--high); }
.border-rule { border-color: var(--rule); }
.border-ink  { border-color: var(--ink); }
hr.border-rule { border-color: var(--rule); }

.bg-ink:hover, button.bg-ink:hover { background-color: var(--muted); }

a { color: inherit; }
a.underline:hover { text-decoration-thickness: 2px; }

pre {
  background-color: var(--ink);
  color: var(--paper);
}
code:not(pre code) {
  background-color: var(--rule);
  color: var(--ink);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
  font-size: 0.9em;
}

/* Theme toggle button */
button.theme-toggle,
[data-theme-toggle] {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-size: 14px; line-height: 1; cursor: pointer;
  padding: 0;
}
button.theme-toggle:hover { border-color: var(--ink); }

input, select, textarea {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
}

/* Scrollbar stays subtle in dark mode */
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--rule); }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--paper); }

/* Regime state colours exposed as utility classes */
.regime-low    { color: var(--low); }
.regime-normal { color: var(--normal); }
.regime-high   { color: var(--high); }