/* ═══════════════════════════════════════════════════════════════════════════════
   SAVANNA CHOCOLATES — Brand Variables & Shared Styles
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --sav-brown:       #3a2a1e;   /* Primary Dark Brown  */
  --sav-brown-dark:  #2e2218;   /* Deeper Brown        */
  --sav-brown-mid:   #4d3825;   /* Mid Brown           */
  --sav-brown-light: #6e4a2a;   /* Light Brown         */
  --sav-cream:       #f3e9db;   /* Secondary Cream     */
  --sav-cream-light: #faf6f0;   /* Light Cream         */
  --sav-gold:        #f0b54a;   /* Accent Gold         */
  --sav-gold-dark:   #d4962a;   /* Deeper Gold         */
  --sav-red:         #5a0f12;   /* Deep Red Highlight  */
  --sav-red-mid:     #7a1c20;   /* Mid Red             */
  --sav-text:        #2e2218;   /* Body Text           */
  --sav-text-muted:  #9d8870;   /* Muted Text          */
  --sav-border:      #ddd0c0;   /* Border Colour       */

  /* Bootstrap overrides */
  --bs-primary:      #3a2a1e;
  --bs-primary-rgb:  58, 42, 30;
  --bs-body-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Typography ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

body {
  font-family: var(--bs-body-font-family);
  color: var(--sav-text);
  background-color: var(--sav-cream-light);
}

.font-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Utility Colors ─────────────────────────────────────────────────────────── */
.text-sav-brown  { color: var(--sav-brown) !important; }
.text-sav-gold   { color: var(--sav-gold) !important; }
.text-sav-red    { color: var(--sav-red) !important; }
.text-sav-cream  { color: var(--sav-cream) !important; }
.text-sav-muted  { color: var(--sav-text-muted) !important; }
.bg-sav-brown    { background-color: var(--sav-brown) !important; }
.bg-sav-brown-mid{ background-color: var(--sav-brown-mid) !important; }
.bg-sav-cream    { background-color: var(--sav-cream) !important; }
.bg-sav-gold     { background-color: var(--sav-gold) !important; }
.bg-sav-red      { background-color: var(--sav-red) !important; }
.border-sav      { border-color: var(--sav-border) !important; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn-sav-primary {
  background-color: var(--sav-brown);
  border-color: var(--sav-brown);
  color: var(--sav-cream);
  font-weight: 500;
}
.btn-sav-primary:hover {
  background-color: var(--sav-brown-dark);
  border-color: var(--sav-brown-dark);
  color: var(--sav-cream);
}
.btn-sav-gold {
  background-color: var(--sav-gold);
  border-color: var(--sav-gold);
  color: var(--sav-brown-dark);
  font-weight: 600;
}
.btn-sav-gold:hover {
  background-color: var(--sav-gold-dark);
  border-color: var(--sav-gold-dark);
  color: var(--sav-brown-dark);
}
.btn-sav-outline {
  border-color: var(--sav-brown);
  color: var(--sav-brown);
}
.btn-sav-outline:hover {
  background-color: var(--sav-brown);
  color: var(--sav-cream);
}

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card-sav {
  border: 1px solid var(--sav-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(46,34,24,.06);
}
.card-sav .card-header {
  background: transparent;
  border-bottom: 1px solid var(--sav-border);
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: var(--sav-brown);
}

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge-sav-gold {
  background: var(--sav-gold);
  color: var(--sav-brown-dark);
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */
.alert { border-radius: 10px; border-left-width: 4px; }

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.table-sav thead th {
  background: var(--sav-brown);
  color: var(--sav-cream);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .03em;
  border: none;
}
.table-sav tbody tr:hover { background-color: rgba(240,181,74,.08); }
.table-sav td, .table-sav th { vertical-align: middle; }

/* ── Forms ───────────────────────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--sav-gold);
  box-shadow: 0 0 0 .2rem rgba(240,181,74,.25);
}
.form-label { font-weight: 500; color: var(--sav-brown); font-size: .875rem; }

/* ── Page Header ─────────────────────────────────────────────────────────────── */
.page-header {
  padding: 1.5rem 0 1rem;
  border-bottom: 1px solid var(--sav-border);
  margin-bottom: 1.5rem;
}
.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sav-brown);
  margin: 0;
}

/* ── Stat Card ───────────────────────────────────────────────────────────────── */
.stat-card {
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.stat-card .stat-icon {
  position: absolute;
  right: 1rem;
  bottom: .5rem;
  font-size: 3.5rem;
  opacity: .15;
}
.stat-card .stat-value { font-size: 1.875rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { font-size: .8125rem; opacity: .85; margin-top: .25rem; }

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--sav-cream-light); }
::-webkit-scrollbar-thumb { background: var(--sav-brown-light); border-radius: 3px; }