/* =========================================================================
   Sweatbox Gym — bold energetic fitness theme
   Light (off-white/black/lime) + Dark (near-black/lime) via CSS variables.
   Type: Oswald (display, condensed) + Inter (body). Sharp, loud, high-energy.
   ========================================================================= */

:root, :root.light {
  --background:             #f2f3f1;
  --surface:                #ffffff;
  --surface-container:      #ebedea;
  --surface-container-high: #e1e4df;
  --on-surface:             #15171a;
  --on-surface-variant:     #4a4f54;
  --heading:                #101216;
  --primary:                #15171a;   /* black button */
  --on-primary:             #cdf23f;   /* lime text on black */
  --accent:                 #5c8a00;   /* readable lime-green text */
  --accent-strong:          #c8f000;   /* electric lime highlight */
  --outline:                #7c8189;
  --outline-variant:        #d7dad4;
  --error:                  #b3261e;
  --hero-overlay:           linear-gradient(180deg, rgba(10,12,8,0.10), rgba(10,12,8,0.35));
  --grain-opacity:          0.04;
}
:root.dark {
  --background:             #0d0e10;
  --surface:                #0d0e10;
  --surface-container:      #17191c;
  --surface-container-high: #202327;
  --on-surface:             #e9ebee;
  --on-surface-variant:     #a3a9b0;
  --heading:                #ffffff;
  --primary:                #c8f000;   /* lime button */
  --on-primary:             #141609;   /* black text on lime */
  --accent:                 #c8f000;
  --accent-strong:          #d6ff33;
  --outline:                #7c8189;
  --outline-variant:        #2a2e33;
  --error:                  #ffb4ab;
  --hero-overlay:           linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.70));
  --grain-opacity:          0.06;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--on-surface); font-family: "Inter", system-ui, sans-serif; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; }
.font-display { font-family: "Oswald", "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: .005em; }
.label { font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: 12px; line-height: 1; }

.grain { position: relative; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity); mix-blend-mode: overlay; }
.hero-overlay { background: var(--hero-overlay); }

.btn-primary { background: var(--primary); color: var(--on-primary); border-radius: 0; transition: filter .2s ease, transform .1s ease; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-primary:active { transform: scale(.98); }
.btn-outline { border: 2px solid var(--on-surface); color: var(--on-surface); border-radius: 0; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn-outline:hover { background: var(--accent-strong); color: #141609; border-color: var(--accent-strong); }
.btn-ghost-light { border: 2px solid rgba(255,255,255,.7); color: #fff; border-radius: 0; transition: background-color .25s ease; }
.btn-ghost-light:hover { background: rgba(255,255,255,.14); }

.field { width: 100%; background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 0; padding: .7rem .9rem; color: var(--on-surface); font-family: "Inter", sans-serif; outline: none; transition: border-color .25s ease; }
.field::placeholder { color: var(--on-surface-variant); opacity: .7; }
.field:focus { border-color: var(--accent-strong); }
.field option { color: #15171a; }

#site-nav { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.nav-scrolled { box-shadow: 0 1px 0 var(--outline-variant), 0 10px 30px rgba(0,0,0,.12); }
.card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 0; }
.tag-pop { background: var(--accent-strong); color: #141609; }

.lang-menu[hidden] { display: none; }
.lang-option .material-symbols-outlined { opacity: 0; transition: opacity .15s ease; }
.lang-option[aria-current="true"] .material-symbols-outlined { opacity: 1; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

html.capture #home { min-height: 0 !important; height: auto !important; }
html.capture .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { transition: none; opacity: 1; transform: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }