/*
 * Phoenix storefront accent-color overrides.
 *
 * Phoenix theme.css hardcodes #3874ff inside .btn-primary and .btn-outline-primary
 * (via --phoenix-btn-bg / --phoenix-btn-color etc.) instead of referencing
 * var(--phoenix-primary). That means the skin files under ./color/skin-*.css do
 * not reach these buttons on their own.
 *
 * This file is loaded only on the storefront (phoenix/base_ecommerce.html),
 * right after the accent skin, and redirects the button-scoped variables to
 * the accent variables so all .btn-primary / .btn-outline-primary buttons
 * follow the selected Phoenix accent color.
 *
 * The dashboard (phoenix/base.html) intentionally does NOT load this file and
 * keeps the default Phoenix blue.
 */

.btn-primary {
  --phoenix-btn-bg: var(--phoenix-primary);
  --phoenix-btn-hover-bg: var(--phoenix-primary-dark);
  --phoenix-btn-active-bg: var(--phoenix-primary-dark);
  --phoenix-btn-disabled-bg: var(--phoenix-primary);
  --phoenix-btn-focus-shadow-rgb: var(--phoenix-primary-rgb);
}

.btn-outline-primary {
  --phoenix-btn-color: var(--phoenix-primary);
  --phoenix-btn-border-color: var(--phoenix-primary);
  --phoenix-btn-hover-bg: var(--phoenix-primary);
  --phoenix-btn-hover-border-color: var(--phoenix-primary);
  --phoenix-btn-active-bg: var(--phoenix-primary);
  --phoenix-btn-active-border-color: var(--phoenix-primary);
  --phoenix-btn-disabled-color: var(--phoenix-primary);
  --phoenix-btn-disabled-border-color: var(--phoenix-primary);
  --phoenix-btn-focus-shadow-rgb: var(--phoenix-primary-rgb);
}

[data-bs-theme="dark"] .btn-primary {
  --phoenix-btn-bg: var(--phoenix-primary);
  --phoenix-btn-hover-bg: var(--phoenix-primary-light);
  --phoenix-btn-active-bg: var(--phoenix-primary-light);
  --phoenix-btn-disabled-bg: var(--phoenix-primary);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --phoenix-btn-color: var(--phoenix-primary);
  --phoenix-btn-border-color: var(--phoenix-primary);
  --phoenix-btn-hover-bg: var(--phoenix-primary);
  --phoenix-btn-hover-border-color: var(--phoenix-primary);
  --phoenix-btn-active-bg: var(--phoenix-primary);
  --phoenix-btn-active-border-color: var(--phoenix-primary);
  --phoenix-btn-disabled-color: var(--phoenix-primary);
  --phoenix-btn-disabled-border-color: var(--phoenix-primary);
}

/*
 * .btn-phoenix-primary is Phoenix's "soft" variant (light gray bg, colored text).
 * theme.css hardcodes #3874ff for --phoenix-btn-color / active-color, so the idle
 * label ignores the accent. Hover already uses --phoenix-primary-dark and works.
 * These overrides route the idle + active text color to the accent variable.
 */
.btn-phoenix-primary {
  --phoenix-btn-color: var(--phoenix-primary);
  --phoenix-btn-active-color: var(--phoenix-primary);
  --phoenix-btn-focus-shadow-rgb: var(--phoenix-primary-rgb);
}

[data-bs-theme="dark"] .btn-phoenix-primary {
  --phoenix-btn-color: var(--phoenix-primary);
  --phoenix-btn-active-color: var(--phoenix-primary);
}

/*
 * Form controls (radio / checkbox) hardcode #3874ff in theme.css for the
 * :checked, :focus, and :indeterminate states. Redirect them to the accent.
 */
.form-check-input:checked {
  background-color: var(--phoenix-primary);
  border-color: var(--phoenix-primary);
}

.form-check-input:focus {
  border-color: var(--phoenix-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25);
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--phoenix-primary);
  border-color: var(--phoenix-primary);
}