body {
  background: var(--color-background);
  color: var(--color-text);
  font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
}

a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary-hover);
}

.navbar {
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-focus-shadow-rgb: 185, 131, 255;
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-focus-shadow-rgb: 185, 131, 255;
  --bs-btn-hover-color: #14101b;
}

.badge-soft {
  background: var(--color-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.card {
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 18px 30px -28px rgba(6, 4, 10, 0.7);
}

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover,
.card-hover:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -24px rgba(6, 4, 10, 0.75);
}

.section-title {
  font-weight: 700;
  letter-spacing: 0.3px;
}

.text-muted-soft {
  color: var(--color-muted) !important;
}

.surface {
  background: var(--color-surface);
}

.hero {
  background: radial-gradient(circle at top left, #2a2237 0%, #1a1622 52%, #15111c 100%);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 2.5rem;
  box-shadow: 0 30px 60px -45px rgba(6, 4, 10, 0.8);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
  border-radius: 12px;
  height: 120px;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.footer {
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}

.focus-ring:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.content-body {
  font-size: 1.05rem;
  line-height: 1.7;
}

.surface pre,
pre {
  color: var(--color-text);
  background: transparent;
  white-space: pre-wrap;
}

.form-control,
.form-select {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-control::placeholder {
  color: var(--color-muted);
}

.alert-soft {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.text-accent {
  color: var(--color-primary);
}

.content-body h1,
.content-body h2,
.content-body h3 {
  margin-top: 1.6rem;
}

@media (max-width: 576px) {
  .hero {
    padding: 1.8rem;
  }
}