/* RT XP — base layer shared by every page (index, audit, privacy, voorwaarden).
   Holds exactly what all four need: theme tokens, reset, document chrome
   (scrollbar / selection) and the a11y guarantees. Anything page-specific
   stays in that page's own <style> block.

   Dark is the default and renders pixel-identical to the pre-token values.
   Light is the "paper CRT" palette from the RT-XP Light Mode design:
   sage paper, olive ink, deep teal + berry. theme.js flips data-theme on
   <html> before first paint. */

:root {
  --bg: #000;
  --panel: #000;
  --panel2: #050505;
  --accent: #29BDC9;
  --accent2: #E6206E;
  --on-accent: #000;
  --text: #cccccc;
  --lede: #aaaaaa;
  --faint: #666666;
  --dash: #29BDC955;
  --dash2: #29BDC922;
  --scroll-track: #000;
}

html[data-theme="light"] {
  --bg: #d5d9d0;
  --panel: #e6e9e0;
  --panel2: #d0d5c9;
  --accent: #0b6f77;
  --accent2: #b3145b;
  --on-accent: #f4f2ea;
  --text: #2e332a;
  --lede: #3d4237;
  --faint: #6a6f5e;
  --dash: rgba(11, 111, 119, 0.4);
  --dash2: rgba(11, 111, 119, 0.25);
  /* Track sits a shade under the paper so the scrollbar reads as a groove. */
  --scroll-track: #c9cec3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
}

body { cursor: default; }
a, button { cursor: pointer; }

::-webkit-scrollbar { width: 10px; height: 10px; background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--accent2); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection { background: var(--accent2); color: var(--on-accent); }

/* A11y: kill animations/transitions for users who opt out of motion.
   JS-driven motion (rAF loops, typewriters) is gated separately in the
   REDUCED_MOTION constant in app.jsx / audit.jsx. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* A11y: visible keyboard focus ring. !important because audit.html resets
   outline to 0 on native form controls. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
