/* ===========================================================================
 * QCU Cooperative — Brand Overrides (v2.0 · 2026-05-28)
 * ---------------------------------------------------------------------------
 * Remaps Tailwind's cool defaults (slate/sky/blue/indigo/cyan/zinc/neutral)
 * to the brand's warm palette. Loaded AFTER tailwind + brand-tokens +
 * brand-components + brand-motion so its !important rules win.
 *
 * Inline <style> in pages always wins over this file (specificity escape).
 *
 *   <link rel="stylesheet" href="/assets/css/brand-overrides.css">
 *
 * Documentation: docs/plans/2026-05-28-brand-system-v2-design.md §2.D
 * ========================================================================= */

/* ---- Body baseline ---- */
body {
  background: var(--qcu-bg-page);
  color: var(--qcu-text-primary);
  font-family: var(--qcu-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 * Cool grays → warm
 * (Tailwind slate, gray, zinc, neutral families)
 * ============================================================ */
.bg-slate-50,  .bg-gray-50,  .bg-zinc-50,  .bg-neutral-50,
.bg-stone-50                                                       { background-color: var(--qcu-bg-page)    !important; }
.bg-slate-100, .bg-gray-100, .bg-zinc-100, .bg-neutral-100,
.bg-stone-100                                                      { background-color: var(--qcu-cream-deep) !important; }
.bg-slate-200, .bg-gray-200, .bg-zinc-200, .bg-neutral-200,
.bg-stone-200                                                      { background-color: var(--qcu-cream-deep) !important; }

.text-slate-300, .text-gray-300, .text-zinc-300, .text-neutral-300 { color: var(--qcu-text-disabled)  !important; }
.text-slate-400, .text-gray-400, .text-zinc-400, .text-neutral-400 { color: var(--qcu-text-disabled)  !important; }
.text-slate-500, .text-gray-500, .text-zinc-500, .text-neutral-500 { color: var(--qcu-text-secondary) !important; }
.text-slate-600, .text-gray-600, .text-zinc-600, .text-neutral-600 { color: var(--qcu-text-secondary) !important; }
.text-slate-700, .text-gray-700, .text-zinc-700, .text-neutral-700 { color: var(--qcu-text-primary)   !important; }
.text-slate-800, .text-gray-800, .text-zinc-800, .text-neutral-800 { color: var(--qcu-text-primary)   !important; }
.text-slate-900, .text-gray-900, .text-zinc-900, .text-neutral-900 { color: var(--qcu-text-primary)   !important; }

.border-slate-100, .border-gray-100, .border-zinc-100              { border-color: var(--qcu-border-subtle) !important; }
.border-slate-200, .border-gray-200, .border-zinc-200              { border-color: var(--qcu-border-subtle) !important; }
.border-slate-300, .border-gray-300, .border-zinc-300              { border-color: var(--qcu-border-subtle) !important; }

/* ============================================================
 * Opacity variants — Tailwind /N modifier classes
 * (border-slate-200/60, bg-white/80, border-white/30, etc.)
 * Tailwind compiles these to rgba() — override with rgba()
 * versions of brand tokens so opacity intent is preserved.
 * ============================================================ */
.border-slate-200\/60, .border-gray-200\/60                  { border-color: rgba(232, 223, 201, 0.6) !important; }  /* --qcu-border @ 60% */
.border-slate-200\/70, .border-gray-200\/70                  { border-color: rgba(232, 223, 201, 0.7) !important; }
.border-slate-200\/80, .border-gray-200\/80                  { border-color: rgba(232, 223, 201, 0.8) !important; }

.bg-white\/70                                                  { background-color: rgba(255, 255, 255, 0.7) !important; }
.bg-white\/80                                                  { background-color: rgba(255, 255, 255, 0.8) !important; }
.bg-white\/90                                                  { background-color: rgba(255, 255, 255, 0.9) !important; }

.border-white\/10                                              { border-color: rgba(255, 255, 255, 0.1) !important; }
.border-white\/20                                              { border-color: rgba(255, 255, 255, 0.2) !important; }
.border-white\/30                                              { border-color: rgba(255, 255, 255, 0.3) !important; }
.border-white\/40                                              { border-color: rgba(255, 255, 255, 0.4) !important; }

/* ============================================================
 * Cool accents → forest
 * (blue, sky, indigo, cyan families)
 * ============================================================ */
.bg-blue-50,  .bg-sky-50,  .bg-indigo-50,  .bg-cyan-50    { background-color: var(--qcu-action-tint)    !important; }
.bg-blue-100, .bg-sky-100, .bg-indigo-100, .bg-cyan-100   { background-color: var(--qcu-action-tint)    !important; }
.bg-blue-500, .bg-sky-500, .bg-indigo-500, .bg-cyan-500   { background-color: var(--qcu-action-primary) !important; }
.bg-blue-600, .bg-sky-600, .bg-indigo-600, .bg-cyan-600   { background-color: var(--qcu-action-primary) !important; }
.bg-blue-700, .bg-sky-700, .bg-indigo-700, .bg-cyan-700   { background-color: var(--qcu-action-hover)   !important; }

.text-blue-500, .text-sky-500, .text-indigo-500, .text-cyan-500 { color: var(--qcu-action-primary) !important; }
.text-blue-600, .text-sky-600, .text-indigo-600, .text-cyan-600 { color: var(--qcu-action-primary) !important; }
.text-blue-700, .text-sky-700, .text-indigo-700, .text-cyan-700 { color: var(--qcu-action-hover)   !important; }

.border-blue-500, .border-sky-500, .border-indigo-500, .border-cyan-500 { border-color: var(--qcu-action-primary) !important; }
.border-blue-600, .border-sky-600, .border-indigo-600                    { border-color: var(--qcu-action-primary) !important; }

/* hover variants */
.hover\:bg-blue-700:hover, .hover\:bg-sky-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--qcu-action-hover) !important; }
.hover\:bg-blue-50:hover,  .hover\:bg-sky-50:hover                                { background-color: var(--qcu-action-tint)  !important; }

