/* Ruthie theme v2 - override layer. Remove the link in index.html to roll back. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

html:root {
  --bg: #0a110e;
  --bg2: #0f1512;
  --bg3: #12241b;
  --txt: #e6efe9;
  --txt2: #b7c7bd;
  --txt3: #8fa89a;
  --green: #7fe0a6;
  --green-dim: rgba(127, 224, 166, 0.12);
  --accent: #7fe0a6;
  --amber: #f0b45a;
  --red: #ff7b72;
  --blue: #6fb3ff;
  --line: rgba(127, 224, 166, 0.14);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Chakra Petch', sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
}

html body {
  background: radial-gradient(1100px 700px at 50% 40%, #12241b 0%, #0a110e 70%) fixed;
  background-color: #0a110e;
  color: var(--txt);
  font-family: var(--sans);
}

html body h1, html body h2, html body h3 {
  font-family: var(--display);
  letter-spacing: 0.04em;
}

html body :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html body ::selection { background: rgba(127, 224, 166, 0.3); }


/* v2 additions: remaining brown/gold spots */
html:root { --line2: rgba(127, 224, 166, 0.24); }

html body header,
html body #console {
  background: rgba(10, 17, 14, 0.94) !important;
  border-color: var(--line) !important;
}

html body .p-title {
  color: #9ccdb0 !important;
  letter-spacing: 0.16em;
}

html body #circuit { opacity: 0.4 !important; }