/**
 * PA Design System 2.0 — shared components (buttons, sections, glass surfaces).
 * Load after pa2-tokens.css. Page-specific overrides stay in site/home/work CSS.
 */

/* —— Editorial prose rhythm —— */
body.pa-glass-site .pa-editorial,
body.pa-glass-site .pa-contact-book__lead,
body.pa-glass-site .pa-geo-landing__lead {
  max-width: var(--pa2-measure);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--pa2-text-body-lg);
  line-height: var(--pa2-leading-body);
  color: var(--pa2-muted);
}

/* Homepage hero lead sits on dark media — keep white (not muted ink). */
body.pa-glass-site.home .pa2-hero__lead {
  max-width: var(--pa2-measure);
  margin-left: auto;
  margin-right: auto;
  font-size: var(--pa2-text-body-lg);
  line-height: var(--pa2-leading-body);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.pa-glass-site h1,
body.pa-glass-site .pa2-hero__title,
body.pa-glass-site .pa-contact-book__title {
  font-size: var(--pa2-text-display);
  line-height: var(--pa2-leading-tight);
  letter-spacing: var(--pa2-tracking-tight);
  font-weight: 700;
  color: var(--pa2-ink);
}

body.pa-glass-site h2,
body.pa-glass-site .pa-section__title {
  font-size: var(--pa2-text-h2);
  line-height: var(--pa2-leading-snug);
  letter-spacing: var(--pa2-tracking-tight);
  font-weight: 600;
  color: var(--pa2-ink);
}

/* —— Section rhythm —— */
body.pa-glass-site .pa-section {
  padding-block: var(--pa2-section-y);
}

body.pa-glass-site .pa-section--tight {
  padding-block: var(--pa2-section-y-tight);
}

body.pa-glass-site .pa-section__inner {
  width: min(100%, var(--pa2-max-content));
  margin-inline: auto;
  padding-inline: var(--pa2-gutter);
}

/* —— Glass surfaces (subtle — content first) —— */
body.pa-glass-site .pa-glass-card,
body.pa-glass-site .pa-ios-glass {
  background: var(--pa-ios-fill-raised) !important;
  backdrop-filter: var(--pa-ios-blur-light);
  -webkit-backdrop-filter: var(--pa-ios-blur-light);
  border: 1px solid var(--pa-ios-stroke-subtle);
  border-radius: var(--pa2-radius-card);
  box-shadow: var(--pa2-elev-1);
}

/* —— Buttons — tactile, calm —— */
body.pa-glass-site a.pa2-cta__btn,
body.pa-glass-site button.pa2-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--pa2-control-height);
  min-width: var(--pa2-control-height);
  padding: 0.75rem 1.625rem;
  font-family: inherit;
  font-size: var(--pa2-text-label);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--pa2-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform var(--pa2-duration) var(--pa2-ease-spring),
    box-shadow var(--pa2-duration) var(--pa2-ease),
    background-color var(--pa2-duration) var(--pa2-ease),
    border-color var(--pa2-duration) var(--pa2-ease),
    color var(--pa2-duration) var(--pa2-ease);
}

body.pa-glass-site a.pa2-cta__btn--primary,
body.pa-glass-site button.pa2-cta__btn--primary {
  color: var(--pa2-white);
  background: var(--pa2-ink);
  border-color: var(--pa2-ink);
  box-shadow: var(--pa2-shadow-btn);
}

body.pa-glass-site a.pa2-cta__btn--primary:hover,
body.pa-glass-site a.pa2-cta__btn--primary:focus-visible,
body.pa-glass-site button.pa2-cta__btn--primary:hover,
body.pa-glass-site button.pa2-cta__btn--primary:focus-visible {
  color: var(--pa2-white);
  background: var(--pa2-ink-soft);
  border-color: var(--pa2-ink-soft);
  box-shadow: var(--pa2-shadow-btn-hover);
  transform: translateY(-1px);
}

body.pa-glass-site a.pa2-cta__btn--secondary,
body.pa-glass-site button.pa2-cta__btn--secondary {
  color: var(--pa2-ink);
  background: var(--pa2-surface);
  border-color: var(--pa2-hairline-strong);
  box-shadow: var(--pa2-elev-0);
}

body.pa-glass-site a.pa2-cta__btn--secondary:hover,
body.pa-glass-site a.pa2-cta__btn--secondary:focus-visible,
body.pa-glass-site button.pa2-cta__btn--secondary:hover,
body.pa-glass-site button.pa2-cta__btn--secondary:focus-visible {
  background: var(--pa2-canvas);
  border-color: var(--pa2-hairline-strong);
  transform: translateY(-1px);
}

body.pa-glass-site a.pa2-cta__btn:focus-visible,
body.pa-glass-site button.pa2-cta__btn:focus-visible {
  outline: 2px solid var(--pa2-accent);
  outline-offset: 3px;
}

body.pa-glass-site a.pa2-cta__btn:active,
body.pa-glass-site button.pa2-cta__btn:active {
  transform: translateY(0);
}

/* Book accent variant — conversion pages */
body.pa-glass-site .pa-cta--book a.pa2-cta__btn--primary,
body.pa-glass-site .pa2-work-cta a.pa2-cta__btn--primary,
body.pa-glass-site .pa-contact-book__btn.pa2-cta__btn--primary {
  background: linear-gradient(180deg, #0084ff 0%, var(--pa2-accent) 100%);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 28px rgba(0, 113, 227, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.pa-glass-site .pa-cta--book a.pa2-cta__btn--primary:hover,
body.pa-glass-site .pa2-work-cta a.pa2-cta__btn--primary:hover,
body.pa-glass-site .pa-contact-book__btn.pa2-cta__btn--primary:hover,
body.pa-glass-site .pa-cta--book a.pa2-cta__btn--primary:focus-visible,
body.pa-glass-site .pa2-work-cta a.pa2-cta__btn--primary:focus-visible,
body.pa-glass-site .pa-contact-book__btn.pa2-cta__btn--primary:focus-visible {
  background: linear-gradient(180deg, #0091ff 0%, #0077ed 100%);
  border-color: rgba(255, 255, 255, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  body.pa-glass-site a.pa2-cta__btn,
  body.pa-glass-site button.pa2-cta__btn {
    transition: none;
  }

  body.pa-glass-site a.pa2-cta__btn:hover,
  body.pa-glass-site button.pa2-cta__btn:hover {
    transform: none;
  }
}