:root {
  /* Brand palette */
  --brand-dark: #003f5c;
  --brand-mid: #374c80;
  --brand-purple: #7a5195;
  --brand-magenta: #bc5090;
  --brand-pink: #ef5675;
  --brand-orange: #ff764a;
  --brand-yellow: #ffa600;

  /* Global theme tokens */
  --page-bg: #f8fafc;
  --page-text: #334155;

  --header-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --header-text: #ffffff;

  --accent: #667eea;      /* primary accent */
  --accent-2: #764ba2;    /* secondary accent */

  --surface: #ffffff;
  --surface-border: #e2e8f0;

  --menu-hover-bg: rgba(102, 126, 234, 0.25);
}

html, body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--page-text);
  background: var(--page-bg); /* added */
}

/* Drop-in header theming */
.themed-header {
  background: var(--header-bg);
  color: var(--header-text);
}

/* Gentle normalization on common elements used in pages */
.section-title {
  border-left-color: var(--accent) !important;
}
.section-icon {
  background: var(--accent) !important;
}

/* Optional helper for primary buttons (use if needed) */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  cursor: pointer;
}
.btn-primary:hover {
  background: var(--accent-2);
}

.nav-btn-active {
    background-color: #aec0da;
    color: #FFFFFF;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}