/* ============================================================
   Niu Creative — Base layer
   Element defaults wired to tokens, plus the system's signature
   helpers: bands, eyebrow labels, and the italic-serif word-drop.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-leading);
  color: var(--text-body);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* ss03 stylistic signature (Shopify-derived) — applied globally where the
     active font supports it; harmlessly ignored otherwise. */
  font-feature-settings: "ss03";
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
a:hover { opacity: 0.78; }

::selection {
  background: var(--mint);
  color: var(--text-on-mint);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   BANDS — the page advances as full-bleed dark/light chapters.
   Never let two adjacent bands share the same polarity.
   ============================================================ */
.niu-band {
  width: 100%;
}
.niu-band--dark {
  background: var(--band-dark);
  color: var(--text-body);
}
.niu-band--light {
  background: var(--band-light);
  color: var(--text-on-light);
}
.niu-band--dark h1, .niu-band--dark h2, .niu-band--dark h3 { color: var(--text-strong); }
.niu-band--light h1, .niu-band--light h2, .niu-band--light h3 { color: var(--text-on-light); }
/* Inner container — centered, with the section vertical rhythm */
.niu-band__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

/* ============================================================
   TWO-TRACK CANVAS (Shopify-structure)
   A page commits to ONE track. Cinematic = near-black jade canvas for
   marketing/hero/narrative, carrying full-bleed photography + thin display.
   Transactional = cream canvas for pricing/signup/dashboards, jade ink +
   filled/mint pills. Set the track on a top-level wrapper.
   ============================================================ */
.niu-track--cinematic {
  background: var(--track-cinematic);
  color: var(--text-body);
}
.niu-track--transactional {
  background: var(--track-transactional);
  color: var(--text-on-light);
}

/* Full-bleed photography frame — the cinematic depth device (depth from
   imagery, not shadow). Square per Niu's radius rule; the photo IS the
   content, no inner padding, no text-on-image scrim. */
.niu-photo {
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--track-cinematic-elevated);
}
.niu-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PANEL & SHELL (Shopify-structure)
   The page is a near-black VOID; content sits inside large rounded
   PANELS carrying a soft jade gradient, inset with even side gutters.
   This is the one place the system breaks the square-corner rule —
   panels are deliberately curved containers, while inner UI (inputs,
   tiles, pills) keeps its own radius rules.
   ============================================================ */
.niu-shell {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.niu-panel {
  position: relative;
  border-radius: var(--radius-panel);
  background:
    radial-gradient(125% 120% at 8% 6%, #2E8B57 0%, #1F5E42 30%, #16321F 62%, #141414 100%);
  overflow: hidden;
}
/* alternate gradient origin for rhythm between stacked panels */
.niu-panel--right {
  background:
    radial-gradient(125% 120% at 92% 8%, #2E8B57 0%, #1F5E42 30%, #16321F 62%, #141414 100%);
}
.niu-panel--center {
  background:
    radial-gradient(120% 130% at 50% 0%, #2E8B57 0%, #1F5E42 32%, #16321F 66%, #141414 100%);
}

/* ============================================================
   TYPE HELPERS
   ============================================================ */

/* Eyebrow — uppercase, tracked, opens nearly every section */
.niu-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-accent);
}
.niu-band--light .niu-eyebrow { color: var(--text-on-light-muted); }

/* The signature device: ONE word/phrase dropped into italic serif,
   mid-headline. Use sparingly — exactly one per headline. */
.niu-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

/* Display headline scale */
.niu-display {
  font-family: var(--display-font);
  font-weight: var(--display-weight);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--text-strong);
}

/* Cinematic thin-display register: Satoshi Light at giant sizes, with extra
   positive tracking to give the thin glyphs optical air (Shopify-derived). */
.niu-display--thin {
  font-weight: var(--display-weight-cinematic);
  letter-spacing: 1.5px;
}