/* Bespoke design tokens — La Bodega Fitness and Fight Club
   Base system: fitness-gym-performance
   Aesthetic: dark fight-gym, combat-sports energy, gritty community.
   Full dark-mode palette: near-black backgrounds, crimson brand, burnt-orange accent.
   All variable NAMES match what base.css depends on — only values are tuned. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Saira:wght@400;500;600;700&display=swap');
:root{
  /* ── Dark fight-gym backgrounds + surfaces ── */
  --bg:#111214;             /* near-black charcoal — primary page bg */
  --surface:#1a1c1f;        /* elevated surface: cards, panels */
  --ink:#e8eae6;            /* near-white body text on dark bg */
  --ink-strong:#f4f5f2;     /* headlines + strong labels — brightest white */
  --muted:#8a8f94;          /* secondary / caption text (4.80:1 on --bg) */
  --line:#2c2f33;           /* subtle dividers/borders on dark bg */

  /* ── Brand: fight-gym crimson ── */
  --brand:#b91c1c;          /* deep competition red — primary CTA, nav active, links */
  --brand-dark:#7f1d1d;     /* hover / pressed state */
  --brand-tint:#2d1414;     /* dark red tint — icon bg, subtle highlights */
  --on-brand:#ffffff;       /* white text on brand red (6.42:1 PASS) */

  /* ── Accent: burnt-orange energy pop ── */
  --accent:#e65c00;         /* combat-sports orange — eyebrows, stats, highlights */

  /* ── Hero: dramatic dark-to-black gradient ── */
  --hero-bg:linear-gradient(135deg,#1a0a0a 0%,#111214 55%,#0d0e10 100%);

  /* ── Header: dark glass over dark page ── */
  --header-bg:rgba(17,18,20,.92);

  /* ── Footer: deepest dark ── */
  --footer-bg:#0d0e10;

  /* ── CTA band: brand red — punchy conversion sections ── */
  --band-bg:#b91c1c;
  --on-band:#ffffff;
  --on-band-muted:rgba(255,255,255,.90);  /* raised from .78 → .90 for 5.45:1 WCAG AA pass */

  /* ── Typography: Oswald (fight-condensed headings) + Saira (athletic body) ── */
  --font-heading:'Oswald',system-ui,sans-serif;
  --font-body:'Saira',system-ui,sans-serif;
  --fs-base:17px;
  --lh-body:1.6;
  --fw-body:400;
  --fw-head:700;
  --lh-head:1.0;
  --ls-head:.02em;           /* slight tracking for Oswald uppercase impact */

  /* ── Type scale ── */
  --fs-lead:1.2rem;
  --fs-h1:clamp(3.0rem,6.5vw,5.2rem);   /* big, bold, fight-poster scale */
  --fs-h2:clamp(2.1rem,4.5vw,3.0rem);
  --fs-h3:1.4rem;

  /* ── Layout + spacing ── */
  --container:1180px;
  --gutter:26px;
  --section-y:106px;
  --hero-y:120px;
  --nav-h:74px;
  --space-3:12px;
  --space-4:18px;
  --space-5:28px;
  --space-6:34px;
  --space-7:64px;
  --btn-pad:16px 34px;

  /* ── Geometry: hard-edged, not soft — fights are angular ── */
  --radius:4px;
  --radius-lg:8px;
  --radius-pill:4px;         /* intentionally square for fight-poster buttons */

  /* ── Depth ── */
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --shadow-lg:0 22px 54px rgba(0,0,0,.70);

  /* ── Motion: punchy ── */
  --dur:160ms;
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ── Component overrides for the dark palette ── */

/* Eyebrow labels use accent orange against dark bg */
.eyebrow{color:var(--accent);font-weight:600;letter-spacing:.18em}

/* Buttons: uppercase fight-poster style, crimson fill */
.btn{
  background:var(--brand);
  color:var(--on-brand);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:700;
}
.btn:hover{background:var(--brand-dark);color:var(--on-brand)}

/* Ghost button: outlined in brand red on dark bg */
.btn.ghost{
  background:transparent;
  color:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand);
}
.btn.ghost:hover{background:var(--brand-tint);color:var(--on-brand)}

/* Card icon badges: dark tint bg, accent orange icon */
.card .ic{background:var(--brand-tint);color:var(--accent)}

/* Cards need border on dark bg to float */
.card{border-color:var(--line)}

/* Nav links: near-white on dark header */
.nav-links a{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--accent)}

/* Footer links inherit muted color */
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}

/* Header border on dark bg */
.site-header{border-bottom-color:var(--line)}

/* Quote / testimonial text: near-white on dark */
.quote{color:var(--ink-strong)}
.quote cite{color:var(--muted)}

/* Trust bar: accent-colored stats */
.trust-bar{color:var(--muted)}

/* Band (CTA) overrides for red bg — ensure on-band-muted is accessible */
.band h2{color:var(--on-band)}
.band p{color:var(--on-band-muted)}

/* Form inputs on dark bg */
form.contact input,
form.contact textarea{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}
form.contact input:focus,
form.contact textarea:focus{outline-color:var(--accent);border-color:var(--accent)}

/* Info list on dark bg */
.info-list li{color:var(--muted)}
.info-list b{color:var(--ink-strong)}

/* ── Contrast fix: --brand (#b91c1c) is only 2.90:1 on dark bg — fails WCAG AA
   for text uses. Filled buttons keep b91c1c (white text = 6.47:1 ✓).
   Text-only uses (links, ghost button on dark bg) get #ef4444 (4.98:1 on bg,
   4.54:1 on surface — both pass 4.5:1 AA). ── */
a{color:#ef4444}
a:hover{color:#f87171}
.btn.ghost{color:#ef4444;box-shadow:inset 0 0 0 2px #ef4444}
.btn.ghost:hover{background:var(--brand-tint);color:#f87171;box-shadow:inset 0 0 0 2px #f87171}
/* Band ghost: ef4444 on b91c1c bg = 1.72:1 — must override to white (6.47:1 ✓) */
.band .btn.ghost{color:#ffffff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.80)}
.band .btn.ghost:hover{background:rgba(255,255,255,.12);color:#ffffff;box-shadow:inset 0 0 0 2px #ffffff}
.site-footer a{color:var(--muted)}          /* footer links stay muted (5.92:1 ✓) */
.site-footer a:hover{color:var(--accent)}

/* Mobile nav dropdown on dark bg */
@media (max-width:860px){
  .nav-links{background:var(--bg);border-bottom-color:var(--line)}
}