/* Judiverse tokens. One palette, two themes, no italics, no thin weights.
   Type and spacing are set for dyslexia: generous line height, wide letter
   spacing on small caps, a short measure, left aligned, never justified. */

:root {
  /* the gradient that carries every lit thing */
  --grad: linear-gradient(135deg, #071722 0%, #0a4d78 52%, #18a3e9 100%);
  --neon: #63ddff;
  --glow: 0 16px 40px -16px rgba(10, 77, 120, .8);

  /* dark is the default: the Judiverse is a lit room */
  --bg: #060c12;
  --stage: radial-gradient(1200px 620px at 82% -8%, rgba(24, 163, 233, .18), transparent 60%),
           radial-gradient(900px 500px at -5% 12%, rgba(10, 77, 120, .26), transparent 55%), var(--bg);
  --block: #0d1b28;
  --block-2: #10222f;
  --line: rgba(99, 221, 255, .16);
  --line-2: rgba(99, 221, 255, .34);
  --ink: #eaf2f7;
  --ink-2: #a3bccd;
  --ink-3: #6f8a9c;

  /* status carries a shape as well as a colour, so colour is never the only signal */
  --ok: #7ee2a5;
  --warn: #ffc95c;
  --stop: #ff7a66;

  --r: 18px;          /* one radius, everywhere */
  --gap: 14px;        /* one gap, so blocks tessellate */
  --tap: 56px;        /* nothing interactive is smaller */
  --sans: "Atkinson Hyperlegible", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f2f6f9;
  --stage: radial-gradient(1200px 620px at 82% -8%, rgba(24, 163, 233, .16), transparent 60%), var(--bg);
  --block: #ffffff;
  --block-2: #eef4f8;
  --line: #cddbe6;
  --line-2: #0a689c;
  --ink: #071722;
  --ink-2: #3c5566;
  --ink-3: #5d7688;
  --ok: #0a7a45;
  --warn: #8a5300;
  --stop: #b3261e;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--stage);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  letter-spacing: .01em;
  text-align: left;
  font-synthesis: none;
}

/* dyslexia: never italic, never justified, never a wall */
i, em { font-style: normal; font-weight: 700; }
p { max-width: 62ch; margin: 0 0 12px; }

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(28px, 4.2vw, 42px); }
h2 { font-size: clamp(20px, 2.4vw, 26px); }

a { color: var(--neon); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}