/* Jedna skala przycisków jak na homepage — zmiana wyglądu tylko przez :root poniżej. */

:root {
  --ui-btn-accent-bg: #b8973a;
  --ui-btn-accent-bg-hover: #9f8335;
  --ui-btn-accent-fg: #ffffff;

  --ui-btn-outline-border: 2px solid #b8973a;
  --ui-btn-outline-fg: #b8973a;
  --ui-btn-outline-fg-hover: #9f8335;
  --ui-btn-outline-bg-hover: rgba(184, 151, 58, 0.08);

  --ui-btn-ghost-fg: #d4b068;
  --ui-btn-ghost-border: rgba(197, 160, 89, 0.75);
  --ui-btn-ghost-bg-hover: rgba(197, 160, 89, 0.1);

  --ui-btn-darkpill-bg: #0e0e0e;
  --ui-btn-darkpill-bg-hover: #1a1a1a;
  --ui-btn-darkpill-border: 1px solid #1a1a1a;
  --ui-btn-darkpill-fg: #ffffff;

  --ui-btn-submit-dark-bg: #11100d;
  --ui-btn-submit-dark-bg-hover: #1c1a16;
  --ui-btn-submit-dark-border: 1px solid rgba(184, 151, 58, 0.56);
  --ui-btn-submit-dark-fg: #ffffff;

  --ui-btn-footer-bg: #b8973a;
  --ui-btn-footer-fg: #f8f5ee;

  --ui-nav-primary-border: 1px solid rgba(184, 151, 58, 0.42);
  --ui-nav-primary-bg: rgba(255, 255, 255, 0.04);
  --ui-nav-primary-bg-hover: rgba(255, 255, 255, 0.08);
  --ui-nav-primary-border-hover: rgba(184, 151, 58, 0.75);
  --ui-nav-primary-fg: #000000;

  --ui-nav-secondary-border: 1px solid rgba(255, 255, 255, 0.22);
  --ui-nav-secondary-border-hover: rgba(255, 255, 255, 0.38);
  --ui-nav-secondary-fg: #000000;
  --ui-nav-secondary-bg: #ffffff;

  --ui-hero-cta-border: 1px solid rgba(184, 151, 58, 0.58);
  --ui-hero-cta-border-hover: 1px solid rgba(184, 151, 58, 0.85);
  --ui-hero-cta-bg: rgba(255, 255, 255, 0.04);
  --ui-hero-cta-bg-hover: rgba(255, 255, 255, 0.08);

  --ui-btn-radius: var(--radius-12);
  --ui-btn-radius-pill: var(--radius-pill);
  --ui-btn-font: var(--type-body-font-family);
  --ui-btn-font-size: var(--type-body-sm-font-size);
  --ui-btn-line-height: var(--type-body-sm-line-height);
  --ui-btn-weight: 600;
  --ui-btn-letter: 0.04em;
}

/* --- 1. Solid gold (jak .hm-intro-cta-solid) + ten sam układ na podstronach --- */
.hm-intro-cta-solid,
.doc-btn.doc-btn--solid,
.adv-btn.adv-btn--solid,
button.adv-btn.adv-btn--solid,
.tim-btn.tim-btn--solid,
.osbw-btn.osbw-btn--solid,
.f5-btn.f5-btn--solid,
.gal-btn.gal-btn--solid,
.au-btn.au-btn--solid,
button.tim-btn.tim-btn--solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--ui-btn-radius);
  background: var(--ui-btn-accent-bg);
  color: var(--ui-btn-accent-fg);
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-font-size);
  line-height: var(--ui-btn-line-height);
  font-weight: var(--ui-btn-weight);
  letter-spacing: var(--ui-btn-letter);
  text-transform: none;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--motion-200) var(--motion-ease), transform var(--motion-180) var(--motion-ease), filter var(--motion-150) var(--motion-ease);
}

.hm-intro-cta-solid:hover,
.doc-btn.doc-btn--solid:hover,
.adv-btn.adv-btn--solid:hover,
button.adv-btn.adv-btn--solid:hover,
.tim-btn.tim-btn--solid:hover,
.osbw-btn.osbw-btn--solid:hover,
.f5-btn.f5-btn--solid:hover,
.gal-btn.gal-btn--solid:hover,
.au-btn.au-btn--solid:hover,
button.tim-btn.tim-btn--solid:hover {
  background: var(--ui-btn-accent-bg-hover);
  color: var(--ui-btn-accent-fg);
}

.hm-intro-cta-solid:focus-visible,
.doc-btn.doc-btn--solid:focus-visible,
.adv-btn.adv-btn--solid:focus-visible,
button.adv-btn.adv-btn--solid:focus-visible,
.tim-btn.tim-btn--solid:focus-visible,
.osbw-btn.osbw-btn--solid:focus-visible,
.f5-btn.f5-btn--solid:focus-visible,
.gal-btn.gal-btn--solid:focus-visible,
.au-btn.au-btn--solid:focus-visible,
button.tim-btn.tim-btn--solid:focus-visible {
  outline: 2px solid var(--ui-btn-accent-bg);
  outline-offset: 3px;
}

