/*
 * Webstand theme: the ONLY place with literal colors (hex/rgb) in the site CSS and views.
 * Everything else uses var(--ws-...). Change a value here to change the whole site.
 *
 * Palette (docs/decisions/pesquisa-homepage.md): soft red for main actions, prices and highlights;
 * grey for secondary text and borders; black (#2C2C2A) header and footer; white background.
 */

:root {
  /* Brand */
  --ws-primary: #A32D2D;
  --ws-primary-hover: #8E2626;
  --ws-primary-contrast: #FFFFFF;
  --ws-primary-rgb: 163, 45, 45;            /* same color as --ws-primary, for Bootstrap's rgb() variables */
  --ws-price-color: var(--ws-primary);
  --ws-featured-accent: var(--ws-primary);

  /* Header and footer */
  --ws-header-bg: #2C2C2A;
  --ws-header-fg: #F5F5F3;
  --ws-header-fg-muted: #C9C9C5;
  --ws-footer-bg: #2C2C2A;
  --ws-footer-fg: #C9C9C5;
  --ws-footer-fg-strong: #F5F5F3;

  /* Surfaces and text */
  --ws-body-bg: #FFFFFF;
  --ws-body-fg: #212529;
  --ws-text-secondary: #6C6C68;
  --ws-border: #E2E2DE;
  --ws-focus-ring: #258CFB;
  --ws-shadow: rgba(0, 0, 0, 0.05);

  /* Stand page: "Aberto agora" / "Fechado agora" badges and the circle with the initials */
  --ws-open-bg: #1E7B34;
  --ws-open-fg: #FFFFFF;
  --ws-closed-bg: #6C6C68;
  --ws-closed-fg: #FFFFFF;

  /* Text color for the primary red on dark surfaces (dark mode links and highlights) */
  --ws-primary-text-dark: #F09595;

  /* Lines of the statistics chart (also told apart by their line style) */
  --ws-chart-views: var(--ws-primary);
  --ws-chart-contacts: #2B5D9B;
  --ws-chart-reveals: #1E7B34;

  /* Mapping to Bootstrap */
  --bs-primary: var(--ws-primary);
  --bs-primary-rgb: var(--ws-primary-rgb);
  --bs-link-color: var(--ws-primary);
  --bs-link-color-rgb: var(--ws-primary-rgb);
  --bs-link-hover-color: var(--ws-primary-hover);
  --bs-body-bg: var(--ws-body-bg);
  --bs-body-color: var(--ws-body-fg);
  --bs-secondary-color: var(--ws-text-secondary);
  --bs-border-color: var(--ws-border);
  --bs-focus-ring-color: var(--ws-focus-ring);
}

/*
 * Dark mode: variables only. No selector and no automatic detection (closed decision): the attribute
 * data-bs-theme="dark" is not set anywhere yet; it is here so a future switch only has to set it.
 */
[data-bs-theme="dark"] {
  --ws-primary-contrast: #FFFFFF;
  --ws-body-bg: #1C1C1B;
  --ws-body-fg: #E8E8E5;
  --ws-text-secondary: #A5A5A0;
  --ws-border: #3A3A38;
  --ws-price-color: var(--ws-primary-text-dark);
  --bs-link-color: var(--ws-primary-text-dark);
  --bs-link-hover-color: var(--ws-primary-text-dark);
}

/* ---- Components that Bootstrap colors with fixed values ---- */

a {
  color: var(--ws-link-color, var(--bs-link-color));
}

a:hover {
  color: var(--bs-link-hover-color);
}

.btn-primary {
  --bs-btn-color: var(--ws-primary-contrast);
  --bs-btn-bg: var(--ws-primary);
  --bs-btn-border-color: var(--ws-primary);
  --bs-btn-hover-color: var(--ws-primary-contrast);
  --bs-btn-hover-bg: var(--ws-primary-hover);
  --bs-btn-hover-border-color: var(--ws-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--ws-primary-rgb);
  --bs-btn-active-color: var(--ws-primary-contrast);
  --bs-btn-active-bg: var(--ws-primary-hover);
  --bs-btn-active-border-color: var(--ws-primary-hover);
  --bs-btn-disabled-color: var(--ws-primary-contrast);
  --bs-btn-disabled-bg: var(--ws-primary);
  --bs-btn-disabled-border-color: var(--ws-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--ws-primary);
  --bs-btn-border-color: var(--ws-primary);
  --bs-btn-hover-color: var(--ws-primary-contrast);
  --bs-btn-hover-bg: var(--ws-primary);
  --bs-btn-hover-border-color: var(--ws-primary);
  --bs-btn-active-color: var(--ws-primary-contrast);
  --bs-btn-active-bg: var(--ws-primary-hover);
  --bs-btn-active-border-color: var(--ws-primary-hover);
  --bs-btn-disabled-color: var(--ws-primary);
  --bs-btn-disabled-border-color: var(--ws-primary);
}

.text-primary {
  color: var(--ws-primary) !important;
}

.bg-primary {
  background-color: var(--ws-primary) !important;
}

.border-primary {
  border-color: var(--ws-primary) !important;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--ws-primary);
  --bs-nav-pills-link-active-color: var(--ws-primary-contrast);
}

.pagination {
  --bs-pagination-color: var(--ws-primary);
  --bs-pagination-hover-color: var(--ws-primary-hover);
  --bs-pagination-active-bg: var(--ws-primary);
  --bs-pagination-active-border-color: var(--ws-primary);
  --bs-pagination-active-color: var(--ws-primary-contrast);
}

.form-check-input:checked {
  background-color: var(--ws-primary);
  border-color: var(--ws-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ws-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--ws-primary-rgb), 0.25);
}

/* ---- Site-specific tokens (used by later pages) ---- */

.ws-price {
  color: var(--ws-price-color);
  font-weight: 600;
}

.ws-featured {
  border-color: var(--ws-featured-accent);
}

.ws-text-secondary {
  color: var(--ws-text-secondary);
}
