/* ============================================================================
   DrillIQ skin — re-colors the compiled React (Tailwind) "brand" palette onto
   the StrokeIQ suite. Loaded AFTER the Vite bundle CSS so these win.
   DrillIQ accent = #A83C65 (matches its dashboard tile).
   ============================================================================ */

:root { --drilliq: #A83C65; }

/* App typography → Inter (matches StrokeIQ desktop) */
#root, #root * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── Brand backgrounds ──────────────────────────────────────────────────── */
.bg-brand-600 { background-color: #A83C65 !important; }
.bg-brand-500 { background-color: #BE4B78 !important; }
.bg-brand-400 { background-color: #CE6E94 !important; }
.bg-brand-100 { background-color: #F6E6ED !important; }
.bg-brand-50  { background-color: #FBF1F5 !important; }
.bg-brand-50\/30 { background-color: #FBF1F54d !important; }
.hover\:bg-brand-200:hover { background-color: #ECC9D6 !important; }
.hover\:bg-brand-700:hover { background-color: #8A2F52 !important; }

/* ── Brand text ─────────────────────────────────────────────────────────── */
.text-brand-700 { color: #8A2F52 !important; }
.text-brand-600 { color: #A83C65 !important; }
.text-brand-500 { color: #BE4B78 !important; }
.text-brand-400 { color: #CE6E94 !important; }

.bg-brand-200 { background-color: #ECC9D6 !important; }
.bg-brand-700 { background-color: #8A2F52 !important; }
.hover\:bg-brand-50:hover  { background-color: #FBF1F5 !important; }
.hover\:bg-brand-600:hover { background-color: #A83C65 !important; }
.hover\:text-brand-600:hover { color: #A83C65 !important; }

/* ── Brand borders / rings / shadow ─────────────────────────────────────── */
.border-brand-500 { border-color: #A83C65 !important; }
.border-brand-200 { border-color: #E8C4D3 !important; }
.ring-brand-50    { --tw-ring-color: #FBF1F5 !important; }
.ring-brand-500   { --tw-ring-color: #A83C65 !important; }
.focus\:ring-brand-500:focus { --tw-ring-color: #A83C65 !important; }
.focus\:ring-brand-500\/50:focus { --tw-ring-color: rgba(168, 60, 101, 0.5) !important; }
.focus\:border-brand-500:focus { border-color: #A83C65 !important; }
.shadow-brand-200 { --tw-shadow-color: #E8C4D3 !important; --tw-shadow: var(--tw-shadow-colored) !important; }