/* ============================================================
   KweseGo theme override — Loada design language
   Loaded after main.css. DM Sans for UI, DM Mono for numbers,
   amber #F5A623 accent on neutral surfaces.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=DM+Mono:wght@300;400;500&display=swap");

:root {
  --text-primary: #f5a623;
  --text-secondary: #fdf0dc;
  --base-rgb: 245, 166, 35;
  --base-title: #f5a623;
  --base-white: #f5a623;
  --body-clr: #6b6b6b;
  --light-clr: #fdf0dc;
  --title-color: #0a0a0a;
  --title-color-rgb: 10, 10, 10;
  --body-bg: #f5f5f5;
  --body-bg-rgb: 245, 245, 245;
  --section-bg: #ffffff;
  --section-bg-2: #ffffff;
  --section-light: #fafafa;
  --dark-clr: #0a0a0a;
  --dark-rgb: 10, 10, 10;
  --footer: #0a0a0a;
  --footer-bottom: #0a0a0a;
  --primary-clr: #f5a623;
  --primary-rgb: 245, 166, 35;
  --border-clr: #e0e0e0;
  --border-light: #e0e0e0;
  --border-light-only: #e0e0e0;
  --border-dark: #2a2a2a;
  --header-bg: rgba(255, 255, 255, 0.95);
  --heading-fonts: "DM Sans", sans-serif;
  --body-fonts: "DM Sans", sans-serif;
  /* Kill the neon glow shadows from the vendor theme */
  --base-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
  --base-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

body {
  font-family: "DM Sans", sans-serif;
}

/* Numbers, prices, and counters read in DM Mono — tabular and clear */
.odometer,
.counter,
.price,
.amount,
[class*="counter"] {
  font-family: "DM Mono", monospace !important;
  font-variant-numeric: tabular-nums;
}

/* Buttons and cards follow the app's radii (button 8, card 12) */
.btn,
button[class*="btn"],
a[class*="btn"],
input[type="submit"] {
  border-radius: 8px !important;
}

.card,
[class*="card"],
[class*="item--"],
[class*="--item"] {
  border-radius: 12px;
}

/* Form fields: 52px, filled, subtle border, amber focus */
input.form-control,
textarea.form-control,
select.form-control,
.form--control {
  min-height: 52px;
  background: #ebebeb;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
}

input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.form--control:focus {
  border-color: #f5a623;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  background: #ffffff;
}