:root {
  /* Brand color tokens - Light Mode (Nordic Minimalist) */
  --wp-brand-primary: #1E293B; /* Charcoal Slate */
  --wp-brand-primary-hover: #0F172A;
  --wp-brand-primary-rgb: 30, 41, 59;
  
  --wp-brand-accent: #4F6D6A;  /* Muted Sage Green */
  --wp-brand-accent-hover: #3D5451;
  --wp-brand-accent-rgb: 79, 109, 106;

  --wp-bg: #F8FAFC;            /* Ice White / Slate 50 */
  --wp-card-bg: #FFFFFF;
  --wp-text-primary: #0F172A;
  --wp-text-muted: #64748B;
  --wp-border: #E2E8F0;

  --wp-card-radius: 12px;
  --wp-btn-radius: 8px;

  /* Button Text Contrast Colors */
  --wp-btn-primary-text: #FFFFFF;
  --wp-btn-accent-text: #FFFFFF;
}

[data-bs-theme="dark"] {
  /* Brand color tokens - Dark Mode */
  --wp-brand-primary: #F1F5F9; /* Off-White / Silver */
  --wp-brand-primary-hover: #FFFFFF;
  --wp-brand-primary-rgb: 241, 245, 249;

  --wp-brand-accent: #8FAFA9;  /* Soft Sage */
  --wp-brand-accent-hover: #A4C4BE;
  --wp-brand-accent-rgb: 143, 175, 169;

  --wp-bg: #0F172A;            /* Midnight Slate */
  --wp-card-bg: #1E293B;       /* Charcoal Card */
  --wp-text-primary: #F8FAFC;
  --wp-text-muted: #94A3B8;
  --wp-border: #334155;

  /* Button Text Contrast Colors */
  --wp-btn-primary-text: #0F172A;
  --wp-btn-accent-text: #0F172A;
}

/* Global Styles */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--wp-bg) !important;
  color: var(--wp-text-primary) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography */
h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  color: var(--wp-brand-primary) !important;
}

.text-muted, .small.text-muted, small.text-muted {
  color: var(--wp-text-muted) !important;
}

/* Container limits */
.wp-container {
  max-width: 1100px;
}

/* Navbar overrides */
.navbar {
  background-color: var(--wp-card-bg) !important;
  border-bottom: 1px solid var(--wp-border) !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.navbar-brand {
  font-size: 1.45rem !important;
  letter-spacing: -0.02em;
}

.navbar .nav-link {
  color: var(--wp-text-primary) !important;
  font-weight: 500;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.navbar .nav-link:hover, .navbar .nav-link.active {
  opacity: 1;
  color: var(--wp-brand-primary) !important;
}

/* Bootstrap Cards Overrides */
.card {
  background-color: var(--wp-card-bg) !important;
  border: 1px solid var(--wp-border) !important;
  border-radius: var(--wp-card-radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.06) !important;
  border-color: var(--wp-brand-primary) !important;
}

[data-bs-theme="dark"] .card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  border-color: var(--wp-brand-primary) !important;
}

/* List Groups Overrides */
.list-group-item {
  background-color: var(--wp-card-bg) !important;
  border: 1px solid var(--wp-border) !important;
  color: var(--wp-text-primary) !important;
  border-radius: 10px !important;
  margin-bottom: 0.5rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.list-group-item:last-child {
  margin-bottom: 0 !important;
}

.list-group-item-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  border-color: var(--wp-brand-primary) !important;
  background-color: var(--wp-card-bg) !important;
}

/* Inputs & Form Controls */
.form-control, .form-select {
  background-color: var(--wp-card-bg) !important;
  border: 1px solid var(--wp-border) !important;
  color: var(--wp-text-primary) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.form-control::placeholder {
  color: var(--wp-text-muted) !important;
  opacity: 0.7;
}

.form-control:focus, .form-select:focus {
  background-color: var(--wp-card-bg) !important;
  color: var(--wp-text-primary) !important;
  border-color: var(--wp-brand-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--wp-brand-accent-rgb), 0.18) !important;
}

/* Buttons Overrides */
.btn {
  font-weight: 500 !important;
  border-radius: var(--wp-btn-radius) !important;
  padding: 0.45rem 1rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary {
  background-color: var(--wp-brand-primary) !important;
  border-color: var(--wp-brand-primary) !important;
  color: var(--wp-btn-primary-text) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--wp-brand-primary-hover) !important;
  border-color: var(--wp-brand-primary-hover) !important;
  color: var(--wp-btn-primary-text) !important;
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--wp-brand-primary) !important;
  border-color: var(--wp-brand-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
  background-color: var(--wp-brand-primary) !important;
  color: var(--wp-btn-primary-text) !important;
  border-color: var(--wp-brand-primary) !important;
}

.btn-success {
  background-color: var(--wp-brand-accent) !important;
  border-color: var(--wp-brand-accent) !important;
  color: var(--wp-btn-accent-text) !important;
}

.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--wp-brand-accent-hover) !important;
  border-color: var(--wp-brand-accent-hover) !important;
  color: var(--wp-btn-accent-text) !important;
  transform: translateY(-1px);
}

.btn-outline-secondary {
  color: var(--wp-text-muted) !important;
  border-color: var(--wp-border) !important;
  background-color: transparent !important;
}

.btn-outline-secondary:hover {
  background-color: var(--wp-border) !important;
  color: var(--wp-text-primary) !important;
  border-color: var(--wp-border) !important;
}

/* Custom Brand Components */
.brand-hero {
  background: linear-gradient(135deg, rgba(var(--wp-brand-primary-rgb), 0.08) 0%, rgba(var(--wp-brand-accent-rgb), 0.04) 100%);
  border: 1px solid var(--wp-border);
  border-radius: 16px;
  padding: 2.5rem;
  margin-bottom: 2.5rem;
}

.brand-badge {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 50rem;
  background-color: var(--wp-brand-accent) !important;
}