:root {
  --color-canvas: #e6e6e6;
  --color-page: #f7f7f7;
  --color-surface: #f7f7f7;
  --color-surface-soft: #eeeeee;
  --color-surface-raised: #fcfcfc;
  --color-card: #fcfcfc;
  --color-text: #242424;
  --color-text-muted: #666666;
  --color-border: #d6d6d6;
  --color-border-strong: #4a4a4a;
  --color-accent: #6a6a6a;
  --color-accent-soft: #e8e8e8;
  --color-action: #242424;
  --color-action-hover: #383838;
  --color-action-text: #f7f7f7;
  --color-surface-dark: #242424;
  --color-surface-founder: #2e2e2e;
  --color-text-on-dark: #f7f7f7;
  --color-text-on-dark-muted: #d6d6d6;
  --color-border-on-dark: #4a4a4a;
  --color-link: #242424;
  --color-link-hover: #383838;
  --color-focus: #383838;
  --color-focus-on-dark: #f7f7f7;
  --color-overlay: rgba(36, 36, 36, 0.48);
  --shadow-soft: 0 0.75rem 2.5rem rgba(36, 36, 36, 0.08);
  --shadow-raised: 0 1.25rem 4rem rgba(36, 36, 36, 0.12);
  --color-status-error: #d86868;
}

.color-preview {
  background: var(--color-canvas);
  color: var(--color-text);
}

.color-preview a {
  color: var(--color-link);
}

.color-preview a:hover {
  color: var(--color-link-hover);
}

.color-preview :focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

.journal-body.color-preview {
  --journal-ivory: var(--color-page);
  --journal-paper: var(--color-surface-soft);
  --journal-ink: var(--color-text);
  --journal-muted: var(--color-text-muted);
  --journal-line: var(--color-border);
  background: var(--color-canvas);
}

.journal-body.color-preview .journal-shell {
  background: var(--color-page);
  box-shadow: var(--shadow-raised);
}

.journal-body.color-preview .journal-masthead {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

.journal-body.color-preview .journal-hero {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
}

.journal-body.color-preview .journal-hero__copy {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

.journal-body.color-preview .journal-hero p,
.journal-body.color-preview .journal-kicker,
.journal-body.color-preview .journal-label,
.journal-body.color-preview .journal-section__header p,
.journal-body.color-preview .journal-story-card__body p,
.journal-body.color-preview .journal-story-card__meta,
.journal-body.color-preview .journal-footer {
  color: var(--color-text-muted);
}

.journal-body.color-preview .journal-library {
  background: var(--color-page);
}

.journal-body.color-preview .journal-story-card__image {
  background: var(--color-surface-soft);
}

.journal-body.color-preview .journal-library-card {
  border-color: var(--color-border-strong);
}

.journal-body.color-preview .journal-story-card__body h3 a {
  color: var(--color-text);
}

.journal-body.color-preview .journal-story-card__body h3 a:hover,
.journal-body.color-preview .journal-library-card__link:hover {
  color: var(--color-action-hover);
  text-decoration-color: var(--color-accent);
}

.journal-body.color-preview .journal-library-card__link {
  color: var(--color-action);
}

.journal-body.color-preview .journal-footer {
  border-color: var(--color-border);
  background: var(--color-surface-soft);
}

.journal-body.color-preview .journal-skip {
  background: var(--color-action);
  color: var(--color-action-text);
}