/* ==========================================================================
   A4 · SERENIVO — "Calm Air" theme layer
   --------------------------------------------------------------------------
   Load order : style.css → pages.css / articles.css → theme.css (always last)
   Scope      : design tokens + a short list of component overrides.
                style.css is never edited; no copy, data or markup is changed.
   Language   : pale sage light, extremely large radii, widened letter-spacing,
                a very airy vertical rhythm and one very diffuse shadow.
                Nothing is outlined. Nothing shouts. Everything breathes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Palette — the only place raw colour values are declared
   -------------------------------------------------------------------------- */
:root {
  /* canvases: cool, milky sage white */
  --color-bg: #F4F8F6;
  --color-bg-alt: #E9F1EC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #F7FBF8;

  /* ink: deep green-black, never pure black */
  --color-ink: #1C2621;
  --color-ink-soft: #44524A;
  --color-muted: #7E8E85;

  /* sage scale */
  --color-accent: #6E8F7D;
  --color-accent-deep: #4E6B5C;
  --color-accent-soft: #DCE8E0;
  --color-accent-wash: #F1F6F2;

  /* lines almost disappear against the pale ground */
  --color-hairline: rgba(28, 38, 33, 0.07);
  --color-hairline-strong: rgba(28, 38, 33, 0.12);
  --color-highlight: rgba(255, 255, 255, 0.9);

  /* derived tints — declared once so no component hard-codes a colour */
  --air-tint: rgba(110, 143, 125, 0.1);
  --air-veil: rgba(244, 248, 246, 0.92);
  --air-surface-veil: rgba(255, 255, 255, 0.92);
  --air-image-veil: linear-gradient(
    180deg,
    rgba(28, 38, 33, 0.02) 20%,
    rgba(28, 38, 33, 0.8) 100%
  );
  --air-halo: radial-gradient(
    circle,
    var(--color-accent-wash) 0%,
    rgba(241, 246, 242, 0) 68%
  );
  --air-btn-shadow: 0 24px 48px -28px rgba(46, 74, 58, 0.55);
  --air-btn-shadow-hover: 0 32px 60px -28px rgba(46, 74, 58, 0.6);
  --air-nav-shadow: 0 16px 44px -34px rgba(46, 74, 58, 0.5);
}

/* --------------------------------------------------------------------------
   2 · Shape, depth and rhythm — rounder than every sibling, wider than every
       sibling, and far more generous between sections
   -------------------------------------------------------------------------- */
:root {
  --radius-sm: 1.25rem;
  --radius-md: 2rem;
  --radius-lg: 3rem;
  --radius-xl: 4rem;
  --radius-pill: 999px;

  /* one diffuse shadow instead of stacked rings */
  --shadow-ambient: 0 40px 100px -60px rgba(46, 74, 58, 0.28);
  --shadow-lift: 0 52px 120px -64px rgba(46, 74, 58, 0.36);
  --shadow-inset: inset 0 1px 0 var(--color-highlight);

  --section-y: clamp(6rem, 12vw, 11rem);
  --layout-gap: clamp(1.15rem, 2vw, 1.9rem);
  --container: 1200px;
}

/* --------------------------------------------------------------------------
   3 · Typography — wide tracking as the signature of the theme
   -------------------------------------------------------------------------- */
body {
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.hero-title,
.section-title,
.page-title,
.article-title,
.pdp-title,
.pdp-h2,
.bento-title,
.product-name,
.cap-title,
.why-title,
.dim-title,
.scene-name,
.faq-group-title,
.cert-mark,
.cert8-mark,
.stat-value,
.about-meta-value,
.hero-float-value,
.related-name,
.story-mission-text,
.vt-year,
.brand-name,
.nav-overlay a,
.article-body h2,
.article-body h3 {
  letter-spacing: 0.02em;
}

/* softened weight + looser leading: calm rather than assertive */
.hero-title {
  font-weight: 700;
  line-height: 1.08;
}
.section-title {
  margin-top: var(--space-6);
  font-weight: 700;
  line-height: 1.16;
}
.page-title,
.article-title,
.pdp-title {
  font-weight: 700;
  line-height: 1.14;
}
.section-lead,
.page-lead,
.hero-sub,
.article-body p {
  line-height: 1.85;
}

/* small labels: uppercase with a breath of tracking */
.eyebrow,
.product-tag,
.bento-index,
.cap-num,
.why-num,
.dim-moq,
.scene-index,
.scene-label,
.form-field label,
.hero-float-label,
.footer-col h4 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.btn {
  letter-spacing: 0.02em;
}
.nav-links a {
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   4 · Buttons — full capsule, wider padding, soft sage depth
   -------------------------------------------------------------------------- */
/* Some hand-written pages carry `.btn-primary` / `.btn-ghost` without the
   base `.btn` class, so the capsule geometry is attached to all three. */
.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.95rem 1rem 0.95rem 1.9rem;
  min-height: 3.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) var(--ease-spring);
}
.btn:active,
.btn-primary:active,
.btn-ghost:active {
  transform: scale(0.98);
}
.btn-icon {
  width: 2.45rem;
  height: 2.45rem;
}
.btn-primary:hover .btn-icon,
.btn-ghost:hover .btn-icon {
  transform: translate(2px, -2px) scale(1.06);
}
.btn-ghost:hover .btn-icon {
  background: var(--color-accent-soft);
}

