/* scott_common shell buttons — 2956
 * ============================================================================
 * Every button in the staff shell is legible: a visible fill (or border) and
 * text at WCAG AA (>= 4.5:1) against the colour painted behind it, in light
 * AND dark mode. Before 2956 the shell coloured a WHITELIST of button classes
 * (brand_chrome.css's legibility net, tw_dark_compat.css's outline variants);
 * anything outside it could render white text on a white card — Superstore's
 * Filter / Add to ticket / Save outcome (2906, 2907, 2908: three occurrences =
 * a category, so this fixes the class).
 *
 * THE ROOT CAUSE this sheet answers: scott_common.css's raw-<button> baseline
 * (``.sr2-main button:not([class*="btn"])...``, specificity 0,5,1) repaints
 * every non-.btn <button> with the card surface. A Tailwind fill utility
 * (``bg-slate-800``, 0,1,0) loses to it, while ``text-white`` survives — white
 * on white. The legibility net only rescued the 17 fills it listed.
 *
 * THE RULES (tests/test_buttons_2956.py enforces them):
 *   1. Every colour literal lives in the token block between the
 *      ``@sc-tokens:start`` / ``@sc-tokens:end`` markers; rules use var().
 *   2. Tailwind fills: every hue x shade 500-950 on a button-like element gets
 *      its fill from ``--sc-btn-<hue>-<shade>`` and its ink from a token. A
 *      fill that already passes AA with white is its own Tailwind colour (no
 *      visual change); one that fails is deepened to the first AA shade, or —
 *      yellow / amber / lime, Tailwind's own convention — keeps its fill and
 *      takes dark ink. The unit test checks every pair >= 4.5:1.
 *   3. Non-solid Bootstrap buttons (outline-*, link, plain .btn) carry an
 *      opaque surface fill, so their text never depends on which card they
 *      sit on (a Bootstrap ``.bg-white`` card stays white in dark mode —
 *      its !important beats tw_dark_compat).
 *   4. Scoped to the shell content well (``.sc-main`` / ``.sr2-main``): the
 *      sidebar, header, palette and the kiosk pill buttons keep their own
 *      styling. Loaded after brand_chrome.css, before the app's shell_css.
 *
 * CHECK: ``scott_common.qa.button_contrast`` audits a live page for exactly
 * this; apps add one line to their Playwright walkthroughs (SPEC §qa).
 * ========================================================================== */

