/* ============================================================================
   WesternDraw — shared design system
   Linked FIRST on every page, so page-level <style> still wins on specifics.
   This file owns the cross-cutting primitives that are awkward to duplicate
   per page: brand tokens, custom scrollbars, text selection, a single global
   focus-visible ring, and reduced-motion handling.
   ============================================================================ */

:root {
  /* Canonical brand tokens — the single source of truth. Page styles may still
     redefine these locally (e.g. the print palette in plan.html); that's fine. */
  --bg:        #0d0f12;
  --surface:   #161a20;
  --surface2:  #1d2230;
  --border:    #242830;
  --border2:   #2e3540;
  --primary:   #e07b39;
  --primary-d: #c8652c;
  --primary-a: rgba(224,123,57,0.12);
  --muted:     #6b7280;
  --text:      #e8eaed;
  --text-sub:  #9ca3af;
  --success:   #34d399;
  --warning:   #fbbf24;
  --danger:    #f87171;
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --radius: 10px;

  /* One shared focus ring so every control matches. */
  --focus-ring: 0 0 0 3px rgba(224,123,57,0.35);
}

/* ── Custom thin scrollbars (Chromium/WebKit) ────────────────────────────── */
* {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: #2e3540 transparent;        /* Firefox: thumb / track */
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2a303c;
  border: 2px solid var(--bg, #0d0f12);        /* inset look */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #3a4252; }
::-webkit-scrollbar-corner { background: transparent; }

/* ── Brand text selection ────────────────────────────────────────────────── */
::selection { background: rgba(224,123,57,0.30); color: #fff; }

/* ── One global focus-visible ring for every interactive element ─────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  /* Outline only — never mutate the element's own border-radius, or pill/round
     controls would visibly reshape while focused. */
  outline: 2px solid var(--primary, #e07b39);
  outline-offset: 2px;
}
/* Never show the ring for mouse users (belt-and-braces for older engines). */
:focus:not(:focus-visible) { outline: none; }

/* ── Respect reduced-motion preferences ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
</content>