:root {
  /* Theme colors */
  --bs-primary: #D09C41;
  --bs-primary-rgb: 208, 156, 65;
  --bs-secondary: #6CB6DD;
  --bs-secondary-rgb: 108, 182, 221;
  --bs-light: #E0E4DD;
  --bs-light-rgb: 224, 228, 221;
  --bs-dark: #062A3D;
  --bs-dark-rgb: 6, 42, 61;
  --bs-warning: #947238;
  --bs-warning-rgb: 148, 114, 56;

  /* Additional custom colors */
  --satin-sheen-gold: #D09C41;
  --carolina-blue: #6CB6DD; 
  --alabaster: #E0E4DD;
  --prussian-blue: #062A3D;
  --golden-brown: #947238;

  /* Override Bootstrap component colors */
  --bs-btn-bg: var(--bs-primary);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--golden-brown);

  /* Add these with your other theme colors */
  --bs-danger: #9B2D2D;
  --bs-danger-rgb: 155, 45, 45;

  /* Add with your additional custom colors */
  --burgundy-red: #9B2D2D;
}

/* Button overrides */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--golden-brown);
  --bs-btn-hover-border-color: var(--golden-brown);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--golden-brown);
  --bs-btn-active-border-color: var(--golden-brown);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--carolina-blue);
  --bs-btn-hover-border-color: var(--carolina-blue);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--carolina-blue);
  --bs-btn-active-border-color: var(--carolina-blue);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

/* Outline button overrides */
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

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

/* Alert overrides */
.alert-primary {
  --bs-alert-color: var(--bs-primary);
  --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 15%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 40%, white);
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary);
  --bs-alert-bg: color-mix(in srgb, var(--bs-secondary) 15%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-secondary) 40%, white);
}

/* Badge overrides */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/* Form validation states */
.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Progress bar overrides */
.progress {
  --bs-progress-bar-bg: var(--bs-primary);
}

/* Card overrides — iOS-inspired */
:root {
  --bs-body-bg: #F2F2F7;
  --bs-body-bg-rgb: 242, 242, 247;
}

[data-bs-theme=light] {
  --bs-body-bg: #F2F2F7;
  --bs-body-bg-rgb: 242, 242, 247;
  --bs-tertiary-bg: #FFFFFF;
  --bs-tertiary-bg-rgb: 255, 255, 255;
}

[data-bs-theme=light] .card {
  --bs-card-bg: #FFFFFF;
  background-color: #FFFFFF;
}

.card {
  border: none;
  border-radius: 16px;
  overflow: hidden; /* clip header/footer to card's border-radius */
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.06);
}

.card-header,
.card-footer {
  background-color: transparent;
  border-color: rgba(0, 0, 0, 0.08);
}

.card-primary {
  box-shadow:
    0 0 0 0.5px rgba(var(--bs-primary-rgb), 0.3),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 6px 20px rgba(0, 0, 0, 0.06);
}

.card-primary > .card-header {
  background-color: var(--bs-primary);
  color: #fff;
  border-color: transparent;
}

/* Pagination overrides */
.pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-hover-color: var(--golden-brown);
  --bs-pagination-focus-color: var(--golden-brown);
}

/* Nav tabs overrides */
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--bs-primary);
  --bs-nav-tabs-link-active-border-color: var(--bs-primary);
}

.nav-tabs .nav-link:hover {
  border-color: var(--bs-primary);
}

/* List group overrides */
.list-group-item.active {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Add these with your other button overrides */
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #832626;
  --bs-btn-hover-border-color: #832626;
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #832626;
  --bs-btn-active-border-color: #832626;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-disabled-color: var(--bs-danger);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger);
}

/* Add with your alert overrides */
.alert-danger {
  --bs-alert-color: var(--bs-danger);
  --bs-alert-bg: color-mix(in srgb, var(--bs-danger) 15%, white);
  --bs-alert-border-color: color-mix(in srgb, var(--bs-danger) 40%, white);
}

/* Dark mode — JS sets data-bs-theme="dark" based on OS preference, which
   activates Bootstrap's built-in dark mode. These overrides layer iOS-inspired
   colors on top of Bootstrap's defaults. We use [data-bs-theme=dark] to match
   Bootstrap's specificity, with a media-query fallback for the initial paint. */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-body-bg: #121214;
    --bs-body-bg-rgb: 18, 18, 20;
    --bs-tertiary-bg: #2C2C2E;
    --bs-tertiary-bg-rgb: 44, 44, 46;
  }
}

[data-bs-theme=dark] {
  --bs-body-bg: #121214;
  --bs-body-bg-rgb: 18, 18, 20;
  --bs-tertiary-bg: #2C2C2E;
  --bs-tertiary-bg-rgb: 44, 44, 46;
  --bs-heading-color: #FFFFFF;
  --bs-body-color: #E5E5E7;

  .card {
    background-color: #2C2C2E;
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.3),
      0 6px 20px rgba(0, 0, 0, 0.25);
  }

  .card-header,
  .card-footer {
    border-color: rgba(255, 255, 255, 0.1);
  }

  .card-primary {
    box-shadow:
      0 0 0 0.5px rgba(var(--bs-primary-rgb), 0.4),
      0 1px 3px rgba(0, 0, 0, 0.3),
      0 6px 20px rgba(0, 0, 0, 0.25);
  }

  /* Alert overrides — mix with black instead of white for dark backgrounds */
  .alert-primary {
    --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 20%, black);
    --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 40%, #2C2C2E);
    --bs-alert-color: color-mix(in srgb, var(--bs-primary) 60%, white);
  }

  .alert-secondary {
    --bs-alert-bg: color-mix(in srgb, var(--bs-secondary) 20%, black);
    --bs-alert-border-color: color-mix(in srgb, var(--bs-secondary) 40%, #2C2C2E);
    --bs-alert-color: color-mix(in srgb, var(--bs-secondary) 60%, white);
  }

  .alert-danger {
    --bs-alert-bg: color-mix(in srgb, var(--bs-danger) 20%, black);
    --bs-alert-border-color: color-mix(in srgb, var(--bs-danger) 40%, #2C2C2E);
    --bs-alert-color: color-mix(in srgb, var(--bs-danger) 60%, white);
  }

  .alert-warning {
    --bs-alert-bg: color-mix(in srgb, var(--bs-warning) 20%, black);
    --bs-alert-border-color: color-mix(in srgb, var(--bs-warning) 40%, #2C2C2E);
    --bs-alert-color: color-mix(in srgb, var(--bs-warning) 60%, white);
  }

  .alert-info {
    --bs-alert-bg: color-mix(in srgb, #0dcaf0 15%, #121214);
    --bs-alert-border-color: color-mix(in srgb, #0dcaf0 30%, #2C2C2E);
    --bs-alert-color: #6edff6;
  }

  /* alert-light — used for informational callouts (login, home, modals) */
  .alert-light {
    --bs-alert-bg: #2C2C2E;
    --bs-alert-border-color: rgba(255, 255, 255, 0.1);
    --bs-alert-color: #EBEBF5;
  }

  /* Slightly boost bg-primary opacity for dark mode visibility */
  .card.bg-primary.bg-opacity-10 {
    --bs-bg-opacity: 0.15;
  }
}