/* Hidden Pixel Brand Overrides */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root {
  --hp-purple: #875CFF;
  --hp-black: #0B0B0B;
  --hp-cta-orange: #FF8661;
  --hp-grey: #F7F7F7;

  /* Override Tabler variables */
  --tblr-primary: #875CFF;
  --tblr-primary-rgb: 135, 92, 255;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.card-title {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 900;
}

/* Primary buttons use HP Purple */
.btn-primary {
  --tblr-btn-bg: #875CFF;
  --tblr-btn-border-color: #875CFF;
  --tblr-btn-hover-bg: #7347e6;
  --tblr-btn-hover-border-color: #7347e6;
}

/* Outline primary uses HP Purple */
.btn-outline-primary {
  --tblr-btn-color: #875CFF;
  --tblr-btn-border-color: #875CFF;
  --tblr-btn-hover-bg: #875CFF;
  --tblr-btn-hover-border-color: #875CFF;
}

/* Checked/active state for engine toggle buttons */
.btn-check:checked + .btn-outline-primary {
  background-color: #875CFF;
  border-color: #875CFF;
  color: #fff;
}

/* Form focus states use HP CTA Orange */
.form-control:focus,
.form-select:focus {
  border-color: #FF8661;
  box-shadow: 0 0 0 0.25rem rgba(255, 134, 97, 0.25);
}

/* Card styling */
.card {
  border: 1px solid #e9ecef;
}

.card-header {
  background-color: var(--hp-grey);
  border-bottom: 1px solid #e9ecef;
}

/* Alert danger (errors) */
.alert-danger {
  background-color: #fff0ed;
  border-color: #FF8661;
  color: var(--hp-black);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .card-header {
  background-color: var(--tblr-bg-surface);
}

[data-bs-theme="dark"] .alert-danger {
  background-color: rgba(255, 134, 97, 0.15);
  color: #ff9a7d;
}

/* Theme toggle icon styling */
.nav-link[data-bs-theme-value]:hover {
  color: var(--hp-cta-orange);
}

/* Top navbar profile text */
.navbar .nav-link .text-secondary {
  font-family: 'Roboto', Arial, sans-serif;
}

/* Badges use white text for readability */
.badge[class*="bg-"]:not([class*="-lt"]) {
  color: #fff;
}