/* BurnLens Fitness — Base CSS
   Brand: Pure black, electric lime #a1f216, neon glow, dark energy */

:root {
  /* ── Brand Colors ── */
  --lime:         #a1f216;
  --lime-bright:  #c5ff3a;
  --lime-dim:     rgba(161,242,22,0.10);
  --lime-mid:     rgba(161,242,22,0.20);
  --lime-border:  rgba(161,242,22,0.30);
  --glow-sm:      0 0 10px rgba(161,242,22,0.50), 0 0 20px rgba(161,242,22,0.20);
  --glow-md:      0 0 20px rgba(161,242,22,0.60), 0 0 50px rgba(161,242,22,0.25), 0 0 80px rgba(161,242,22,0.10);
  --glow-lg:      0 0 30px rgba(161,242,22,0.70), 0 0 80px rgba(161,242,22,0.35), 0 0 140px rgba(161,242,22,0.15);
  --glow-text:    0 0 20px rgba(161,242,22,0.9),  0 0 40px rgba(161,242,22,0.5);

  /* ── Surfaces ── */
  --bg:           #060606;
  --surface:      #0e0e0e;
  --surface-2:    #131313;
  --surface-3:    #181818;
  --border:       rgba(255,255,255,0.06);
  --border-lime:  rgba(161,242,22,0.22);
  --divider:      rgba(255,255,255,0.04);

  /* ── Text ── */
  --text:         #f2f2f2;
  --text-muted:   rgba(242,242,242,0.48);
  --text-faint:   rgba(242,242,242,0.22);
  --on-lime:      #060606;

  /* ── Type Scale ── */
  --xs:   clamp(0.68rem, 0.63rem + 0.2vw, 0.78rem);
  --sm:   clamp(0.8rem,  0.75rem + 0.2vw, 0.9rem);
  --base: clamp(0.95rem, 0.88rem + 0.25vw,1.05rem);
  --lg:   clamp(1.1rem,  1rem   + 0.5vw,  1.4rem);
  --xl:   clamp(1.5rem,  1.2rem + 1.2vw,  2.1rem);
  --2xl:  clamp(2.2rem,  1.4rem + 3vw,    4rem);
  --3xl:  clamp(3rem,    1rem   + 5.5vw,  7rem);
  --hero: clamp(4.5rem,  1rem   + 9vw,    10rem);

  /* ── Spacing ── */
  --s1:  0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5:  1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10:2.5rem;
  --s12: 3rem;    --s16:4rem;    --s20:5rem;    --s24:6rem;

  /* ── Shape ── */
  --r: 6px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --fast: 160ms; --mid: 260ms;

  /* ── Fonts ── */
  --display: 'Barlow Condensed', 'Impact', sans-serif;
  --body:    'Inter', system-ui, sans-serif;

  /* ── Layout ── */
  --w:   1200px;
  --w-md: 900px;
  --w-sm: 600px;
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  min-height: 100dvh;
  font-family: var(--body);
  font-size: var(--base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

img,picture,video,canvas,svg { display:block; max-width:100%; height:auto; }
input,button,textarea,select { font:inherit; color:inherit; }
h1,h2,h3,h4,h5,h6 { line-height:1.05; text-wrap:balance; font-family:var(--display); }
p,li { text-wrap:pretty; }
a { color:var(--lime); text-decoration:none; transition:color var(--fast) var(--ease); }
a:hover { color:var(--lime-bright); }
button { cursor:pointer; background:none; border:none; }
ul[role="list"],ol[role="list"] { list-style:none; }

::selection { background:rgba(161,242,22,0.22); color:#fff; }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:var(--r); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border-width:0; }

/* ── Layout Utilities ── */
.page-wrap  { display:flex; flex-direction:column; min-height:100dvh; }
.page-main  { flex:1; }
.wrap       { max-width:var(--w);    margin-inline:auto; padding-inline:clamp(var(--s4),4vw,var(--s8)); }
.wrap-md    { max-width:var(--w-md); margin-inline:auto; padding-inline:clamp(var(--s4),4vw,var(--s8)); }
.wrap-sm    { max-width:var(--w-sm); margin-inline:auto; padding-inline:clamp(var(--s4),4vw,var(--s8)); }
.section    { padding-block:clamp(var(--s12),8vw,var(--s24)); }
.divider-line { border:none; border-top:1px solid var(--divider); }