/* @sc-tokens:start */
:root {
  --sc-btn-ink-light: #ffffff;
  --sc-btn-ink-dark:  #0f172a;
  /* surface behind non-solid buttons: the card colour, flips with the theme */
  --sc-btn-surface:   var(--card-bg);
  --sc-btn-neutral-fg:     #0f172a;
  --sc-btn-neutral-bg:     #f1f5f9;
  --sc-btn-neutral-border: #cbd5e1;
  --sc-btn-hover-filter:   brightness(0.9);
  --sc-btn-slate-500: #64748b;
  --sc-btn-slate-600: #475569;
  --sc-btn-slate-700: #334155;
  --sc-btn-slate-800: #1e293b;
  --sc-btn-slate-900: #0f172a;
  --sc-btn-slate-950: #020617;
  --sc-btn-gray-500: #6b7280;
  --sc-btn-gray-600: #4b5563;
  --sc-btn-gray-700: #374151;
  --sc-btn-gray-800: #1f2937;
  --sc-btn-gray-900: #111827;
  --sc-btn-gray-950: #030712;
  --sc-btn-zinc-500: #71717a;
  --sc-btn-zinc-600: #52525b;
  --sc-btn-zinc-700: #3f3f46;
  --sc-btn-zinc-800: #27272a;
  --sc-btn-zinc-900: #18181b;
  --sc-btn-zinc-950: #09090b;
  --sc-btn-neutral-500: #737373;
  --sc-btn-neutral-600: #525252;
  --sc-btn-neutral-700: #404040;
  --sc-btn-neutral-800: #262626;
  --sc-btn-neutral-900: #171717;
  --sc-btn-neutral-950: #0a0a0a;
  --sc-btn-stone-500: #78716c;
  --sc-btn-stone-600: #57534e;
  --sc-btn-stone-700: #44403c;
  --sc-btn-stone-800: #292524;
  --sc-btn-stone-900: #1c1917;
  --sc-btn-stone-950: #0c0a09;
  --sc-btn-red-500: #dc2626;  /* #ef4444 is under AA with white text; deepened */
  --sc-btn-red-600: #dc2626;
  --sc-btn-red-700: #b91c1c;
  --sc-btn-red-800: #991b1b;
  --sc-btn-red-900: #7f1d1d;
  --sc-btn-red-950: #450a0a;
  --sc-btn-orange-500: #c2410c;  /* #f97316 is under AA with white text; deepened */
  --sc-btn-orange-600: #c2410c;  /* #ea580c is under AA with white text; deepened */
  --sc-btn-orange-700: #c2410c;
  --sc-btn-orange-800: #9a3412;
  --sc-btn-orange-900: #7c2d12;
  --sc-btn-orange-950: #431407;
  --sc-btn-amber-500: #f59e0b;  /* dark ink: white on this fill is under AA */
  --sc-btn-amber-500-ink: var(--sc-btn-ink-dark);
  --sc-btn-amber-600: #d97706;  /* dark ink: white on this fill is under AA */
  --sc-btn-amber-600-ink: var(--sc-btn-ink-dark);
  --sc-btn-amber-700: #b45309;
  --sc-btn-amber-800: #92400e;
  --sc-btn-amber-900: #78350f;
  --sc-btn-amber-950: #451a03;
  --sc-btn-yellow-500: #eab308;  /* dark ink: white on this fill is under AA */
  --sc-btn-yellow-500-ink: var(--sc-btn-ink-dark);
  --sc-btn-yellow-600: #ca8a04;  /* dark ink: white on this fill is under AA */
  --sc-btn-yellow-600-ink: var(--sc-btn-ink-dark);
  --sc-btn-yellow-700: #a16207;
  --sc-btn-yellow-800: #854d0e;
  --sc-btn-yellow-900: #713f12;
  --sc-btn-yellow-950: #422006;
  --sc-btn-lime-500: #84cc16;  /* dark ink: white on this fill is under AA */
  --sc-btn-lime-500-ink: var(--sc-btn-ink-dark);
  --sc-btn-lime-600: #65a30d;  /* dark ink: white on this fill is under AA */
  --sc-btn-lime-600-ink: var(--sc-btn-ink-dark);
  --sc-btn-lime-700: #4d7c0f;
  --sc-btn-lime-800: #3f6212;
  --sc-btn-lime-900: #365314;
  --sc-btn-lime-950: #1a2e05;
  --sc-btn-green-500: #15803d;  /* #22c55e is under AA with white text; deepened */
  --sc-btn-green-600: #15803d;  /* #16a34a is under AA with white text; deepened */
  --sc-btn-green-700: #15803d;
  --sc-btn-green-800: #166534;
  --sc-btn-green-900: #14532d;
  --sc-btn-green-950: #052e16;
  --sc-btn-emerald-500: #047857;  /* #10b981 is under AA with white text; deepened */
  --sc-btn-emerald-600: #047857;  /* #059669 is under AA with white text; deepened */
  --sc-btn-emerald-700: #047857;
  --sc-btn-emerald-800: #065f46;
  --sc-btn-emerald-900: #064e3b;
  --sc-btn-emerald-950: #022c22;
  --sc-btn-teal-500: #0f766e;  /* #14b8a6 is under AA with white text; deepened */
  --sc-btn-teal-600: #0f766e;  /* #0d9488 is under AA with white text; deepened */
  --sc-btn-teal-700: #0f766e;
  --sc-btn-teal-800: #115e59;
  --sc-btn-teal-900: #134e4a;
  --sc-btn-teal-950: #042f2e;
  --sc-btn-cyan-500: #0e7490;  /* #06b6d4 is under AA with white text; deepened */
  --sc-btn-cyan-600: #0e7490;  /* #0891b2 is under AA with white text; deepened */
  --sc-btn-cyan-700: #0e7490;
  --sc-btn-cyan-800: #155e75;
  --sc-btn-cyan-900: #164e63;
  --sc-btn-cyan-950: #083344;
  --sc-btn-sky-500: #0369a1;  /* #0ea5e9 is under AA with white text; deepened */
  --sc-btn-sky-600: #0369a1;  /* #0284c7 is under AA with white text; deepened */
  --sc-btn-sky-700: #0369a1;
  --sc-btn-sky-800: #075985;
  --sc-btn-sky-900: #0c4a6e;
  --sc-btn-sky-950: #082f49;
  --sc-btn-blue-500: #2563eb;  /* #3b82f6 is under AA with white text; deepened */
  --sc-btn-blue-600: #2563eb;
  --sc-btn-blue-700: #1d4ed8;
  --sc-btn-blue-800: #1e40af;
  --sc-btn-blue-900: #1e3a8a;
  --sc-btn-blue-950: #172554;
  --sc-btn-indigo-500: #4f46e5;  /* #6366f1 is under AA with white text; deepened */
  --sc-btn-indigo-600: #4f46e5;
  --sc-btn-indigo-700: #4338ca;
  --sc-btn-indigo-800: #3730a3;
  --sc-btn-indigo-900: #312e81;
  --sc-btn-indigo-950: #1e1b4b;
  --sc-btn-violet-500: #7c3aed;  /* #8b5cf6 is under AA with white text; deepened */
  --sc-btn-violet-600: #7c3aed;
  --sc-btn-violet-700: #6d28d9;
  --sc-btn-violet-800: #5b21b6;
  --sc-btn-violet-900: #4c1d95;
  --sc-btn-violet-950: #2e1065;
  --sc-btn-purple-500: #9333ea;  /* #a855f7 is under AA with white text; deepened */
  --sc-btn-purple-600: #9333ea;
  --sc-btn-purple-700: #7e22ce;
  --sc-btn-purple-800: #6b21a8;
  --sc-btn-purple-900: #581c87;
  --sc-btn-purple-950: #3b0764;
  --sc-btn-fuchsia-500: #c026d3;  /* #d946ef is under AA with white text; deepened */
  --sc-btn-fuchsia-600: #c026d3;
  --sc-btn-fuchsia-700: #a21caf;
  --sc-btn-fuchsia-800: #86198f;
  --sc-btn-fuchsia-900: #701a75;
  --sc-btn-fuchsia-950: #4a044e;
  --sc-btn-pink-500: #db2777;  /* #ec4899 is under AA with white text; deepened */
  --sc-btn-pink-600: #db2777;
  --sc-btn-pink-700: #be185d;
  --sc-btn-pink-800: #9d174d;
  --sc-btn-pink-900: #831843;
  --sc-btn-pink-950: #500724;
  --sc-btn-rose-500: #e11d48;  /* #f43f5e is under AA with white text; deepened */
  --sc-btn-rose-600: #e11d48;
  --sc-btn-rose-700: #be123c;
  --sc-btn-rose-800: #9f1239;
  --sc-btn-rose-900: #881337;
  --sc-btn-rose-950: #4c0519;
}
[data-theme="dark"] {
  --sc-btn-neutral-fg:     #f1f5f9;
  --sc-btn-neutral-bg:     #273548;
  --sc-btn-neutral-border: #475569;
}
/* @sc-tokens:end */

