/* Shared design tokens — single source of truth for the colour palette.
   Linked by base.html (the app), login.html, and landing.html so the three
   can't drift. Page-specific layout tokens (--r, --shadow, --serif) stay in
   each page's own <style>. */
:root {
  color-scheme: dark;   /* native controls (spinners, scrollbars, pickers) render dark */
  --bg:#0c0c0e; --bg-2:#17171b; --side:#0f0f12; --panel:#141417; --panel-2:#17171b;
  --line:#232329; --line-2:#2e2e36;
  --fg:#e9e9ec; --fg-2:#c3c3ca; --mut:#82828c;
  --gold:#d6ab5b; --gold-2:#ecc377; --gold-weak:rgba(214,171,91,.12); --accent:#d6ab5b;
  --good:#5fb87a; --warn:#e0a93c; --bad:#e2766a;
}

/* keyboard focus: a clear gold ring on every interactive element (shared by the
   app, login, and landing). */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--gold-2); outline-offset:2px; border-radius:6px;
}

/* respect reduced-motion preference (WCAG 2.3.3 / motion sensitivity) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}