/* Loaded last by every website shell. CSS follows OS changes without scripts. */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #121815;
    --ink: #edf2e9;
    --muted: #b3bfb5;
    --line: #46564b;
    --white: #1d2721;
    --red: #ffaaa6;
    --surface-raised: #28352c;
    --positive-surface: #2d4025;
    --negative-surface: #452825;
    --on-accent: #141b1f;
  }
  body { background: var(--paper); color: var(--ink); }
  button, input, select, textarea { color: inherit; }
  input:not([type="range"]), select, textarea,
  .schema-checker, .popup-preview, .sample-panel, .next-move,
  .vote-drawer, .vote-drawer .actions, .reason-options label,
  .help-options details, .choices label, .rating-panel, .back, .skip,
  .assessment-score .score-help, .score-explanation, .vote-choices button {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line);
  }
  input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
  .popup-scene, .recovery-strip { background: var(--surface-raised); }
  .chip, .feature-list li > span, .frontend-notice, .notice,
  .reason-options label:has(input:checked), #inline-editor .choices label:has(:checked),
  .vote-choices button[aria-pressed="true"], .back:hover {
    background: var(--positive-surface);
    color: var(--ink);
    border-color: var(--line);
  }
  .negative-chip, .notice.error, .warning,
  .vote-choices button[data-vote="100"][aria-pressed="true"] {
    background: var(--negative-surface);
    color: var(--red);
    border-color: var(--red);
  }
  .demo-card[data-state="negative"] h3 { color: var(--red); }
  .btn, .preview-action, .schema-steps li > span,
  .example-controls button[aria-pressed="true"], .back:focus-visible,
  .ai-guide blockquote, .public-rating .rating-hero {
    color: var(--on-accent);
  }
  .btn.dark { background: var(--ink); color: var(--paper); }
  .btn.secondary { color: var(--ink); }
  .btn.ghost { color: var(--ink); }
  .btn.danger { color: var(--red); }
  .example-controls button { color: var(--ink); }
  .brand-dot { color: var(--lime); }
  /* Original SVG shapes, with artwork colors designed for dark surfaces. */
  .indicator-overview { --indicator-border: var(--line); }
  .indicator-heading > span, .indicator-intro, .indicator-footnote,
  .indicator-label, .indicator-toggle, .indicator-explanation dt { color: var(--muted); }
  .indicator-explanation dl > div { border-color: var(--line); }
  .indicator-icon, .indicator-status { background: var(--positive-surface); color: #d6edb8; }
  .indicator-row[data-state="concern"] .indicator-icon,
  .indicator-row[data-state="concern"] .indicator-status { background: #4b381e; color: #ffda96; }
  .indicator-row[data-state="unavailable"] .indicator-icon,
  .indicator-row[data-state="unavailable"] .indicator-status { background: var(--surface-raised); color: var(--muted); }
  .unknown-track, .meter:not(.ready),
  .shared-meter:not(:has(.community-marker)) .rating-rail { background: var(--line); }
  button:focus-visible, a:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible, summary:focus-visible,
  .indicator-row > summary:focus-visible { outline-color: var(--lime); }
  input.vote-range:focus-visible::-webkit-slider-thumb { outline-color: var(--lime); }
  input.vote-range:focus-visible::-moz-range-thumb { outline-color: var(--lime); }
}

@media (prefers-color-scheme: dark) {
  img[src="/assets/logo.svg"] { content: url("/assets/logo-dark.svg"); }
  img[src="/assets/eyes.svg"] { content: url("/assets/eyes-dark.svg"); }
  img[src="/assets/expression-positive.svg"] { content: url("/assets/expression-positive-dark.svg"); }
  img[src="/assets/expression-mixed.svg"] { content: url("/assets/expression-mixed-dark.svg"); }
  img[src="/assets/expression-negative.svg"] { content: url("/assets/expression-negative-dark.svg"); }
  img[src="/assets/expression-unknown.svg"] { content: url("/assets/expression-unknown-dark.svg"); }
  img[src="/assets/marker-positive.svg"] { content: url("/assets/marker-positive-dark.svg"); }
  img[src="/assets/marker-mixed.svg"] { content: url("/assets/marker-mixed-dark.svg"); }
  img[src="/assets/marker-negative.svg"] { content: url("/assets/marker-negative-dark.svg"); }
  img[src="/assets/marker-unknown.svg"] { content: url("/assets/marker-unknown-dark.svg"); }
}