/* ── 1. Tailwind fill utilities on buttons (the white-on-white class) ────── */
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-500 { background-color: var(--sc-btn-slate-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-600 { background-color: var(--sc-btn-slate-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-700 { background-color: var(--sc-btn-slate-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-800 { background-color: var(--sc-btn-slate-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-900 { background-color: var(--sc-btn-slate-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-950 { background-color: var(--sc-btn-slate-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-500 { background-color: var(--sc-btn-gray-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-600 { background-color: var(--sc-btn-gray-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-700 { background-color: var(--sc-btn-gray-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-800 { background-color: var(--sc-btn-gray-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-900 { background-color: var(--sc-btn-gray-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-950 { background-color: var(--sc-btn-gray-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-500 { background-color: var(--sc-btn-zinc-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-600 { background-color: var(--sc-btn-zinc-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-700 { background-color: var(--sc-btn-zinc-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-800 { background-color: var(--sc-btn-zinc-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-900 { background-color: var(--sc-btn-zinc-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-950 { background-color: var(--sc-btn-zinc-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-500 { background-color: var(--sc-btn-neutral-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-600 { background-color: var(--sc-btn-neutral-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-700 { background-color: var(--sc-btn-neutral-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-800 { background-color: var(--sc-btn-neutral-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-900 { background-color: var(--sc-btn-neutral-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-950 { background-color: var(--sc-btn-neutral-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-500 { background-color: var(--sc-btn-stone-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-600 { background-color: var(--sc-btn-stone-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-700 { background-color: var(--sc-btn-stone-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-800 { background-color: var(--sc-btn-stone-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-900 { background-color: var(--sc-btn-stone-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-950 { background-color: var(--sc-btn-stone-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-500 { background-color: var(--sc-btn-red-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-600 { background-color: var(--sc-btn-red-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-700 { background-color: var(--sc-btn-red-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-800 { background-color: var(--sc-btn-red-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-900 { background-color: var(--sc-btn-red-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-red-950 { background-color: var(--sc-btn-red-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-500 { background-color: var(--sc-btn-orange-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-600 { background-color: var(--sc-btn-orange-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-700 { background-color: var(--sc-btn-orange-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-800 { background-color: var(--sc-btn-orange-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-900 { background-color: var(--sc-btn-orange-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-orange-950 { background-color: var(--sc-btn-orange-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-500 { background-color: var(--sc-btn-amber-500) !important; color: var(--sc-btn-amber-500-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-600 { background-color: var(--sc-btn-amber-600) !important; color: var(--sc-btn-amber-600-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-700 { background-color: var(--sc-btn-amber-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-800 { background-color: var(--sc-btn-amber-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-900 { background-color: var(--sc-btn-amber-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-amber-950 { background-color: var(--sc-btn-amber-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-500 { background-color: var(--sc-btn-yellow-500) !important; color: var(--sc-btn-yellow-500-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-600 { background-color: var(--sc-btn-yellow-600) !important; color: var(--sc-btn-yellow-600-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-700 { background-color: var(--sc-btn-yellow-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-800 { background-color: var(--sc-btn-yellow-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-900 { background-color: var(--sc-btn-yellow-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-yellow-950 { background-color: var(--sc-btn-yellow-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-500 { background-color: var(--sc-btn-lime-500) !important; color: var(--sc-btn-lime-500-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-600 { background-color: var(--sc-btn-lime-600) !important; color: var(--sc-btn-lime-600-ink) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-700 { background-color: var(--sc-btn-lime-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-800 { background-color: var(--sc-btn-lime-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-900 { background-color: var(--sc-btn-lime-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-lime-950 { background-color: var(--sc-btn-lime-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-500 { background-color: var(--sc-btn-green-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-600 { background-color: var(--sc-btn-green-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-700 { background-color: var(--sc-btn-green-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-800 { background-color: var(--sc-btn-green-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-900 { background-color: var(--sc-btn-green-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-green-950 { background-color: var(--sc-btn-green-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-500 { background-color: var(--sc-btn-emerald-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-600 { background-color: var(--sc-btn-emerald-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-700 { background-color: var(--sc-btn-emerald-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-800 { background-color: var(--sc-btn-emerald-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-900 { background-color: var(--sc-btn-emerald-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-emerald-950 { background-color: var(--sc-btn-emerald-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-500 { background-color: var(--sc-btn-teal-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-600 { background-color: var(--sc-btn-teal-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-700 { background-color: var(--sc-btn-teal-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-800 { background-color: var(--sc-btn-teal-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-900 { background-color: var(--sc-btn-teal-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-teal-950 { background-color: var(--sc-btn-teal-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-500 { background-color: var(--sc-btn-cyan-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-600 { background-color: var(--sc-btn-cyan-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-700 { background-color: var(--sc-btn-cyan-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-800 { background-color: var(--sc-btn-cyan-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-900 { background-color: var(--sc-btn-cyan-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-cyan-950 { background-color: var(--sc-btn-cyan-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-500 { background-color: var(--sc-btn-sky-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-600 { background-color: var(--sc-btn-sky-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-700 { background-color: var(--sc-btn-sky-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-800 { background-color: var(--sc-btn-sky-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-900 { background-color: var(--sc-btn-sky-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-sky-950 { background-color: var(--sc-btn-sky-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-500 { background-color: var(--sc-btn-blue-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-600 { background-color: var(--sc-btn-blue-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-700 { background-color: var(--sc-btn-blue-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-800 { background-color: var(--sc-btn-blue-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-900 { background-color: var(--sc-btn-blue-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-blue-950 { background-color: var(--sc-btn-blue-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-500 { background-color: var(--sc-btn-indigo-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-600 { background-color: var(--sc-btn-indigo-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-700 { background-color: var(--sc-btn-indigo-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-800 { background-color: var(--sc-btn-indigo-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-900 { background-color: var(--sc-btn-indigo-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-indigo-950 { background-color: var(--sc-btn-indigo-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-500 { background-color: var(--sc-btn-violet-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-600 { background-color: var(--sc-btn-violet-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-700 { background-color: var(--sc-btn-violet-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-800 { background-color: var(--sc-btn-violet-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-900 { background-color: var(--sc-btn-violet-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-violet-950 { background-color: var(--sc-btn-violet-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-500 { background-color: var(--sc-btn-purple-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-600 { background-color: var(--sc-btn-purple-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-700 { background-color: var(--sc-btn-purple-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-800 { background-color: var(--sc-btn-purple-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-900 { background-color: var(--sc-btn-purple-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-purple-950 { background-color: var(--sc-btn-purple-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-500 { background-color: var(--sc-btn-fuchsia-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-600 { background-color: var(--sc-btn-fuchsia-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-700 { background-color: var(--sc-btn-fuchsia-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-800 { background-color: var(--sc-btn-fuchsia-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-900 { background-color: var(--sc-btn-fuchsia-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-fuchsia-950 { background-color: var(--sc-btn-fuchsia-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-500 { background-color: var(--sc-btn-pink-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-600 { background-color: var(--sc-btn-pink-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-700 { background-color: var(--sc-btn-pink-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-800 { background-color: var(--sc-btn-pink-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-900 { background-color: var(--sc-btn-pink-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-pink-950 { background-color: var(--sc-btn-pink-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-500 { background-color: var(--sc-btn-rose-500) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-600 { background-color: var(--sc-btn-rose-600) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-700 { background-color: var(--sc-btn-rose-700) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-800 { background-color: var(--sc-btn-rose-800) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-900 { background-color: var(--sc-btn-rose-900) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-rose-950 { background-color: var(--sc-btn-rose-950) !important; color: var(--sc-btn-ink-light) !important; }
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset])[class*="bg-"]:not(:disabled):hover { filter: var(--sc-btn-hover-filter); }

/* ── 2. Neutral Tailwind buttons (bg-white / slate|gray|zinc|neutral|stone
 *       50-300). Light mode: dark ink (a stray text-white would vanish).
 *       Dark mode: a lifted surface + light ink + visible border. ────────── */
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-white,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-50,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-100,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-200,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-300,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-50,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-100,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-200,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-300,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-50,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-100,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-200,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-300,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-50,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-100,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-200,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-300,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-50,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-100,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-200,
:is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-300 {
  color: var(--sc-btn-neutral-fg) !important;
}
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-white,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-50,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-100,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-200,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-slate-300,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-50,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-100,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-200,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-gray-300,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-50,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-100,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-200,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-zinc-300,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-50,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-100,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-200,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-neutral-300,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-50,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-100,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-200,
[data-theme="dark"] :is(.sc-main, .sr2-main) :is(button, a, .btn, [role=button], input[type=submit], input[type=button], input[type=reset]).bg-stone-300 {
  background-color: var(--sc-btn-neutral-bg) !important;
  border-color: var(--sc-btn-neutral-border) !important;
}

/* ── 3. Bootstrap: every non-solid .btn paints an opaque surface ─────────── */
:is(.sc-main, .sr2-main) .btn:not(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark) {
  --bs-btn-bg: var(--sc-btn-surface);
  --bs-btn-disabled-bg: var(--sc-btn-surface);
}
/* outline-light is white-on-white on a light card; outline-dark is dark-on-dark
   in dark mode. Both take the neutral ink + border so they read anywhere. */
:is(.sc-main, .sr2-main) .btn-outline-light,
[data-theme="dark"] :is(.sc-main, .sr2-main) .btn-outline-dark {
  --bs-btn-color: var(--sc-btn-neutral-fg);
  --bs-btn-border-color: var(--sc-btn-neutral-border);
  --bs-btn-hover-bg: var(--sc-btn-neutral-bg);
  --bs-btn-hover-color: var(--sc-btn-neutral-fg);
  --bs-btn-hover-border-color: var(--sc-btn-neutral-border);
  --bs-btn-active-bg: var(--sc-btn-neutral-bg);
  --bs-btn-active-color: var(--sc-btn-neutral-fg);
}

/* ── 4. A link dressed as a button with no class of its own ─────────────── */
:is(.sc-main, .sr2-main) a[role=button]:not([class*="btn"]):not([class*="bg-"]):not([class*="sr2"]):not([class*="sc-"]) {
  display: inline-block;
  background: var(--sc-btn-surface);
  color: var(--accent-fg);
  border: 1px solid var(--card-border);
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
}

/* 2957 — the sidebar search "Go" (shell/_shell_nav.html, rendered when the
 * brand sets search_url_name) sits on the navy sidebar, OUTSIDE the content
 * well, and its .scott-btn--secondary classes are only styled where an app
 * links components.css — elsewhere it was slate-900 ink on the navy sidebar
 * (1.23:1, found by assert_buttons_legible on the 2957 walk). Neutral chip,
 * both themes, tokens only. */
.sr2-sidebar [data-nav-search] button {
  background-color: var(--sc-btn-neutral-bg);
  color: var(--sc-btn-neutral-fg);
  border: 1px solid var(--sc-btn-neutral-border);
}