.au-btn.au-btn--solid .au-btn__icon {
  background: rgba(0, 0, 0, 0.12);
}

/* --- 2. Outline na jasnym tle (jak .hm-intro-founder-cta) --- */
.hm-intro-founder-cta,
.gal-btn.gal-btn--outline,
.adv-btn.adv-btn--outline-gold,
.au-btn.au-btn--outline:not(.au-btn--dark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--ui-btn-radius);
  border: var(--ui-btn-outline-border);
  color: var(--ui-btn-outline-fg);
  background: transparent;
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-font-size);
  line-height: var(--ui-btn-line-height);
  font-weight: var(--ui-btn-weight);
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-200) var(--motion-ease), color var(--motion-200) var(--motion-ease), border-color var(--motion-200) var(--motion-ease);
}

.hm-intro-founder-cta {
  flex-shrink: 0;
}

.hm-intro-founder-cta:hover,
.gal-btn.gal-btn--outline:hover,
.adv-btn.adv-btn--outline-gold:hover,
.au-btn.au-btn--outline:not(.au-btn--dark):hover {
  background: var(--ui-btn-outline-bg-hover);
  color: var(--ui-btn-outline-fg-hover);
}

.hm-intro-founder-cta:focus-visible,
.gal-btn.gal-btn--outline:focus-visible,
.adv-btn.adv-btn--outline-gold:focus-visible,
.au-btn.au-btn--outline:focus-visible {
  outline: 2px solid var(--ui-btn-accent-bg);
  outline-offset: 3px;
}

.au-btn.au-btn--outline.au-btn--dark {
  border: 1px solid rgba(26, 23, 16, 0.45);
  color: var(--au-ink);
  padding: 14px 22px;
  border-radius: var(--ui-btn-radius-pill);
}

.au-btn.au-btn--outline.au-btn--dark:hover {
  border-color: var(--au-ink);
  background: rgba(0, 0, 0, 0.04);
}

/* --- 3. Ghost na ciemnym tle (hero podstron itd.) --- */
.doc-btn.doc-btn--ghost,
.adv-btn.adv-btn--ghost,
.tim-btn.tim-btn--ghost,
.osbw-btn.osbw-btn--ghost,
.f5-btn.f5-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: var(--ui-btn-radius);
  background: transparent;
  color: var(--ui-btn-ghost-fg);
  border: 1px solid var(--ui-btn-ghost-border);
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-font-size);
  line-height: var(--ui-btn-line-height);
  font-weight: var(--ui-btn-weight);
  letter-spacing: var(--ui-btn-letter);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-150) var(--motion-ease), border-color var(--motion-150) var(--motion-ease), color var(--motion-150) var(--motion-ease);
}

.doc-btn.doc-btn--ghost:hover,
.adv-btn.adv-btn--ghost:hover,
.tim-btn.tim-btn--ghost:hover,
.osbw-btn.osbw-btn--ghost:hover,
.f5-btn.f5-btn--ghost:hover {
  background: var(--ui-btn-ghost-bg-hover);
}

.doc-btn.doc-btn--ghost:focus-visible,
.adv-btn.adv-btn--ghost:focus-visible,
.tim-btn.tim-btn--ghost:focus-visible,
.osbw-btn.osbw-btn--ghost:focus-visible,
.f5-btn.f5-btn--ghost:focus-visible {
  outline: 2px solid var(--ui-btn-ghost-fg);
  outline-offset: 3px;
}

/* Gallery: wypełnienie białą na kremie (tylko .gallery-page definiuje --gal-ink) */
.gal-btn.gal-btn--on-cream {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--ui-btn-radius);
  background: #fff;
  border: 1px solid rgba(184, 151, 58, 0.55);
  color: var(--gal-ink, #1a1a1a);
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-font-size);
  line-height: var(--ui-btn-line-height);
  font-weight: var(--ui-btn-weight);
  letter-spacing: var(--ui-btn-letter);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-150) var(--motion-ease), border-color var(--motion-150) var(--motion-ease), color var(--motion-150) var(--motion-ease);
}

.gal-btn.gal-btn--on-cream:hover {
  background: #fdfcfa;
  border-color: var(--ui-btn-accent-bg-hover);
  color: var(--gal-ink, #1a1a1a);
}

/* --- 4. Ciemna pigułka (jak .founding-cta) --- */
.founding-cta {
  margin-top: clamp(22px, 2.8vh, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--ui-btn-radius-pill);
  text-decoration: none;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-body-sm-font-size);
  font-weight: var(--type-h5-font-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-btn-darkpill-fg);
  background: var(--ui-btn-darkpill-bg);
  border: var(--ui-btn-darkpill-border);
  cursor: pointer;
  transition: background var(--motion-200) var(--motion-ease), transform var(--motion-150) var(--motion-ease);
}

.founding-cta:hover {
  background: var(--ui-btn-darkpill-bg-hover);
}

