/* Dunetrace docs — theme system */
/* Default (light) theme — applied via :root or [data-theme="light"] */
:root,
[data-theme="light"] {
  --ink:   #fafaf8;
  --ink2:  #f3f2ee;
  --ink3:  #eae9e3;
  --ink4:  #dedad2;
  --wire:  #d4d0c8;
  --wire2: #b8b4aa;

  --orange:  #c95a1a;
  --orange2: #a84714;
  --orange3: rgba(201,90,26,0.07);
  --orange4: rgba(201,90,26,0.13);

  --chalk:  #16120c;
  --chalk2: #2e2a22;
  --chalk3: #5a5650;
  --chalk4: #8a8680;

  --red:    #c0392b;
  --red2:   rgba(192,57,43,0.09);
  --green:  #1e8a52;
  --green2: rgba(30,138,82,0.09);
  --amber:  #a06a00;
  --blue:   #2272b8;
  --purple: #6e44c4;
  --purple2:rgba(110,68,196,0.09);

  --body-bg: #fafaf8;
  --nav-bg:  rgba(250,250,248,0.94);
  --code-bg: #f3f2ee;
  --pre-bg:  #f3f2ee;
  --card-bg: #ffffff;
  --shadow:  0 4px 24px rgba(0,0,0,0.07);
}

/* Dark theme */
[data-theme="dark"] {
  --ink:   #07090f;
  --ink2:  #0c1220;
  --ink3:  #111b2d;
  --ink4:  #162038;
  --wire:  #1e3050;
  --wire2: #253d62;

  --orange:  #e8692a;
  --orange2: #bf521c;
  --orange3: rgba(232,105,42,0.08);
  --orange4: rgba(232,105,42,0.15);

  --chalk:  #f0ece4;
  --chalk2: #c8c4bc;
  --chalk3: #8a8880;
  --chalk4: #3e4550;

  --red:    #e53e3e;
  --red2:   rgba(229,62,62,0.1);
  --green:  #2eb872;
  --green2: rgba(46,184,114,0.1);
  --amber:  #d4920a;
  --blue:   #4a9ede;
  --purple: #9b72e8;
  --purple2:rgba(155,114,232,0.1);

  --body-bg: #07090f;
  --nav-bg:  rgba(7,9,15,0.92);
  --code-bg: #0c1220;
  --pre-bg:  #07090f;
  --card-bg: #0c1220;
  --shadow:  0 24px 60px rgba(0,0,0,0.4);
}

/* ── Body & grain ─────────────────────────────── */
body { background: var(--body-bg); color: var(--chalk2); }

/* Show grid/grain in dark only */
[data-theme="light"] body::before,
[data-theme="light"] body::after { display: none; }
[data-theme="dark"] body::before,
[data-theme="dark"] body::after  { display: block; }

/* ── Nav ──────────────────────────────────────── */
nav.site-nav { background: var(--nav-bg); border-bottom-color: var(--wire); }
.brand-d { background: var(--ink3); border-color: var(--wire); }

/* ── Code ─────────────────────────────────────── */
.code-win { box-shadow: var(--shadow); }
.cw-bar   { background: var(--ink3); border-bottom-color: var(--wire); }
.cw-body  { background: var(--pre-bg); color: var(--chalk2); }

[data-theme="light"] .ck { color: #7c3faa; }
[data-theme="light"] .cf { color: #c95a1a; }
[data-theme="light"] .cs { color: #2e7d1e; }
[data-theme="light"] .cv { color: #1563a0; }
[data-theme="light"] .cc { color: #8a8680; }
[data-theme="light"] .cn { color: #2e2a22; }
[data-theme="light"] .cd { color: #1e8a52; }

[data-theme="dark"] .ck { color: #c792ea; }
[data-theme="dark"] .cf { color: #e8692a; }
[data-theme="dark"] .cs { color: #c3e88d; }
[data-theme="dark"] .cv { color: #89ddff; }
[data-theme="dark"] .cc { color: #3e4550; }
[data-theme="dark"] .cn { color: #c8c4bc; }
[data-theme="dark"] .cd { color: #2eb872; }

/* ── Inline code & pre ────────────────────────── */
.docs-body code { background: var(--ink3); border-color: var(--wire); color: var(--chalk); }
.docs-body pre  { background: var(--pre-bg); border-color: var(--wire); color: var(--chalk2); }

/* ── Tables ───────────────────────────────────── */
.docs-body table   { background: var(--card-bg); border-color: var(--wire); }
.docs-body table th { background: var(--ink3); border-bottom-color: var(--wire); color: var(--chalk); }
.docs-body table td { border-bottom-color: var(--wire); color: var(--chalk2); }

/* ── Callouts ─────────────────────────────────── */
.callout      { background: var(--ink2); border-color: var(--wire); }
.callout-warn { border-left-color: var(--amber); }
.callout-info { border-left-color: var(--blue); }

/* ── Sidebar ──────────────────────────────────── */
.sb-group a       { border-left-color: var(--wire); }
.sb-group a:hover { background: var(--ink2); border-left-color: var(--wire2); }
.sb-group a.active { background: var(--orange3); border-left-color: var(--orange); }

/* ── Hub cards ────────────────────────────────── */
.hub-card       { background: var(--card-bg); border-color: var(--wire); }
.hub-card:hover { background: var(--ink2); border-color: var(--wire2); }

/* ── Nav footer ───────────────────────────────── */
.dnav       { background: var(--card-bg); border-color: var(--wire); }
.dnav:hover { background: var(--ink2); border-color: var(--wire2); }
.dnav-label { color: var(--chalk4); }
.dnav-title { color: var(--chalk); }

/* ── Footer ───────────────────────────────────── */
footer.site-foot { background: var(--ink2); border-top-color: var(--wire); }

/* ── Misc ─────────────────────────────────────── */
.docs-body h2     { border-top-color: var(--wire); color: var(--chalk); }
.docs-body h3,
.docs-body h4     { color: var(--chalk); }
.docs-body blockquote { background: var(--orange3); border-left-color: var(--orange); }
.docs-lede        { border-bottom-color: var(--wire); }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--wire2); }

/* severity badges */
.ds-crit { background: var(--purple2); color: var(--purple); }
.ds-high { background: var(--red2);    color: var(--red); }
.ds-med  { background: rgba(var(--amber-rgb, 160,106,0),0.1); color: var(--amber); }

/* ── Theme toggle button ──────────────────────── */
.theme-toggle {
  background: var(--ink3);
  border: 1px solid var(--wire);
  border-radius: 3px;
  color: var(--chalk3);
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--ink4);
  border-color: var(--wire2);
  color: var(--chalk);
}
.theme-toggle-label {
  font-size: 10px;
  letter-spacing: 1px;
}