/* qmob-buttons.css — repo-wide button color unification for the whole qmob
   module: hand-written, outside the Tailwind bundle (no build tool for it
   in this repo) — same reasoning as sourcing-screen.css/config-screen.css/
   autocatalog-screen.css's own header comments.

   Root problem (2026-09-14 audit, verified live): buttons.css's legacy
   color aliases collapse ".btn.green" AND ".btn.purple" into the exact same
   fixed navy (--sidebar-bg), and their ".brd.<color>" outlines the same way
   — they are two names for one color, not two colors. Native intranet
   buttons (style.css .btn-primary/.btn-secondary, 944-965 + the BU-aware
   override at 2154-2168) use --accent-dark as primary (follows the active
   BU) and a white/--card-border/--text-primary secondary — never navy. This
   mismatch was already found and fixed area-by-area this session
   (sourcing-screen.css, autocatalog-screen.css); the owner asked for one
   single fix covering every qmob área at once instead of repeating the
   pattern per screen — this file is that fix, and it SUPERSEDES the
   per-área color rules that used to live in sourcing-screen.css and
   autocatalog-screen.css (both trimmed down to their own area-specific
   concerns in the same change that added this file).

   Deliberately UNSCOPED by área (no .page-qmob-* class needed): unlike the
   autocatalog-only version this replaces, this rule targets every
   html.qmob-scope screen directly, exactly like the Tailwind bundle's own
   .btn.brd.green/.btn.brd.purple rule does — so it also covers buttons that
   get relocated into .topbar-actions by qmobTopbarActions() (main.js) for
   free, via the same :is(main.content,.topbar-actions) prefix, without the
   per-screen "row gets its own class" workaround autocatalog-screen.css
   needed before this file existed.

   .blue/.red/.orange/.yellow/.teal/.pink are NOT touched: those already map
   to real semantic tokens (--info/--danger/--accent/--success) distinct
   from navy, confirmed against buttons.css — only the two navy-collapsing
   aliases needed remapping.

   Radius intentionally untouched: buttons.css's own .btn is already 3px,
   matching native's .btn exactly (verified) — no reason to change it here.
   */

html.qmob-scope :is(main.content, .topbar-actions) :is(.btn.green, .btn.purple) {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
	color: #fff;
}

html.qmob-scope :is(main.content, .topbar-actions) :is(.btn.green, .btn.purple):hover {
	background: var(--accent);
	border-color: var(--accent);
}

html.qmob-scope :is(main.content, .topbar-actions) :is(.btn.brd.green, .btn.brd.purple) {
	background: #fff;
	border-color: var(--card-border);
	color: var(--text-primary);
}

html.qmob-scope :is(main.content, .topbar-actions) :is(.btn.brd.green, .btn.brd.purple):hover {
	background: var(--card-bg);
	border-color: var(--accent);
	color: var(--accent-dark);
}

/* buttons.css's own "Q5 semantic variants (use on new templates)" defines
   .btn-primary as navy too (buttons.css:51-52) — that block is the source
   fixed in the same change that added this file, but it never reaches the
   compiled bundle today (0 uses anywhere in qmob templates, tree-shaken
   out — verified live). These two rules make the correct values ACTUALLY
   live right now, in case a template reaches for them before any future
   rebuild picks up the source fix. */
html.qmob-scope :is(main.content, .topbar-actions) .btn-primary {
	background: var(--accent-dark);
	color: #fff;
}

html.qmob-scope :is(main.content, .topbar-actions) .btn-primary:hover {
	background: var(--accent);
}

html.qmob-scope :is(main.content, .topbar-actions) .btn-secondary {
	background: #fff;
	border-color: var(--card-border);
	color: var(--text-primary);
}

html.qmob-scope :is(main.content, .topbar-actions) .btn-secondary:hover {
	background: var(--card-bg);
	border-color: var(--accent);
	color: var(--accent-dark);
}

/* buttons.css declares no :focus-visible for .btn at all — sourcing-screen.css
   had its own copy of this scoped to just its two header zones; centralized
   here so every button in the module gets a visible focus ring, not just
   Sourcing's. */
html.qmob-scope :is(main.content, .topbar-actions) .btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}