/* snth public marketing foundation.
   Load after variables.css/theme.css and before each page-specific stylesheet.
   This file owns the shared brand language; page styles own composition. */

:root {
  --snth-pink: var(--color-snth-pastel-pink, #f4b8d1);
  --snth-pink-strong: var(--color-snth-pastel-pink-strong, #ff8fbd);
  --snth-pink-ink: var(--color-snth-pastel-pink-ink, #1d1018);
  --snth-cool-blue: var(--color-snth-cool-blue, #8fb7c9);
  --snth-display-start: var(--color-snth-display-start, #fff7fb);
  --snth-display-gradient: linear-gradient(
    96deg,
    var(--snth-display-start) 0%,
    var(--snth-pink) 48%,
    var(--snth-cool-blue) 100%
  );
  --snth-thread-gradient: linear-gradient(180deg, var(--snth-pink), var(--snth-cool-blue));
  --snth-dark-card-gradient:
    radial-gradient(circle at 78% 18%, rgb(244 184 209 / 16%), transparent 36%),
    linear-gradient(145deg, #1d1d1f, #0b0b0d);

  --snth-marketing-content: var(--page-max-width, 980px);
  --snth-marketing-wide: 1180px;
  --snth-marketing-card-radius: var(--radius-cards, 28px);
  --snth-marketing-pill-radius: var(--radius-buttons, 999px);
  --snth-marketing-gutter: 22px;

  --snth-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --snth-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

.snth-marketing {
  min-width: 320px;
  font-family: var(--font-sf-pro-text, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-optical-sizing: auto;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

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

.snth-marketing :where(h1, h2, h3) {
  font-family: var(--font-sf-pro-display, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-optical-sizing: auto;
}

.snth-marketing :where(a, button) {
  -webkit-tap-highlight-color: transparent;
}

/* Appearance remains page-specific. This primitive only standardizes physical feedback. */
.snth-marketing :where(.snth-button, .site-nav-cta) {
  transform: translateZ(0);
  transform-origin: center;
  transition:
    transform 140ms var(--snth-ease-out),
    background-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.snth-marketing :where(.snth-button, .site-nav-cta):active {
  transform: scale(0.97);
}

.snth-marketing :where(a, button):focus-visible {
  outline: 3px solid var(--snth-cool-blue);
  outline: 3px solid color-mix(in srgb, var(--snth-cool-blue) 72%, white);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .snth-marketing :where(.snth-button, .site-nav-cta) {
    transform: none;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
  }

  .snth-marketing :where(.snth-button, .site-nav-cta):active {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .snth-marketing :where(a, button):focus-visible {
    outline-color: currentColor;
  }
}