/*
 * Design tokens. ~90% of the publication stays black/off-white/gray --
 * the story accent (--zr-accent) is the only color that moves per report.
 * Theme is a finite, declarative set (data-theme on <html> or a report wrapper);
 * accent is an arbitrary hex, so it's set inline per-report instead of here.
 */

:root {
  --zr-bg: #090909;
  --zr-surface: #111111;
  --zr-surface-raised: #161615;
  --zr-text: #f4f4f1;
  --zr-muted: #8c8c87;
  --zr-rule: #292927;
  --zr-accent: #b77832;

  --zr-font-display: ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --zr-font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --zr-container: 1440px;
  --zr-gutter: clamp(1.25rem, 3vw, 3rem);

  --zr-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* Light theme: inverted field, same accent behavior. */
[data-theme="light"] {
  --zr-bg: #f4f4f1;
  --zr-surface: #e9e9e4;
  --zr-surface-raised: #ffffff;
  --zr-text: #0c0c0b;
  --zr-muted: #6b6b66;
  --zr-rule: #d4d4cd;
}

/* Monochrome: the story owns no color at all -- accent collapses to text. */
[data-theme="monochrome"] {
  --zr-accent: var(--zr-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}