/* Dark Theme Styles */
:root {
  --paper: #1b1b1b;
  --paper-2: #222;
  --paper-3: #333;
  --ink: #e0e0e0;
  --ink-2: #cacaca;
  --ink-3: #999;
  --rule: rgba(224, 224, 224, 0.16);
  --rule-soft: rgba(224, 224, 224, 0.09);
  --accent: #00bcd4;
  --accent-soft: rgba(199, 93, 93, 0.12);
  --blue-ink: #607d8b;
  --serif: 'Fraunces', Georgia, serif;
  --mono: 'IBM Plex Mono', monospace;
}
body {
  background: var(--paper);
  color: var(--ink);
}

header,
footer,
.desk,
.letter-card,
.card,
.about-card {
  background: var(--paper-2);
  border-color: var(--rule);
}

nav a,
.btn-sound,
.btn,
.chip,
.kicker,
.sec-head p,
::selection {
  color: var(--ink-2);
}

.nav a:hover,
.btn-sound:hover,
.chip:hover,
.btn:hover,
.kicker::before {
  color: var(--accent);
  background: var(--accent-soft);
}

a:hover,
.btn-ink:hover,
.btn-close:hover {
  color: var(--accent);
}

.btn-ink {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(224, 224, 224, 0.25);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.field,
.letter-paper {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.field::placeholder,
.letter-paper::placeholder {
  color: var(--ink-3);
}

.toast {
  background: var(--ink);
  color: var(--paper);
}