/* Design tokens. Full light palette on bare :root so nothing has its only
   definition inside a media query; dark overrides only re-point the tokens. */
:root {
  --bg:            #f7f7f4;
  --bg-panel:      #ffffff;
  --bg-sunken:     #eeeeea;
  --bg-hover:      #e6e6e0;
  --ink:           #1a1a17;
  --ink-soft:      #56564f;
  --ink-faint:     #8b8b82;
  --rule:          #d8d8d0;
  --rule-strong:   #b9b9ae;

  /* Semantic accents. Meaning is never carried by hue alone: every state also
     changes weight, shape, or carries a label. */
  --accent:        #2b5fa8;   /* active / current step        */
  --accent-soft:   #dce7f7;
  --twiddle:       #7a4bb5;   /* twiddle factors, psi powers  */
  --twiddle-soft:  #e9dff7;
  --settled:       #3f7a52;   /* already computed             */
  --settled-soft:  #dcecdf;
  --warn:          #a5601a;   /* peeled / fused: read a note  */
  --warn-soft:     #f6e7d4;
  --read:          #1f6f7a;   /* value read this step         */
  --read-soft:     #d8ecee;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 6px;
  --pad: 0.75rem;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}

:root:not([data-theme="light"]) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #16171a;
    --bg-panel:    #1e2024;
    --bg-sunken:   #131417;
    --bg-hover:    #2a2d33;
    --ink:         #e9e9e4;
    --ink-soft:    #a8a8a0;
    --ink-faint:   #75756d;
    --rule:        #33363c;
    --rule-strong: #4a4e56;

    --accent:       #7aa9f0;
    --accent-soft:  #1d2c44;
    --twiddle:      #c4a2f0;
    --twiddle-soft: #2c2440;
    --settled:      #7cc294;
    --settled-soft: #1b2f22;
    --warn:         #e0aa66;
    --warn-soft:    #3a2c18;
    --read:         #6fc8d2;
    --read-soft:    #143134;

    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  }
}

:root[data-theme="dark"] {
  --bg:          #16171a;
  --bg-panel:    #1e2024;
  --bg-sunken:   #131417;
  --bg-hover:    #2a2d33;
  --ink:         #e9e9e4;
  --ink-soft:    #a8a8a0;
  --ink-faint:   #75756d;
  --rule:        #33363c;
  --rule-strong: #4a4e56;

  --accent:       #7aa9f0;
  --accent-soft:  #1d2c44;
  --twiddle:      #c4a2f0;
  --twiddle-soft: #2c2440;
  --settled:      #7cc294;
  --settled-soft: #1b2f22;
  --warn:         #e0aa66;
  --warn-soft:    #3a2c18;
  --read:         #6fc8d2;
  --read-soft:    #143134;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 620; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: .875rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); }
p  { margin: 0 0 .75em; }

code, kbd, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--bg-panel); padding: .5rem .75rem; border: 2px solid var(--accent);
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

button, select, input {
  font: inherit; color: inherit;
  background: var(--bg-panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  padding: .28rem .55rem;
  cursor: pointer;
}
button:hover:not(:disabled), select:hover { background: var(--bg-hover); }
button:disabled { opacity: .4; cursor: default; }
button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* Reduced motion: land on the new state instead of gliding to it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}