:root {
  --cs-primary: #0f172a;       /* Deep Charcoal Navy */
  --cs-secondary: #1e1b4b;     /* Deep Indigo */
  --cs-accent: #0ea5e9;        /* Vibrant Cyan/Teal */
  --cs-accent-dark: #0284c7;   /* Hover Accent State */
  --cs-accent-hover: #0284c7;  /* Alias for hover state */
  --cs-bg-light: #f8fafc;
  --cs-card-border: #e2e8f0;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--cs-bg-light);
  color: #334155;
  margin: 0;
}

/* Bootstrap Theme Overrides */
.bg-dark {
  background-color: var(--cs-primary) !important;
}

.bg-campuserve-hero {
  background: linear-gradient(135deg, var(--cs-primary) 0%, var(--cs-secondary) 100%);
  color: #ffffff;
  border-bottom: 4px solid var(--cs-accent);
}

/* Accent Buttons */
.btn-cs-accent {
  background-color: var(--cs-accent);
  color: #ffffff;
  font-weight: 600;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-cs-accent:hover {
  background-color: var(--cs-accent-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Core Card Tokens */
.card-cs {
  background: #ffffff;
  border: 1px solid var(--cs-card-border);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-cs:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Auth Cards */
.auth-card {
  max-width: 450px;
  margin: 2rem auto;
  border-radius: 0.5rem;
}

/* Skeletal Animations */
.spinner-skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% { background-color: #e2e8f0; }
  100% { background-color: #cbd5e1; }
}