/* Load this AFTER app.css to override accent colors sitewide */

/* Brand variables for our custom components */
:root{
  --brand-50:#fef2f2;
  --brand-100:#fee2e2;
  --brand-200:#fecaca;
  --brand-300:#fca5a5;
  --brand-400:#f87171;
  --brand-500:#ef4444; /* primary */
  --brand-600:#dc2626; /* primary hover */
  --brand-700:#b91c1c;
  --brand-800:#991b1b;
  --brand-900:#7f1d1d;
}

/* Buttons */
.btn-primary{ background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#fff !important; }
.btn-primary:hover{ background:var(--brand-700) !important; border-color:var(--brand-700) !important; }
.btn-outline{ border-color:var(--brand-300) !important; color:var(--brand-700) !important; }
.btn-outline:hover{ background:var(--brand-50) !important; }

/* Links / text accents that previously used indigo */
a, .link, .link:hover{ color:var(--brand-700); }
.text-indigo-700{ color:var(--brand-700) !important; }
.dark .text-indigo-400{ color:var(--brand-400) !important; }

/* Common utility classes we used in markup */
.bg-indigo-600{ background-color:var(--brand-600) !important; }
.hover\:bg-indigo-700:hover{ background-color:var(--brand-700) !important; }
.border-indigo-200{ border-color:var(--brand-200) !important; }
.ring-indigo-500, .focus\:ring-indigo-500:focus{ --tw-ring-color: var(--brand-500) !important; }