/* Theme palettes — the single source of the colour tokens for every surface.
   Active theme is set as data-theme on <html> by the head bootstrap
   (localStorage 'polcomp_theme'); 'dark' is the default (no attribute).
   Load this file AFTER the page stylesheet.

   Text ladder: txt > mut2 > muted. Both muted and mut2 pass 4.5:1 on every
   surface step (bg, s1, s2, s3) in every theme, so either can carry small text.
   Accents pass 4.5:1 on s3 too, so a1..a3/warn/danger are safe as text and fill. */

:root {
  color-scheme: dark;
  --bg:    #07070f;
  --s1:    #0d0d1c;
  --s2:    #111122;
  --s3:    #171730;
  --bd:    #1a1a35;
  --bd2:   #242448;
  --txt:   #e2e2f0;
  --muted: #7d7dae;
  --mut2:  #a1a1c7;
  --a1:    #818cf8;
  --a2:    #34d399;
  --a3:    #f472b6;
  --warn:  #fbbf24;
  --danger:#f87171;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg:    #f6f6fa;
  --s1:    #ffffff;
  --s2:    #f0f0f6;
  --s3:    #e6e6ef;
  --bd:    #dcdce8;
  --bd2:   #c6c6da;
  --txt:   #1d1d2e;
  --muted: #656586;
  --mut2:  #494966;
  --a1:    #5656d6;
  --a2:    #097652;
  --a3:    #be267b;
  --warn:  #945a06;
  --danger:#ca2121;
}

html[data-theme="redblack"] {
  --bg:    #0a0507;
  --s1:    #150a0d;
  --s2:    #1b0e11;
  --s3:    #251116;
  --bd:    #30131a;
  --bd2:   #4a1922;
  --txt:   #f2e6e8;
  --muted: #aa6f7b;
  --mut2:  #c5959e;
  --a1:    #ef4444;
  --a2:    #34d399;
  --a3:    #f472b6;
  --warn:  #fbbf24;
  --danger:#f87171;
}

/* ---- Browser surfaces the pages did not draw ---------------------------- */

/* Instrument Serif ships one weight; a bold heading is a synthesized smear. */
:where(h1, h2) { font-weight: 400; }

::selection { background: color-mix(in srgb, var(--a1) 34%, transparent); color: var(--txt); }

html { scrollbar-color: var(--bd2) var(--bg); }

/* Base keyboard focus ring. Zero specificity so any component can restyle it. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--a1);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Status dot: the verdict marker (green / indigo / amber / red) used with its word. */
.vd {
  display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: var(--vd, var(--mut2)); vertical-align: 0.04em;
}

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