:root {
  --saffron: #E37222;
  --saffron-soft: #F4A865;
  --maroon: #8B1538;
  --maroon-deep: #5E0E25;
  --gold: #D4AF37;
  --gold-soft: #E8CF7A;
  --ivory: #FFF8E7;
  --ivory-deep: #F5EBC9;
  --charcoal: #2A1F1A;
  --charcoal-soft: #5A4A3F;
  --stone: #E8DFCF;
  --leaf: #6B7B3F;
  --success: #4A7C3A;
  --warning: #C77B2B;
  --danger: #B53224;

  --shadow-soft: 0 2px 10px rgba(91, 31, 14, 0.08);
  --shadow-card: 0 4px 18px rgba(91, 31, 14, 0.10);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-sans);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--maroon);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.gold-band {
  background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-soft));
  height: 6px;
}

.site-header {
  background: var(--maroon);
  color: var(--ivory);
  box-shadow: var(--shadow-soft);
}

.brand-name {
  color: var(--ivory);
  font-family: var(--font-serif);
  font-size: 2rem;
  margin: 0;
  letter-spacing: 0.04em;
}

.brand-tagline {
  color: var(--gold-soft);
  font-style: italic;
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.brand-mark {
  width: 48px;
  height: 48px;
  color: var(--gold);
}

.side-nav {
  background: var(--ivory-deep);
  border-right: 1px solid var(--stone);
}

.side-nav a {
  color: var(--charcoal);
  border-left: 3px solid transparent;
}

.side-nav a:hover {
  background: rgba(212, 175, 55, 0.18);
  color: var(--maroon);
}

.side-nav a.active {
  background: var(--ivory);
  border-left-color: var(--saffron);
  color: var(--maroon);
  font-weight: 600;
}

.nav-icon {
  color: var(--gold);
  font-weight: bold;
}

.card {
  background: #ffffff;
  border: 1px solid var(--stone);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.card-accent {
  border-top: 3px solid var(--gold);
}

.btn-primary {
  background: var(--maroon);
  color: var(--ivory);
  border: none;
}

.btn-primary:hover { background: var(--maroon-deep); }

.btn-secondary {
  background: var(--ivory-deep);
  color: var(--maroon);
  border: 1px solid var(--gold);
}

.btn-secondary:hover { background: var(--gold-soft); }

.btn-ghost {
  background: transparent;
  color: var(--maroon);
  border: 1px solid transparent;
}

.btn-ghost:hover { background: rgba(212, 175, 55, 0.18); }

.btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger);
}

.btn-danger:hover { background: var(--danger); color: #ffffff; }

.tag {
  background: var(--ivory-deep);
  border: 1px solid var(--gold);
  color: var(--maroon);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
}

.tag.success { background: rgba(74, 124, 58, 0.12); color: var(--success); border-color: var(--success); }
.tag.warning { background: rgba(199, 123, 43, 0.12); color: var(--warning); border-color: var(--warning); }
.tag.danger  { background: rgba(181, 50, 36, 0.10); color: var(--danger);  border-color: var(--danger); }
.tag.neutral { background: var(--ivory-deep); color: var(--charcoal-soft); border-color: var(--stone); }

.divider-motif {
  display: block;
  text-align: center;
  color: var(--gold);
  letter-spacing: 1em;
  margin: 1.5rem 0;
}