/* ==========================================================================
   Theme layer for gymstoreonline.com
   Better Design system: sonic-punchy (tokens fetched from the catalog)
   Generated by theme_from_design_system.py — edit that script, not this file,
   if the underlying design system changes.
   ========================================================================== */

:root {
  --bg: #090706;
  --fg: #f8f4f3;
  --card: #130e0d;
  --surface: #130e0d;
  --secondary: #1d1a19;
  --muted-fg: #898584;
  --primary: #ff5223;
  --primary-fg: #100605;
  --accent: #f8f4f3;
  --accent-soft: #351d17;
  --border: #ffffff;
  --danger: #ed0146;

  --radius: 6px;
  --radius-sm: 6px;
  --radius-lg: 6px;

  --sans: "ui-sans-serif", "system-ui", "sans-serif";
  --serif: ui-serif, Georgia, serif;
  --mono: ui-monospace, monospace;
}

body { background: var(--bg); color: var(--fg); font-family: var(--sans); }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.015em; }
.logo, .pcard .price { font-family: var(--sans); }

/* buttons: solid */
.btn {   background: var(--primary); color: var(--primary-fg); border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  border-radius: var(--radius-sm);
}
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--border); box-shadow: none; }
.pcard .btn.small.wide {   background: var(--primary); color: var(--primary-fg); border-color: var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* surfaces */
header.site { background: #090706; border-bottom: 1px solid var(--border); }
footer.site { background: #f8f4f3; color: #090706; }
footer.site a, footer.site h4, footer.site .logo { color: #090706; }
footer.site .logo .mark { background: #090706; color: #f8f4f3; }
.logo .mark { background: var(--primary); color: var(--primary-fg); }
.catcard .ico { background: var(--accent-soft); color: var(--accent); }
.chip, .hero .kicker { background: var(--accent-soft); color: var(--accent); }
.topbar { background: #f8f4f3; color: #090706; }
.topbar a { color: #090706; }
section.tint { background: #130e0d; }
.answer, .callout.info { background: var(--accent-soft); border-color: var(--border); }
.answer strong, .callout.info > strong { color: var(--accent); }
.searchbox { background: #130e0d; border-color: var(--border); }