body {
  /* Interface atmosphere */
  --interface-bg: #fcfaf4;
  --interface-surface: #fffdfa;
  --interface-surface-muted: #f1eadf;
  --interface-border: #d8cdbc;
  --interface-border-muted: #e4dacb;
  --interface-text: #293d47;
  --interface-text-muted: #697983;
  --interface-accent: #4d789f;
  --interface-accent-soft: #edf2f1;

  /* Reading environment */
  --reading-environment-bg: var(--interface-bg);
  --reading-environment-text: var(--interface-text);
  --reading-environment-surface: var(--interface-surface);
  --reading-environment-border: var(--interface-border);
  --reading-environment-link: var(--interface-accent);

  /* Highlight palette */
  --highlight-unknown: #bfd7f0;
  --highlight-difficult: #e4c15d;
  --highlight-learning: #ead493;
  --highlight-familiarizing: #efe1b2;
  --highlight-comfortable: transparent;
  --highlight-known: transparent;
  --highlight-ignored: transparent;
  --highlight-well-known: transparent;

  /* Chart palette */
  --chart-status-0: #4f7eaf;
  --chart-status-1: #c69f3f;
  --chart-status-2: #b99038;
  --chart-status-3: #9d7b31;
  --chart-status-4: #6f8faf;
  --chart-status-5: #5878a0;
  --chart-status-98: #b86969;
  --chart-status-99: #4b8f63;
  --chart-status-separator: #ffffff;
  --chart-series-1: #4d789f;
  --chart-series-2: #c69f3f;
  --chart-series-3: #4b8f63;
  --chart-series-4: #8d7ca6;
  --chart-series-5: #c86f6f;
  --chart-series-6: #669c9a;
  --chart-series-7: #aa8430;
  --chart-series-8: #6f7d86;

  /* Legacy compatibility aliases */
  --color-bg: var(--interface-bg);
  --color-surface: var(--interface-surface);
  --color-surface-muted: var(--interface-surface-muted);
  --color-border: var(--interface-border);
  --color-border-muted: var(--interface-border-muted);
  --color-text: var(--interface-text);
  --color-text-muted: var(--interface-text-muted);
  --background-color: var(--interface-bg);
  --font-color: var(--interface-text);
  --reading-bg: var(--reading-environment-bg);
  --reading-text: var(--reading-environment-text);
  --reading-surface: var(--reading-environment-surface);
  --reading-border: var(--reading-environment-border);
  --status-0-color: var(--highlight-unknown);
  --status-1-color: var(--highlight-difficult);
  --status-2-color: var(--highlight-learning);
  --status-3-color: var(--highlight-familiarizing);
  --status-4-color: var(--highlight-comfortable);
  --status-5-color: var(--highlight-known);
  --status-98-color: var(--highlight-ignored);
  --status-99-color: var(--highlight-well-known);
  --status-chart-0-color: var(--chart-status-0);
  --status-chart-1-color: var(--chart-status-1);
  --status-chart-2-color: var(--chart-status-2);
  --status-chart-3-color: var(--chart-status-3);
  --status-chart-4-color: var(--chart-status-4);
  --status-chart-5-color: var(--chart-status-5);
  --status-chart-98-color: var(--chart-status-98);
  --status-chart-99-color: var(--chart-status-99);
  --status-chart-separator-color: var(--chart-status-separator);
  --border-bottom-color: #ACB2B9;
  --reading-link: var(--reading-environment-link);
  --reading-link-hover: var(--color-danger);
  --reading-word-hover-border: var(--interface-accent);
  --reading-word-marked-border: var(--color-danger);

  --color-primary: var(--interface-accent);
  --color-primary-hover: #416b8f;
  --color-primary-soft: var(--interface-accent-soft);
  --color-primary-border: #8faecc;
  --color-primary-border-soft: #cbd9e8;
  --color-primary-border-muted: #b9c7d6;
  --color-focus-border: var(--interface-accent);
  --color-focus-ring: rgba(77, 127, 184, 0.2);
  --validation-ok-color: var(--color-success);
  --validation-error-color: var(--color-danger);
  --button-primary-bg: linear-gradient(180deg, #5f8db8 0%, #416f99 100%);
  --button-primary-bg-hover: linear-gradient(180deg, #6d9cc5 0%, #4d789f 100%);
  --button-primary-border: #416f99;
  --button-primary-text: #ffffff;

  font: 100%/1.25 "Caecilia LT Pro", "KaiTi";
}

span.status4 {
  border-bottom: 1px dashed var(--border-bottom-color);
}

span.status5 {
  border-bottom: 1px solid var(--border-bottom-color);
}

span.status98 {
  background-color: var(--status-98-color);
}

span.status99 {
  background-color: var(--status-99-color);
}

span.textitem {
  font-size: 18px;
  margin-bottom: 5px;
}

#status #status-5:checked+label::after,
#status #status-6:checked+label::after {
  filter: invert(0);
}

.status-bar4 {
  background-color: var(--border-bottom-color);
}

.status-bar5 {
  background-color: var(--border-bottom-color);
}

.status-bar99 {
  background-color: var(--status-99-color);
}