/* ==========================================================================
 * SAMA MATCHA — sm-base.css
 * PHASE 1.5: warstwa bazowa. Enqueue OSTATNIA (po parent + child + komponentach).
 * ========================================================================== */

body {
  font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
  color: var(--c-text);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.sm-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
.sm-section { padding-block: var(--section-y); }
.sm-section--cream { background: var(--c-cream); }

.sm-overline {
  font: 600 var(--fs-overline)/1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-moss);
  margin: 0 0 var(--sp-3);
}

.sm-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: var(--sp-3);
  border: var(--line);
  border-radius: var(--r-full);
  background: transparent;
  font: 500 var(--fs-caption)/1 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.sm-chip:hover { border-color: var(--c-moss); }
.sm-chip[aria-pressed="true"],
.sm-chip.is-active {
  background: var(--c-mist);
  border-color: transparent;
  color: var(--c-ink);
}

.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding-inline: var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  font: 500 var(--fs-small)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
/* Drabinka palety idzie ink #16281D → forest #1E3A2B → moss, od najciemniejszego,
 * więc hover musi celować w ink, żeby przycisk ciemniał, a nie jaśniał. */
.sm-btn--primary { background: var(--c-forest); color: var(--c-paper); }
.sm-btn--primary:hover { background: var(--c-ink); }
.sm-btn--ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.sm-btn--ghost:hover { background: rgb(255 255 255 / 0.12); }
.sm-btn--text {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-moss);
}
.sm-btn--text:hover { color: var(--c-ink); }
.sm-btn--block { width: 100%; }
/* D3 — `transform: scale(0.98)` wycięte. Na przycisku pełnej szerokości (CTA
 * mobile, ~343 px) 2% to ~7 px skoku na obu krawędziach jednocześnie i czyta się
 * jak drgnięcie układu; na wąskim przycisku jest niewidoczne. Wciśnięcie
 * sygnalizuje kolor — bez ruchu i bez ryzyka reflow tekstu. */
.sm-btn--primary:active { background-color: var(--c-ink); }
.sm-btn--ghost:active { background-color: rgb(255 255 255 / 0.2); }
.sm-btn--text:active { color: var(--c-forest); }
.sm-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

:where(a, button, summary, [role="tab"], input, select):focus-visible {
  outline: 2px solid var(--c-moss);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

/* Most palety Blocksy → functions.php wp_add_inline_style('sm-base')
 * (po Customizer inline). Nie duplikować tu. */