.founding-cta:focus-visible {
  outline: 2px solid var(--ui-btn-accent-bg);
  outline-offset: 3px;
}

/* --- 5. Złoty aksjon na panelu (jak .share-reflection-submit) = ten sam flat co intro --- */
.share-reflection-submit {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 48px;
  padding: 14px 26px;
  border-radius: var(--ui-btn-radius);
  border: none;
  background: var(--ui-btn-accent-bg);
  color: var(--ui-btn-accent-fg);
  font-family: var(--ui-btn-font);
  font-size: var(--ui-btn-font-size);
  font-weight: 700;
  letter-spacing: var(--ui-btn-letter);
  text-transform: none;
  cursor: pointer;
  transition: background var(--motion-200) var(--motion-ease), color var(--motion-200) var(--motion-ease);
}

.share-reflection-submit:hover {
  background: var(--ui-btn-accent-bg-hover);
  color: var(--ui-btn-accent-fg);
}

.share-reflection-submit:focus-visible {
  outline: 2px solid var(--ui-btn-accent-fg);
  outline-offset: 3px;
}

/* --- 6. Ciemny submit formularza (contact + advertising) --- */
.contact-submit,
.adv-btn.adv-btn--dark {
  margin-top: 4px;
  width: 100%;
  height: 46px;
  border-radius: var(--radius-6);
  background: var(--ui-btn-submit-dark-bg);
  color: var(--ui-btn-submit-dark-fg);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-h5-font-size);
  font-weight: var(--type-h5-font-weight);
  border: var(--ui-btn-submit-dark-border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--motion-200) var(--motion-ease);
}

.adv-btn.adv-btn--dark {
  margin-top: 0;
  width: auto;
  min-height: 46px;
  height: auto;
  padding: 12px 22px;
}

.contact-submit:hover,
.adv-btn.adv-btn--dark:hover {
  background: var(--ui-btn-submit-dark-bg-hover);
}

.contact-submit:focus-visible,
.adv-btn.adv-btn--dark:focus-visible {
  outline: 2px solid var(--ui-btn-accent-bg);
  outline-offset: 3px;
}

/* --- 7. Złota pigułka w stopce --- */
.site-footer-submit {
  margin-top: 10px;
  width: auto;
  min-width: 140px;
  height: 44px;
  padding: 0 22px;
  border: none;
  border-radius: var(--ui-btn-radius-pill);
  background: var(--ui-btn-footer-bg);
  color: var(--ui-btn-footer-fg);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--type-h5-font-family);
  font-size: var(--type-caption-font-size);
  font-weight: var(--type-h5-font-weight);
  cursor: pointer;
  transition: filter var(--motion-150) var(--motion-ease);
}

.site-footer-submit:hover {
  filter: brightness(1.05);
}

.site-footer-submit:focus-visible {
  outline: 2px solid var(--ui-btn-submit-dark-bg);
  outline-offset: 3px;
}

/* --- Nawigacja (jak homepage) --- */
.nav-mobile-menu-cta {
  border: 1px solid rgba(184, 151, 58, 0.48);
  background: var(--ui-nav-primary-bg);
}

.nav-cta-primary {
  border: var(--ui-nav-primary-border);
  background: var(--ui-nav-primary-bg);
  color: var(--ui-nav-primary-fg);
}

.nav-cta-primary:hover {
  border: 1px solid var(--ui-nav-primary-border-hover);
  background: var(--ui-nav-primary-bg-hover);
}

.nav-cta-secondary {
  border: var(--ui-nav-secondary-border);
  background: var(--ui-nav-secondary-bg);
  color: var(--ui-nav-secondary-fg);
}

.nav-cta-secondary:hover {
  border: var(--ui-nav-secondary-border-hover);
}

.nav-mobile-menu-cta:focus-visible,
.nav-cta-primary:focus-visible,
.nav-cta-secondary:focus-visible {
  outline: 2px solid var(--ui-btn-accent-bg);
  outline-offset: 3px;
}

/* --- Gallery: duży CTA — kolory jak accent + ghost, kształt dwuliniowy zachowany --- */
.gal-cta-btn--solid {
  background: var(--ui-btn-accent-bg);
  border: 1px solid var(--ui-btn-accent-bg-hover);
  color: var(--ui-btn-accent-fg);
  border-radius: var(--ui-btn-radius);
}

.gal-cta-btn--solid:hover {
  background: var(--ui-btn-accent-bg-hover);
}

.gal-cta-btn--solid .gal-cta-btn__sub {
  color: rgba(255, 255, 255, 0.85);
}

.gal-cta-btn--ghost {
  background: transparent;
  border: 1px solid var(--ui-btn-ghost-border);
  color: var(--ui-btn-ghost-fg);
  border-radius: var(--ui-btn-radius);
}

.gal-cta-btn--ghost:hover {
  background: var(--ui-btn-ghost-bg-hover);
}

.gal-cta-btn--ghost .gal-cta-btn__sub {
  color: rgba(234, 220, 170, 0.92);
}

.gal-cta-btn--ghost .gal-cta-btn__top {
  color: #f0e4c4;
}