/* ============================================================
 * Brand greens → brand forest
 * (the brand IS green — collapse existing emerald/green onto it)
 * ============================================================ */
.bg-green-50,  .bg-emerald-50    { background-color: var(--qcu-action-tint)    !important; }
.bg-green-500, .bg-emerald-500   { background-color: var(--qcu-action-primary) !important; }
.bg-green-600, .bg-emerald-600   { background-color: var(--qcu-action-primary) !important; }
.bg-green-700, .bg-emerald-700   { background-color: var(--qcu-action-hover)   !important; }
.text-green-600, .text-emerald-600, .text-green-700, .text-emerald-700 { color: var(--qcu-action-primary) !important; }
.border-green-500, .border-emerald-500 { border-color: var(--qcu-action-primary) !important; }

/* ============================================================
 * Orange/amber → terracotta accent
 * ============================================================ */
.bg-orange-50, .bg-amber-50      { background-color: var(--qcu-accent-tint) !important; }
.bg-orange-500, .bg-amber-500    { background-color: var(--qcu-accent)      !important; }
.bg-orange-600, .bg-amber-600    { background-color: var(--qcu-accent)      !important; }
.text-orange-600, .text-amber-600 { color: var(--qcu-accent) !important; }

/* Red stays as the semantic danger color. */

/* ============================================================
 * Extended palette → brand collapse
 * (purple/violet/fuchsia/pink/rose families collapse to accent
 *  teal/lime collapse to brand forest; yellow stays semantic)
 * ============================================================ */
.bg-purple-50, .bg-violet-50, .bg-fuchsia-50, .bg-pink-50, .bg-rose-50 { background-color: var(--qcu-accent-tint) !important; }
.bg-purple-500, .bg-violet-500, .bg-fuchsia-500, .bg-pink-500, .bg-rose-500 { background-color: var(--qcu-accent) !important; }
.bg-purple-600, .bg-violet-600, .bg-fuchsia-600, .bg-pink-600, .bg-rose-600 { background-color: var(--qcu-accent) !important; }
.bg-purple-700, .bg-violet-700, .bg-fuchsia-700, .bg-pink-700, .bg-rose-700 { background-color: #9C4A2A !important; /* terracotta darker */ }

.text-purple-500, .text-violet-500, .text-fuchsia-500, .text-pink-500, .text-rose-500 { color: var(--qcu-accent) !important; }
.text-purple-600, .text-violet-600, .text-fuchsia-600, .text-pink-600, .text-rose-600 { color: var(--qcu-accent) !important; }
.text-purple-700, .text-violet-700, .text-fuchsia-700, .text-pink-700, .text-rose-700 { color: var(--qcu-accent) !important; }

.border-purple-500, .border-violet-500, .border-fuchsia-500, .border-pink-500, .border-rose-500 { border-color: var(--qcu-accent) !important; }

.bg-teal-50, .bg-lime-50                                  { background-color: var(--qcu-action-tint) !important; }
.bg-teal-500, .bg-teal-600, .bg-lime-500, .bg-lime-600    { background-color: var(--qcu-action-primary) !important; }
.text-teal-600, .text-teal-700, .text-lime-600            { color: var(--qcu-action-primary) !important; }

.bg-yellow-100, .bg-yellow-50                              { background-color: var(--qcu-accent-tint) !important; }
.bg-yellow-500, .bg-yellow-600                             { background-color: var(--qcu-warning) !important; }
.text-yellow-600, .text-yellow-700                         { color: var(--qcu-warning) !important; }

/* Additional gray family weights commonly used */
.bg-slate-50\/80, .bg-gray-50\/80                          { background-color: rgba(252,246,234,0.8) !important; }
.bg-slate-100\/80, .bg-gray-100\/80                        { background-color: rgba(245,235,211,0.8) !important; }

/* Tailwind text on the 950 weight (newer) */
.text-slate-950, .text-gray-950, .text-zinc-950            { color: var(--qcu-text-primary) !important; }

/* ============================================================
 * Focus rings — replace blue with forest
 * ============================================================ */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--qcu-action-primary) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px var(--qcu-action-tint) !important;
}
/* Override Tailwind's blue focus rings */
.focus\:ring-blue-500:focus, .focus\:ring-sky-500:focus, .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--qcu-action-primary) !important;
}

/* ============================================================
 * Bare form controls (no Tailwind classes)
 * ============================================================ */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]),
select:not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]),
textarea:not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]) {
  background-color: var(--qcu-bg-page);
  border: 1px solid var(--qcu-border-subtle);
  color: var(--qcu-text-primary);
  border-radius: var(--qcu-r-md);
  padding: 11px 14px;
  font-family: var(--qcu-font-body);
  font-size: 14px;
  transition: border-color var(--qcu-d-quick) var(--qcu-ease-natural),
              background-color var(--qcu-d-quick) var(--qcu-ease-natural),
              box-shadow var(--qcu-d-quick) var(--qcu-ease-natural);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=range]):not([type=color]):not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]):focus,
select:not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]):focus,
textarea:not([class*="qcu-"]):not([class*="bg-"]):not([class*="border-"]):focus {
  outline: none;
  background-color: var(--qcu-bg-surface);
  border-color: var(--qcu-action-primary);
  box-shadow: 0 0 0 3px var(--qcu-action-tint);
}

/* ============================================================
 * Selection
 * ============================================================ */
::selection {
  background: var(--qcu-action-tint);
  color: var(--qcu-text-primary);
}