:root {
  --bg: #151515;
  --bg-soft: #1d1d1d;
  --bg-elevated: #242424;
  --border: #ff5a5f;
  --text: #f2f2f2;
  --text-dim: #d7d7d7;
  --text-muted: #ababab;
  --accent: #ff5a5f;
  --accent-soft: #ff7a7e;
  --accent-alt: #ff8f92;
}

html[data-theme="light"] {
  --bg: #fbfbfb;
  --bg-soft: #f2f2f2;
  --bg-elevated: #ebebeb;
  --border: #ff5a5f;
  --text: #1b1b1b;
  --text-dim: #2d2d2d;
  --text-muted: #6f6f6f;
  --accent: #ff5a5f;
  --accent-soft: #ff6b70;
  --accent-alt: #ff7d82;
}

html,
body {
  background: var(--bg);
  color: var(--text);
}

a,
.content-link,
#nav-bar a,
.accent-data,
.footnote-definition-label {
  color: var(--accent);
}

a:hover,
.content-link:hover,
#nav-bar a:hover,
#nav-bar a.active {
  color: var(--accent-alt);
}

h1,
h2,
h3,
h4,
h5,
h6,
time,
.content-meta,
small,
footer {
  color: var(--text-dim);
}

hr,
blockquote,
pre,
table,
th,
td {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

blockquote,
code {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

code {
  color: var(--accent);
}

pre {
  background: color-mix(in srgb, black 18%, var(--bg));
}

.tag {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.tag:hover {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}