/* Beta — brand theme (orange/blue premium identity) */

:root {
  --brand-primary: #EA8424;
  --brand-primary-hover: #42707F;
  --brand-secondary: #42707F;
  --brand-bg: #F8F9FA;
  --brand-card: #FFFFFF;
  --brand-border: #E5E7EB;
  --brand-text: #1F2937;
  --brand-muted: #6B7280;
  --brand-success: #16A34A;
  --brand-danger: #DC2626;

  --radius: 12px;
  --radius-btn: 10px;
  --input-height: 48px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 80px;

  --shadow-soft: 0 4px 16px rgba(31, 41, 55, 0.06);
  --shadow-lift: 0 12px 32px rgba(31, 41, 55, 0.12);

  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 234, 132, 36;
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-success: var(--brand-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-warning: var(--brand-primary);
  --bs-warning-rgb: 234, 132, 36;
  --bs-dark: #17212B;
  --bs-dark-rgb: 23, 33, 43;

  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: 234, 132, 36;
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-link-hover-color-rgb: 66, 112, 127;

  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--brand-text);
  --bs-body-bg: var(--brand-bg);

  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--radius);
  --bs-border-radius-xl: 16px;

  --bs-box-shadow-sm: var(--shadow-soft);
  --bs-box-shadow: var(--shadow-lift);
}

html {
  overflow-x: hidden;
}
body {
  font-family: var(--bs-body-font-family);
  font-weight: 400;
  color: var(--brand-text);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-title, .section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: var(--brand-text);
  letter-spacing: -0.01em;
}

/* ---- Buttons ---- */
.btn {
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.btn:hover, .btn:focus {
  transform: translateY(-1px);
}

.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-hover);
  --bs-btn-hover-border-color: var(--brand-primary-hover);
  --bs-btn-active-bg: var(--brand-primary-hover);
  --bs-btn-active-border-color: var(--brand-primary-hover);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(234, 132, 36, 0.28);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(66, 112, 127, 0.3); }

.btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
}

.btn-outline-danger {
  --bs-btn-color: var(--brand-danger);
  --bs-btn-border-color: var(--brand-danger);
  --bs-btn-hover-bg: var(--brand-danger);
  --bs-btn-hover-border-color: var(--brand-danger);
  --bs-btn-active-bg: var(--brand-danger);
  --bs-btn-active-border-color: var(--brand-danger);
}

/* ---- Utility color classes (Bootstrap ships these !important) ---- */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.text-secondary { color: var(--brand-muted) !important; }
.text-warning { color: var(--brand-primary) !important; }

.navbar-dark.bg-primary,
.navbar.bg-white {
  box-shadow: none;
}

.badge.bg-danger {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}

.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
}

/* ---- Cards ---- */
.card {
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  background-color: var(--brand-card);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* ---- Forms ---- */
.form-control, .form-select {
  border-radius: 8px;
  border-color: var(--brand-border);
  min-height: var(--input-height);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 0.2rem rgba(234, 132, 36, 0.18);
}
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* ---- Pagination ---- */
.page-link {
  color: var(--brand-primary);
  border-radius: 8px;
  margin: 0 2px;
  border-color: var(--brand-border);
}
.page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.page-link:hover {
  color: var(--brand-primary-hover);
}

/* ---- Dropdowns ---- */
.dropdown-item:active, .dropdown-item.active {
  background-color: var(--brand-primary);
}

/* ---- Alerts ---- */
.alert-primary {
  --bs-alert-color: #9A5A19;
  --bs-alert-bg: #FCEEDD;
  --bs-alert-border-color: #F5D8B0;
}

/* ---- Entrance animation (CSS-only: always completes, never depends on JS/scroll) ---- */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: fadeSlideIn 0.5s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}