@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;700&display=swap');

:root {
  --crema: #FFF8F0;
  --tinta: #1C1611;
  --chile: #E8432D;
  --mango: #F4A62A;
  --aguacate: #4C8C4A;
  --tan: #E4D5BD;
}

body {
  background: var(--crema) !important;
  color: var(--tinta);
  font-family: 'Work Sans', sans-serif;
}

h4, h1 {
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: -0.02em;
}

.btn-warning {
  background: var(--chile) !important;
  border-color: var(--chile) !important;
  color: white !important;
  font-weight: 600;
}

.btn-outline-warning {
  border-color: var(--chile) !important;
  color: var(--chile) !important;
}
.btn-outline-warning:hover {
  background: var(--chile) !important;
  color: white !important;
}

.btn-primary {
  background: var(--tinta) !important;
  border-color: var(--tinta) !important;
}

.btn-success {
  background: var(--aguacate) !important;
  border-color: var(--aguacate) !important;
}

.badge.bg-warning { background: var(--chile) !important; }
.badge.bg-success { background: var(--aguacate) !important; }
.badge.bg-primary { background: var(--tinta) !important; }

.card {
  border: 1px solid var(--tan) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.form-control, .form-select {
  border-color: var(--tan) !important;
  border-radius: 8px !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--chile) !important;
  box-shadow: 0 0 0 3px rgba(232,67,45,0.15) !important;
}