.btn-primary {
  background: var(--color-accent-deep);
  color: var(--color-surface);
  box-shadow: var(--air-btn-shadow);
}
.btn-primary:hover {
  background: var(--color-accent-deep);
  filter: brightness(1.07);
  box-shadow: var(--air-btn-shadow-hover);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: var(--shadow-ambient);
}
.btn-ghost:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.6rem 0.6rem 0.6rem 1.4rem;
  min-height: 2.75rem;
  font-size: 0.8125rem;
}
.btn-sm .btn-icon {
  width: 2rem;
  height: 2rem;
}

/* --------------------------------------------------------------------------
   5 · Cards — no outline, no inner ring, only the diffuse shadow
   -------------------------------------------------------------------------- */
.bento-card,
.cap-card,
.cert-card,
.insight-card,
.product-card,
.related-card,
.faq-item,
.quote-form,
.spec-table,
.dim-card,
.table-shell {
  border: 0;
  box-shadow: var(--shadow-ambient);
}

.bento-card:hover,
.product-card:hover,
.insight-card:hover,
.related-card:hover,
.dim-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}

/* double-bezel frames keep the mat, drop the hairline highlight */
.bezel {
  box-shadow: none;
}
.bezel-core {
  box-shadow: var(--shadow-ambient);
}
.bezel--flat {
  background: var(--air-tint);
}
.why-bezel:hover {
  box-shadow: none;
}
.pdp-gallery {
  box-shadow: var(--shadow-ambient);
}

/* --------------------------------------------------------------------------
   6 · Chrome and surfaces
   -------------------------------------------------------------------------- */
.nav-inner.is-scrolled {
  box-shadow: var(--air-nav-shadow);
}
.nav-overlay {
  background: var(--air-veil);
}
.brand-mark {
  background: var(--color-accent-deep);
}
.hero::before {
  background: var(--air-halo);
}
.hero-float {
  padding: 1.15rem 1.4rem;
  background: var(--air-surface-veil);
  box-shadow: var(--shadow-ambient);
}
.bento-media::after {
  background: var(--air-image-veil);
}
.cta-section {
  background: var(--color-bg-alt);
}

/* pale sage chips need one step more presence on the milky ground */
.eyebrow,
.btn-ghost .btn-icon,
.cap-icon,
.dim-icon,
.faq-icon,
.feature-list li::before,
.form-status {
  background: var(--color-accent-soft);
}
.rail-btn:hover {
  background: var(--color-accent-soft);
}

/* remove the last cool-teal leftovers from the shared skeleton */
.stat-value span,
.battery-list svg,
.footer-col a:hover {
  color: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   7 · Forms — rounded, quiet fields
   -------------------------------------------------------------------------- */
.form-field input,
.form-field textarea,
.form-field select {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}

/* --------------------------------------------------------------------------
   8 · Section rhythm — more air between blocks
   -------------------------------------------------------------------------- */
.section-head {
  margin-bottom: clamp(3rem, 5vw, 4.75rem);
}
.section--tight {
  padding-block: clamp(4.5rem, 7vw, 7rem);
}
.hero {
  padding-bottom: var(--space-11);
}
.page-hero {
  padding-block: var(--space-8) var(--space-10);
}

/* --------------------------------------------------------------------------
   9 · Small screens — keep the air, protect the fold
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --section-y: clamp(4.5rem, 9vw, 6.5rem);
    --layout-gap: 1.1rem;
  }
  .btn,
  .btn-primary,
  .btn-ghost {
    padding: 0.85rem 0.85rem 0.85rem 1.5rem;
    min-height: 3.1rem;
  }
  .btn-icon {
    width: 2.2rem;
    height: 2.2rem;
  }
  .quote-form {
    padding: var(--space-6);
  }
  .section-head {
    margin-bottom: var(--space-8);
  }
}