/* ------------------------------ */
/* Gold & Black Bootstrap 5 Theme */
/* ------------------------------ */

:root {
  /* ---------- Main Colors ---------- */
  --bs-primary: #000;             /* Black primary */
  --bs-primary-rgb: 0, 0, 0;
  --bs-secondary: #9E7E38FF;      /* Gold */
  --bs-secondary-rgb: 206, 184,136;
  --bs-dark: #000;                /* Structural dark (keep as default) */
  --bs-light: #fff;               /* White text/background as needed */

  /* ---------- Text ---------- */
  --bs-primary-text: #fff;        /* White text on Black buttons / links */
  --bs-secondary-text: #000;      /* Black text on Gold buttons / links */

  /* ---------- Primary Dynamic Interaction States ---------- */
  --bs-primary-hover: color-mix(in srgb, var(--bs-primary) 80%, black 20%);
  --bs-primary-active: color-mix(in srgb, var(--bs-primary) 60%, black 40%);
  --bs-primary-focus: color-mix(in srgb, var(--bs-primary) 90%, white 10%);

  /* ---------- Secondary Dynamic Interaction States ---------- */
  --bs-secondary-hover: color-mix(in srgb, var(--bs-secondary) 80%, #333 20%);
  --bs-secondary-active: color-mix(in srgb, var(--bs-secondary) 60%, #333 40%);
  --bs-secondary-focus: color-mix(in srgb, var(--bs-secondary) 90%, #666 10%);

  /* ---------- Background & Subtle Variants ---------- */
  --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.1);
  --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.25);
  --bs-secondary-bg-subtle: rgba(var(--bs-secondary-rgb), 0.1);
  --bs-secondary-border-subtle: rgba(var(--bs-secondary-rgb), 0.25);

  /* ---------- Links ---------- */
  --bs-primary-link-hover: var(--bs-primary-hover);
  --bs-primary-link-active: var(--bs-primary-active);
  --bs-secondary-link-hover: var(--bs-secondary-hover);
  --bs-secondary-link-active: var(--bs-secondary-active);

  /* ---------- Buttons ---------- */
  --bs-primary-btn-border-color: var(--bs-primary);
  --bs-primary-btn-hover-border-color: var(--bs-primary-hover);
  --bs-primary-btn-active-border-color: var(--bs-primary-active);
  --bs-secondary-btn-border-color: var(--bs-secondary);
  --bs-secondary-btn-hover-border-color: var(--bs-secondary-hover);
  --bs-secondary-btn-active-border-color: var(--bs-secondary-active);

  /* ---------- Form Controls / Inputs ---------- */
  --bs-primary-input-focus-border-color: var(--bs-primary);
  --bs-primary-input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  --bs-secondary-input-focus-border-color: var(--bs-secondary);
  --bs-secondary-input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-secondary-rgb), 0.25);

  /* ---------- Alerts ---------- */
  --bs-primary-alert-bg: var(--bs-primary-bg-subtle);
  --bs-primary-alert-border-color: var(--bs-primary-border-subtle);
  --bs-secondary-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-secondary-alert-border-color: var(--bs-secondary-border-subtle);

  /* ---------- Badges ---------- */
  --bs-primary-badge-bg: var(--bs-primary);
  --bs-primary-badge-text-color: #000;
  --bs-secondary-badge-bg: var(--bs-secondary);
  --bs-secondary-badge-text-color: #fff;

  /* ---------- Progress Bars ---------- */
  --bs-primary-progress-bg: var(--bs-primary);
  --bs-secondary-progress-bg: var(--bs-secondary);

  /* ---------- Spinners ---------- */
  --bs-primary-spinner-border: var(--bs-primary);
  --bs-primary-spinner-grow: var(--bs-primary);
  --bs-secondary-spinner-border: var(--bs-secondary);
  --bs-secondary-spinner-grow: var(--bs-secondary);

  /* ---------- Tooltips / Popovers ---------- */
  --bs-primary-tooltip-bg: var(--bs-primary);
  --bs-secondary-tooltip-bg: var(--bs-secondary);

    /* Primary Buttons */
    .btn-primary {
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary-btn-border-color);
        --bs-btn-color: var(--bs-primary-text);
        --bs-btn-hover-bg: var(--bs-primary-hover);
        --bs-btn-hover-border-color: var(--bs-primary-btn-hover-border-color);
        --bs-btn-active-bg: var(--bs-primary-active);
        --bs-btn-active-border-color: var(--bs-primary-btn-active-border-color);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    /* Secondary Buttons */
    .btn-secondary {
        --bs-btn-bg: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary-btn-border-color);
        --bs-btn-color: var(--bs-secondary-text);
        --bs-btn-hover-bg: var(--bs-secondary-hover);
        --bs-btn-hover-border-color: var(--bs-secondary-btn-hover-border-color);
        --bs-btn-active-bg: var(--bs-secondary-active);
        --bs-btn-active-border-color: var(--bs-secondary-btn-active-border-color);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

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

    .link-secondary {
        --bs-link-color: var(--bs-secondary);
        --bs-link-hover-color: var(--bs-secondary-hover);
    }

    .table-primary {
        --bs-table-bg: var(--bs-primary-bg-subtle);
        --bs-table-border-color: var(--bs-primary-border-subtle);
        --bs-table-color: var(--bs-primary-text);
    }

    .table-secondary {
        --bs-table-bg: var(--bs-secondary-bg-subtle);
        --bs-table-border-color: var(--bs-secondary-border-subtle);
        --bs-table-color: var(--bs-secondary-text);
    }

    .nav-pills.nav-link.active,
    .pagination.page-item.active .page-link {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
        color: var(--bs-primary-text);
    }

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

    .form-check-input:focus {
        border-color: var(--bs-primary-input-focus-border-color);
        box-shadow: var(--bs-primary-input-focus-box-shadow);
    }

    .card-header.bg-primary {
      --bs-card-cap-color: #fff;
      color: var(--bs-card-cap-color);
    }

    .card-header.bg-secondary {
      --bs-card-cap-color: #000; /* or var(--bs-secondary-text) */
      color: var(--bs-card-cap-color);
    }
}

/* ---------- Optional: Dark Mode Tweaks ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.15);
    --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.35);
    --bs-secondary-bg-subtle: rgba(var(--bs-secondary-rgb), 0.15);
    --bs-secondary-border-subtle: rgba(var(--bs-secondary-rgb), 0.35);
  }
}
________________________________________