/* FATE design tokens. Everything visual derives from these. */
:root {
  /* surfaces: near-black with a cool blue/violet undertone */
  --bg: #05070a;
  --bg-2: #07090d;
  --panel: #0a0d13;
  --panel-2: #0d1118;
  --panel-3: #11161f;
  --line: #1a2029;
  --line-2: #242b37;
  --line-hi: #2f3848;

  /* text: off-white, never pure white */
  --text: #f5f7fc;
  --text-2: #bcc4d4;
  --text-3: #929cb0;

  /* FATE violet: the only accent */
  --violet: #7a5cff;
  --violet-2: #8a68ff;
  --violet-hi: #c9bcff;
  --violet-dim: rgba(122, 92, 255, 0.14);
  --violet-line: rgba(138, 104, 255, 0.55);
  --violet-glow: rgba(122, 92, 255, 0.35);

  /* semantic: only for genuinely positive / negative values */
  --green: #3ddc97;
  --red: #f96579;
  --cyan: #4cc9f0;
  --amber: #e5b94a;


  /* 8px-ish spacing scale and restrained radii */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r1: 3px; --r2: 5px; --r3: 8px;

  --sidebar-w: 188px;
  --read-w: 300px;
  --topbar-h: 58px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, select { color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 1px solid var(--violet-2); outline-offset: 2px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--text-2); }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--panel-3); color: var(--text); padding: 8px 12px; border: 1px solid var(--line-hi); border-radius: var(--r2); }
.skip-link:focus { top: 8px; }

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

/* thin, quiet scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; }