:root {
  --theme-pink: #96366d;
  --theme-mint: #c8ecde;
  --theme-paper: #eaf7f1;
  --theme-ink: #49364c;
  --theme-noir: #19151f;
  --theme-hero-ink: #fff5fb;
  --ink: var(--theme-ink);
  --paper: var(--theme-paper);
  --mint: var(--theme-mint);
  --deep-pink: var(--theme-pink);
}
body {
  background: linear-gradient(
    135deg,
    var(--theme-pink),
    var(--theme-noir),
    var(--theme-mint)
  );
}
.masthead,
nav,
.diary-links {
  background: var(--theme-noir);
}
.masthead,
.header-account {
  color: var(--theme-mint);
}
.hero {
  color: var(--theme-hero-ink);
  background: linear-gradient(
    110deg,
    var(--theme-pink) 0%,
    var(--theme-pink) 42%,
    color-mix(in srgb, var(--theme-pink) 30%, var(--theme-mint)) 72%,
    var(--theme-mint) 100%
  );
}
.hero .eyebrow,
.hero-prelude,
.hero p,
.hero-footnote,
.hero .ornament {
  color: var(--theme-hero-ink);
}
.hero h2 {
  color: inherit;
}
nav button,
.btn,
.food,
.diary-cta {
  background: color-mix(in srgb, var(--theme-pink) 15%, white);
  color: var(--theme-ink);
}
nav button.active,
nav button:hover,
.btn:hover,
.food:hover,
.diary-cta:hover {
  background: var(--theme-mint);
  color: var(--theme-ink);
}
.chapter-link {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--theme-pink) 10%, white),
    var(--theme-paper)
  );
  color: var(--theme-ink);
}
.character-area {
  background:
    radial-gradient(
      ellipse at 10% 0%,
      color-mix(in srgb, var(--theme-pink) 10%, transparent),
      transparent 50%
    ),
    url("/assets/paper-grain.svg"), var(--theme-paper);
}
.panel,
.tile,
.art,
.letter-paper,
.char-dialog {
  background-color: var(--theme-paper);
  color: var(--theme-ink);
}
.character-card {
  background: color-mix(in srgb, var(--theme-pink) 8%, white);
  color: var(--theme-ink);
}
.character-portrait {
  background-color: var(--theme-mint);
}
.placeholder {
  color: var(--theme-pink);
}
.cameo-card,
.featured-character,
.cameo-note {
  background-color: var(--theme-noir);
}
.paper-tab,
footer {
  background: linear-gradient(
    120deg,
    var(--theme-noir),
    color-mix(in srgb, var(--theme-pink) 25%, var(--theme-noir))
  );
  color: var(--theme-mint);
}
.theme-editor {
  border: 12px solid transparent;
  border-image: url("/assets/gothic-lace.svg") 30 round;
}
.theme-heading {
  display: flex;
  gap: 18px;
  align-items: center;
}
.theme-heading > span {
  font-size: 42px;
  color: var(--theme-pink);
}
.theme-heading h3 {
  margin-bottom: 5px;
}
.theme-heading p {
  margin: 0;
  font-size: 12px;
}
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin: 22px 0;
}
.theme-swatches label {
  font-size: 11px;
  display: grid;
  gap: 8px;
}
.theme-swatches input {
  padding: 5px;
  width: 100%;
  height: 48px;
  cursor: pointer;
}
.theme-preview {
  border: 8px solid transparent;
  border-image: url("/assets/gothic-lace.svg") 30 round;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 24px auto;
  max-width: 650px;
}
.theme-preview-dark {
  background: linear-gradient(120deg, var(--theme-pink), var(--theme-mint));
  color: var(--theme-hero-ink);
  padding: 35px 16px;
  text-align: center;
}
.theme-preview-dark > span {
  font: 46px var(--script);
}
.theme-preview-dark p {
  font: italic 15px var(--serif);
  margin: 8px 0 0;
}
.theme-preview-paper {
  padding: 30px 15px;
  background: var(--theme-paper);
  color: var(--theme-ink);
  text-align: center;
  line-height: 2.3;
  font-size: 12px;
}
.theme-preview-button {
  display: inline-block;
  margin-top: 10px;
  border: 3px double var(--theme-pink);
  border-radius: 30px;
  background: var(--theme-mint);
  padding: 6px 16px;
  font: italic 17px var(--serif);
}
.theme-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.my-letters article {
  margin-top: 16px;
}
.letter-status {
  display: inline-block;
  background: var(--theme-mint);
  color: var(--theme-ink);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
}
@media (max-width: 760px) {
  .hero {
    background: linear-gradient(
      165deg,
      var(--theme-pink) 0%,
      var(--theme-pink) 49%,
      color-mix(in srgb, var(--theme-pink) 20%, var(--theme-mint)) 78%,
      var(--theme-mint) 100%
    );
  }
  .theme-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .theme-preview {
    grid-template-columns: 1fr;
  }
  .theme-editor {
    padding: 18px 12px;
  }
  .theme-heading h3 {
    font-size: 25px;
  }
}