/* ============================================================
 * Universal viz tokens — used by every viz component on every post.
 *
 * These are the blog-wide viz tokens. Post-specific tokens should
 * live in `src/styles/posts/<slug>.css` instead.
 *
 * Theming contract:
 *   - Add a token here only if at least two posts need it.
 *   - Every token MUST be defined in `:root` AND in both
 *     `[data-theme='dark']` and the `prefers-color-scheme` fallback.
 *   - Single source of truth — never override these elsewhere.
 * ============================================================ */

:root {
  --viz-fg: rgba(0,0,0,0.85);
  --viz-muted: rgba(0,0,0,0.6);
  --viz-hairline: rgba(0,0,0,0.10);
  --viz-soft: rgba(0,0,0,0.035);
  --viz-bg: #ffffff;
  --viz-blue: #3a7bd5;
  --viz-ink: #111111;
  --viz-amber: #e6a700;
  --viz-emerald: #1ea672;
  --viz-heat-low: #cfe9ff;
  --viz-heat-mid: #7fbcff;
  --viz-heat-high: #2a78ff;
  --viz-black: #111111;
  --viz-gray-200: #e2e8f0;
  --viz-gray-400: #94a3b8;
  --viz-gray-500: #64748b;
  --viz-gray-700: #334155;
  --viz-gray-900: #0f172a;
  --viz-accent: #0071e3;
}

[data-theme='dark'] {
  --viz-fg: rgba(255,255,255,0.85);
  --viz-muted: rgba(255,255,255,0.55);
  --viz-hairline: rgba(255,255,255,0.12);
  --viz-soft: rgba(255,255,255,0.04);
  --viz-bg: var(--background-color, #1a1818);
  --viz-ink: #e0e0e0;
  --viz-black: #e0e0e0;
  --viz-gray-200: #333;
  --viz-gray-400: #777;
  --viz-gray-500: #999;
  --viz-gray-700: #bbb;
  --viz-gray-900: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --viz-fg: rgba(255,255,255,0.85);
    --viz-muted: rgba(255,255,255,0.55);
    --viz-hairline: rgba(255,255,255,0.12);
    --viz-soft: rgba(255,255,255,0.04);
    --viz-bg: var(--background-color, #1a1818);
    --viz-ink: #e0e0e0;
    --viz-black: #e0e0e0;
    --viz-gray-200: #333;
    --viz-gray-400: #777;
    --viz-gray-500: #999;
    --viz-gray-700: #bbb;
    --viz-gray-900: #e0e0e0;
  }
}