/**
 * Semantic color tokens with automatic + manual light/dark mode support.
 */

:root {
  color-scheme: light dark;

  --bg: var(--cp-porcelain);
  --surface: var(--cp-card-surface);
  --surface-alt: var(--cp-linen);
  --ink: var(--cp-charcoal);
  --muted: var(--cp-slate);
  --line: var(--cp-soft-border);
  --line2: var(--cp-linen);
  --warn: var(--cp-brass);
  --accent: var(--cp-brass);
  --focus: var(--cp-brass);

  --header-ink: var(--header-text);
  --hero-clear-title: rgba(255, 255, 255, 0.77);;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Use a page background slightly lighter than the header to create separation */
    --bg: #040607; /* was var(--cp-charcoal) (#101b1f) */
    --surface: var(--cp-slate);
    --surface-alt: var(--cp-dark-warm-surface);
    --ink: var(--cp-porcelain);
    --muted: var(--cp-linen);
    --line: var(--cp-eucalyptus);
    --line2: var(--cp-slate);
    --warn: var(--cp-brass);
    --accent: var(--cp-brass);
    --focus: var(--cp-dark-accent-hover);
  }
}

:root[data-theme="light"] {
  --bg: var(--cp-porcelain);
  --surface: var(--cp-card-surface);
  --surface-alt: var(--cp-linen);
  --ink: var(--cp-charcoal);
  --muted: var(--cp-slate);
  --line: var(--cp-soft-border);
  --line2: var(--cp-linen);
  --warn: var(--cp-brass);
  --accent: var(--cp-brass);
  --focus: var(--cp-brass);
}

:root[data-theme="dark"] {
  /* Keep manual dark theme consistent with automatic dark mode */
  --bg: #040607; /* was var(--cp-charcoal) (#101b1f) */
  --surface: var(--cp-slate);
  --surface-alt: var(--cp-dark-warm-surface);
  --ink: var(--cp-porcelain);
  --muted: var(--cp-linen);
  --line: var(--cp-eucalyptus);
  --line2: var(--cp-slate);
  --warn: var(--cp-brass);
  --accent: var(--cp-brass);
  --focus: var(--cp-dark-accent-hover);
}