/* ==========================================================
   STEMS* by snflwr — Foundation
   Tokens · Reset · Typography
   ========================================================== */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-latinext.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  /* Core palette */
  --green: #A6FF33;
  --green-dim: rgba(166, 255, 51, 0.14);
  --green-soft: rgba(166, 255, 51, 0.4);
  --black: #0B0B0B;
  --charcoal: #1A1A1A;
  --offwhite: #F2F2F0;
  --g100: #E6E6E4;
  --g300: #A1A1A1;
  --g600: #555755;
  --g800: #252725;
  --stone: #252525;
  --softgreen: #3E6B4B;
  --mint: #E6F7EA;

  /* Functional */
  --amber: #D9A441;
  --red: #D96459;
  --info: #F2F2F0;

  /* Borders */
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --line-hover: rgba(166, 255, 51, 0.4);
  --line-active: #A6FF33;

  /* Radii */
  --r-sm: 8px;
  --r-input: 10px;
  --r-card: 14px;
  --r-panel: 18px;
  --r-sheet: 22px;

  /* Spacing scale: 4 8 12 16 24 32 48 64 96 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Motion */
  --t-micro: 140ms;
  --t-ui: 220ms;
  --t-page: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --sidebar-w: 224px;
  --content-max: 1180px;
  --topbar-h: 64px;
  --bottomnav-h: 68px;

  --font: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--black);
  color: var(--offwhite);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--green); color: var(--black); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Type scale ---------- */
.display-xl {
  font-size: clamp(48px, 6.4vw, 88px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.display {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.h1 {
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h2 {
  font-size: clamp(26px, 2.5vw, 34px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.h3 {
  font-size: clamp(20px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.body-lg { font-size: 18px; line-height: 1.55; }
.body { font-size: 15px; line-height: 1.55; }
.small { font-size: 13px; line-height: 1.5; }
.micro { font-size: 11px; line-height: 1.4; }

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--g300);
}
.eyebrow--green { color: var(--green); }

.muted { color: var(--g300); }
.dim { color: var(--g600); }
.green { color: var(--green); }

/* Wordmark */
.wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--offwhite);
  white-space: nowrap;
}
.wordmark .ast { color: var(--green); }
.bysnflwr {
  font-size: 11px;
  color: var(--g600);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.snflwr-logo { display: inline-block; flex: none; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--g800) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--g800); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}