/* =====================================================
   THEME SYSTEM — Light + Dark Mode
===================================================== */

/* =====================================================
   LIGHT THEME (Default)
===================================================== */

:root {

  /* Brand Palette */
  --color-accent: #AD1414;
  --color-accent-dark: #7F0404;
  --color-gold: #F4BB00;
  --color-gold-soft: #FDDE54;
  --color-amber: #C46B02;

  /* Bootstrap Core */
  --bs-primary: var(--color-accent);
  --bs-secondary: var(--color-accent-dark);
  --bs-success: var(--color-amber);
  --bs-warning: var(--color-gold);
  --bs-info: var(--color-gold-soft);
  --bs-danger: var(--color-accent-dark);

  --bs-light: #f8f9fa;
  --bs-dark: #212529;

  --bs-body-color: #212529;
  --bs-body-bg: #ffffff;

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--color-accent-dark);

  /* Navbar */
  --navbar-bg: #ffffff;
  --navbar-icon: var(--bs-link-color);
  --navbar-hover-icon: var(--bs-link-hover-color);
  --navbar-tooltip-bg: #ffffff;
  --navbar-tooltip-text: var(--bs-primary);
  --navbar-bubble: var(--bs-primary);

  /* Buttons */
  --btn-radius: 6px;
}

/* =====================================================
   DARK MODE
===================================================== */

body.dark-mode {

  --bs-body-color: #f0f0f0;
  --bs-body-bg: #121212;

  --color-accent: #FDDE54;
  --color-accent-dark: #F4BB00;
  --color-amber: #C46B02;

  --bs-primary: var(--color-accent);
  --bs-secondary: var(--color-amber);
  --bs-success: var(--color-accent-dark);
  --bs-warning: var(--color-accent);
  --bs-info: var(--color-accent-dark);
  --bs-danger: #AD1414;

  --bs-light: #f0f0f0;
  --bs-dark: #121212;

  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--color-accent-dark);

  --navbar-bg: #1f1f1f;
  --navbar-icon: var(--bs-link-color);
  --navbar-hover-icon: #ffffff;
  --navbar-tooltip-bg: #2c2c2c;
  --navbar-tooltip-text: var(--bs-primary);
  --navbar-bubble: var(--color-amber);
}

/* =====================================================
   GLOBAL BODY
===================================================== */

body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background 0.3s ease, color 0.3s ease;
}

/* =====================================================
   BOOTSTRAP BUTTON SYSTEM
===================================================== */

.btn {
  border-radius: var(--btn-radius);
  transition: all 0.2s ease;
  font-weight: 500;
}

/* ---------- PRIMARY ---------- */

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

.btn-primary:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

body.dark-mode .btn-primary {
  color: #121212;
}

/* ---------- SECONDARY ---------- */

.btn-secondary {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: #fff;
}

/* ---------- WARNING ---------- */

.btn-warning {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: #212529;
}

/* ---------- INFO ---------- */

.btn-info {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: #212529;
}

/* ---------- SUCCESS ---------- */

.btn-success {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
  color: #fff;
}

/* ---------- LIGHT ---------- */

.btn-light {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
  color: var(--bs-dark);
}

body.dark-mode .btn-light {
  background-color: #2c2c2c;
  border-color: #2c2c2c;
  color: #f0f0f0;
}

/* ---------- DARK ---------- */

.btn-dark {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  color: var(--bs-light);
}

/* =====================================================
   OUTLINE BUTTONS
===================================================== */

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  color: #fff;
}

body.dark-mode .btn-outline-primary:hover {
  color: #121212;
}

/* You can repeat this pattern for other outlines if needed */

/* =====================================================
   UTILITY OVERRIDES
===================================================== */

.bg-primary       { background-color: var(--bs-primary) !important; }
.bg-secondary     { background-color: var(--bs-secondary) !important; }
.bg-success       { background-color: var(--bs-success) !important; }
.bg-info          { background-color: var(--bs-info) !important; }
.bg-warning       { background-color: var(--bs-warning) !important; }
.bg-danger        { background-color: var(--bs-danger) !important; }
.bg-light         { background-color: var(--bs-light) !important; }
.bg-dark          { background-color: var(--bs-dark) !important; }

.text-primary     { color: var(--bs-primary) !important; }
.text-secondary   { color: var(--bs-secondary) !important; }
.text-success     { color: var(--bs-success) !important; }
.text-info        { color: var(--bs-info) !important; }
.text-warning     { color: var(--bs-warning) !important; }
.text-danger      { color: var(--bs-danger) !important; }
.text-light       { color: var(--bs-light) !important; }
.text-dark        { color: var(--bs-dark) !important; }

/* =====================================================
   NAVBAR
===================================================== */