/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --brand: #B33100;
  --brand-hover: #8f2700;
  --brand-soft: #fff2ec;
}

.bg-brand { background-color: var(--brand); }
.hover\:bg-brand-hover:hover { background-color: var(--brand-hover); }
.bg-brand-soft { background-color: var(--brand-soft); }

.text-brand { color: var(--brand); }
.hover\:text-brand-hover:hover { color: var(--brand-hover); }

.border-brand { border-color: var(--brand); }
.ring-brand { --tw-ring-color: var(--brand); }

.focus\:ring-brand:focus { --tw-ring-color: var(--brand); }
.focus\:border-brand:focus { border-color: var(--brand); }

/* Simple loading spinner animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin 1s linear infinite;
}