/* --------------------------------------------------
   Modern Grand Theme — Bootstrap 3 Friendly
   -------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* Root Variables */
:root {
  --gold: #f5d76e;
  --gold-soft: rgba(245, 215, 110, 0.25);
  --silver: #d8dee9;
  --bronze: #c08a5c;

  --text-primary: #1f2937;
  --text-secondary: #4b5563;

  --bg-main: #f7f9fc;
  --bg-card: rgba(255, 255, 255, 0.75);

  --border-soft: rgba(245, 215, 110, 0.35);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.08);

  --transition: 0.25s ease;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg-main: #0f1115;
  --bg-card: rgba(255, 255, 255, 0.06);

  --text-primary: #f3f4f6;
  --text-secondary: #d1d5db;

  --border-soft: rgba(245, 215, 110, 0.25);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Global */
body {
  background: var(--bg-main);
  font-family: 'Playfair Display', serif;
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
}

/* Force Bootstrap text utilities to respect dark mode */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-primary,
[data-theme="dark"] .text-default,
[data-theme="dark"] .text-info,
[data-theme="dark"] .text-warning,
[data-theme="dark"] .text-danger,
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li {
  color: var(--text-primary) !important;
}

/* Navbar (Bootstrap 3 compatible) */
.navbar {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

[data-theme="dark"] .navbar {
  background: rgba(20, 20, 20, 0.6);
}

/* Navbar Brand */
.navbar-brand {
  font-family: Cinzel, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--gold) !important;
}

/* Nav Links */
.navbar-nav > li > a {
  color: var(--text-primary) !important;
  font-weight: 600;
  transition: var(--transition);
}

.navbar-nav > li > a:hover {
  color: var(--gold) !important;
  transform: translateY(-2px);
}

/* Cards / Panels */
.card,
.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.card:hover,
.panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(245, 215, 110, 0.25);
}

/* Panel headings */
.panel-heading {
  background: transparent !important;
  border-bottom: 1px solid var(--border-soft) !important;
  color: var(--text-primary) !important;
}

/* Headings */
h1, h2, h3 {
  font-family: Cinzel, serif;
  color: var(--text-primary);
  transition: var(--transition);
}

h1:hover, h2:hover, h3:hover {
  color: var(--gold);
}

/* Buttons */
.btn {
  border-radius: 10px;
  padding: 0.6rem 1.3rem;
  font-weight: 600;
  transition: var(--transition);
}

.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--bronze));
  border: none;
  color: #000;
}

.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Form Controls */
.form-control {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  transition: var(--transition);
}

[data-theme="dark"] .form-control {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.form-control:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

/* Badges */
.badge {
  background: linear-gradient(135deg, var(--gold), var(--silver));
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

/* Footer */
footer {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-soft);
  padding: 1.5rem;
  text-align: center;
  color: var(--text-secondary);
}

[data-theme="dark"] footer {
  background: rgba(20, 20, 20, 0.5);
}