/* Top Dog / Alpha Pack Brand Colors */
:root {
  --brand-gold: #ebb142;
  --brand-navy: #172b3e;
  --brand-light-gray: #f7f7f7;
  --brand-black: #000000;
}

/* Override Tailwind colors with brand colors */
.bg-brand-gold { background-color: var(--brand-gold) !important; }
.bg-brand-navy { background-color: var(--brand-navy) !important; }
.bg-brand-light { background-color: var(--brand-light-gray) !important; }

.text-brand-gold { color: var(--brand-gold) !important; }
.text-brand-navy { color: var(--brand-navy) !important; }

.border-brand-gold { border-color: var(--brand-gold) !important; }
.border-brand-navy { border-color: var(--brand-navy) !important; }

/* Buttons */
.btn-brand-primary {
  background-color: var(--brand-gold);
  color: white;
  transition: opacity 0.2s;
}

.btn-brand-primary:hover {
  opacity: 0.9;
}

.btn-brand-secondary {
  background-color: var(--brand-navy);
  color: white;
  transition: opacity 0.2s;
}

.btn-brand-secondary:hover {
  opacity: 0.9;
}

/* Tab active state */
.tab-button.active {
  color: var(--brand-gold) !important;
  border-bottom-color: var(--brand-gold) !important;
}

/* Cards and metrics with brand colors */
.metric-card-gold {
  border-top: 4px solid var(--brand-gold);
}

.metric-card-navy {
  border-top: 4px solid var(--brand-navy);
}

/* Gradient backgrounds */
.bg-brand-gradient {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-gold) 100%);
}

/* Focus states */
input:focus, textarea:focus, select:focus {
  border-color: var(--brand-gold) !important;
  ring-color: var(--brand-gold) !important;
}