/* Re-themes vendored Bootstrap 5.3 (static/css/vendor/bootstrap.min.css)
 * to use PhotoQuo's existing brand palette (tokens.css) instead of
 * Bootstrap's own default blue/gray theme — no Sass rebuild required,
 * since Bootstrap 5.3 exposes its own colors as overridable CSS custom
 * properties. Every value below is a var() reference to tokens.css; this
 * file defines no literal color value of its own (spec FR-025). Must load
 * after bootstrap.min.css and tokens.css, before base.css. */

:root {
  /* Global Bootstrap variables — affect body text/background, links, and
   * any component whose CSS reads --bs-primary/--bs-primary-rgb directly
   * (e.g. focus-ring box-shadows). */
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--color-background);
  --bs-border-color: var(--color-border);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bs-primary: var(--color-highlight);
  --bs-primary-rgb: var(--color-highlight-rgb);
  --bs-secondary: var(--color-text-secondary);
  --bs-secondary-rgb: var(--color-text-secondary-rgb);
  --bs-danger: var(--color-error);
  --bs-danger-rgb: var(--color-error-rgb);

  --bs-link-color: var(--color-highlight);
  --bs-link-color-rgb: var(--color-highlight-rgb);
  --bs-link-hover-color: var(--color-highlight);
  --bs-link-hover-color-rgb: var(--color-highlight-rgb);
}

/* Bootstrap 5.3 bakes each button variant's own colors as component-scoped
 * --bs-btn-* custom properties rather than deriving them from --bs-primary
 * at paint time, so the primary/danger buttons need their own explicit
 * reassignment to stay in sync with the palette above. */
.btn-primary {
  --bs-btn-color: var(--color-surface);
  --bs-btn-bg: var(--color-highlight);
  --bs-btn-border-color: var(--color-highlight);
  --bs-btn-hover-color: var(--color-surface);
  --bs-btn-hover-bg: var(--color-highlight);
  --bs-btn-hover-border-color: var(--color-highlight);
  --bs-btn-active-color: var(--color-surface);
  --bs-btn-active-bg: var(--color-highlight);
  --bs-btn-active-border-color: var(--color-highlight);
  --bs-btn-disabled-bg: var(--color-highlight);
  --bs-btn-disabled-border-color: var(--color-highlight);
  --bs-btn-focus-shadow-rgb: var(--color-highlight-rgb);
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-border);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--color-border);
  --bs-btn-focus-shadow-rgb: var(--color-border-rgb);
}

.btn-danger {
  --bs-btn-color: var(--color-background);
  --bs-btn-bg: var(--color-error);
  --bs-btn-border-color: var(--color-error);
  --bs-btn-hover-color: var(--color-background);
  --bs-btn-hover-bg: var(--color-error);
  --bs-btn-hover-border-color: var(--color-error);
  --bs-btn-active-color: var(--color-background);
  --bs-btn-active-bg: var(--color-error);
  --bs-btn-active-border-color: var(--color-error);
  --bs-btn-focus-shadow-rgb: var(--color-error-rgb);
}

/* The Menu toggle button sits on the header's own dark background
   (base.css's .pq-header), so it needs its own dark-on-light colors
   rather than the page-background-oriented .btn-outline-secondary
   defaults used everywhere else. */
.pq-header .btn-outline-secondary {
  --bs-btn-color: var(--color-highlight);
  --bs-btn-border-color: var(--color-highlight);
  --bs-btn-hover-color: var(--color-highlight);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-highlight);
  --bs-btn-active-color: var(--color-highlight);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--color-highlight);
}

.navbar {
  --bs-navbar-color: var(--color-text-primary);
  --bs-navbar-hover-color: var(--color-text-primary);
  --bs-navbar-active-color: var(--color-text-primary);
  --bs-navbar-brand-color: var(--color-highlight);
  --bs-navbar-brand-hover-color: var(--color-highlight);
  --bs-navbar-toggler-border-color: var(--color-border);
}

.form-control:focus,
.form-check-input:focus {
  border-color: var(--color-highlight);
}

.form-check-input:checked {
  background-color: var(--color-highlight);
  border-color: var(--color-highlight);
}