/* PulseFit theme for Bootstrap 6 (6.0.0-alpha.1).
   Gold #C9A66B, ink gold #7a5a1f, charcoal nav #212529, page #f5f5f5, surface #fff.
   Load after bootstrap.min.css. Scoped to pulsefit-template pages (no VitePress bleed). */
:root,
:host {
  --pf-gold: #c9a66b;
  --pf-gold-hover: #b8955c;
  --pf-gold-ink: #7a5a1f;
  --pf-gold-soft: #f5e6d3;
  --pf-nav: #212529;

  --bs-primary-base: #c9a66b;
  --bs-primary-bg: #c9a66b;
  --bs-primary-contrast: #212121;
  --bs-primary-fg: light-dark(#7a5a1f, #d9bc86);
  --bs-primary-fg-emphasis: light-dark(#5c4520, #e8d4a8);
  --bs-primary-bg-subtle: light-dark(#f5e6d3, #3a3123);
  --bs-primary-bg-muted: light-dark(#e6d2b0, #4a3f2c);
  --bs-primary-border: light-dark(#e6d2b0, #4a3f2c);
  --bs-primary-focus-ring: light-dark(rgb(201 166 107 / 0.45), rgb(217 188 134 / 0.5));

  --bs-secondary-base: #5f666d;
  --bs-secondary-bg: light-dark(#e0e0e0, #383b40);
  --bs-secondary-contrast: light-dark(#212121, #ececee);
  --bs-secondary-fg: light-dark(#5f666d, #a3a7ad);
  --bs-secondary-fg-emphasis: light-dark(#333333, #ececee);
  --bs-secondary-bg-subtle: light-dark(#f5f5f5, #222427);
  --bs-secondary-bg-muted: light-dark(#e0e0e0, #2e3036);
  --bs-secondary-border: light-dark(#e0e0e0, #383b40);

  --bs-success-base: #198754;
  --bs-success-bg: #198754;
  --bs-success-fg: light-dark(#11643b, #4cc38a);
  --bs-success-fg-emphasis: light-dark(#0d4f2e, #6fd69a);
  --bs-success-bg-subtle: light-dark(#d1e7dd, #16301f);
  --bs-success-bg-muted: light-dark(#badbcc, #1f4030);
  --bs-success-border: light-dark(#badbcc, #1f4030);

  --bs-warning-base: #b77900;
  --bs-warning-bg: #b77900;
  --bs-warning-contrast: #212121;
  --bs-warning-fg: light-dark(#8a5c00, #e0a02a);
  --bs-warning-fg-emphasis: light-dark(#6b4700, #f0c060);
  --bs-warning-bg-subtle: light-dark(#fff3cd, #3a2f10);
  --bs-warning-bg-muted: light-dark(#ffe69c, #4a3a14);
  --bs-warning-border: light-dark(#ffe69c, #4a3a14);

  --bs-danger-base: #dc3545;
  --bs-danger-bg: #dc3545;
  --bs-danger-fg: light-dark(#a52432, #f0707c);
  --bs-danger-fg-emphasis: light-dark(#842029, #f08a94);
  --bs-danger-bg-subtle: light-dark(#f8d7da, #3a1a1e);
  --bs-danger-bg-muted: light-dark(#f1aeb5, #4a2228);
  --bs-danger-border: light-dark(#f1aeb5, #4a2228);

  --bs-info-base: #0a7e96;
  --bs-info-bg: #0a7e96;
  --bs-info-contrast: #ffffff;
  --bs-info-fg: light-dark(#0a7e96, #4cc2d8);
  --bs-info-fg-emphasis: light-dark(#076078, #6cc7da);
  --bs-info-bg-subtle: light-dark(#cff4fc, #10303a);
  --bs-info-bg-muted: light-dark(#9eeaf9, #163848);
  --bs-info-border: light-dark(#9eeaf9, #163848);

  --bs-bg-body: light-dark(#f5f5f5, #17181a);
  --bs-bg-1: light-dark(#ffffff, #222427);
  --bs-bg-2: light-dark(#f5f5f5, #1d1e21);
  --bs-bg-3: light-dark(#e0e0e0, #383b40);
  --bs-fg-body: light-dark(#212121, #ececee);
  --bs-fg-1: light-dark(#212121, #ececee);
  --bs-fg-2: light-dark(#333333, #c8c9ce);
  --bs-fg-3: light-dark(#5f666d, #a3a7ad);
  --bs-border-color: light-dark(#e0e0e0, #383b40);
  --bs-border-body: light-dark(#e0e0e0, #383b40);
  --bs-link-color: light-dark(#7a5a1f, #d9bc86);
  --bs-link-hover-color: light-dark(#5c4520, #e8d4a8);
  --bs-body-font-family: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --bs-radius-5: 8px;
  --bs-radius-7: 12px;
}

.btn-solid.theme-primary {
  --bs-btn-hover-bg: #b8955c;
  --bs-btn-hover-border-color: #b8955c;
  --bs-btn-active-bg: #8b7355;
  --bs-btn-active-border-color: #8b7355;
}

.pulsefit-navbar {
  --bs-navbar-color: #adb5bd;
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  background-color: var(--pf-nav);
  border-bottom: 1px solid #111;
}

.pulsefit-navbar .navbar-brand {
  font-family: "Bebas Neue", "Rubik", sans-serif;
  letter-spacing: 0.08em;
  font-size: 1.35rem;
}

.pf-gallery {
  font-family: var(--bs-body-font-family);
  color: var(--bs-fg-body);
  background: var(--bs-bg-body);
  min-height: 100vh;
  padding: 1rem 1.25rem 3rem;
}

.pf-gallery section {
  margin: 2rem 0;
  scroll-margin-top: 1rem;
}

.pf-gallery h2 {
  font-family: Montserrat, Rubik, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--bs-fg-1);
}

.pf-gallery .demo {
  background: var(--bs-bg-1);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1rem;
}

.pf-gallery :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pf-gold) 35%, transparent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-gallery * {
    scroll-behavior: auto !important;
  }
}