/* NeuroReach Africa design tokens, shared by every page (site, chat, admin).
   Palette and type follow neuroreachafrica.org: deep teal, warm gold, navy
   ink on cream, Sora for display and Manrope for text. */
:root {
  color-scheme: light;

  /* Brand */
  --teal: #156165;
  --teal-600: #1b767b;
  --teal-light: #00a3aa;
  --teal-soft: #e3f0ef;
  --gold: #dca744;
  --gold-soft: #f7e6c3;
  --navy: #09192a;
  --navy-2: #102a3f;
  --sand: #f7efe3;
  --cream: #fdfaf3;
  --on-dark: #fdfcf8;
  --on-dark-muted: rgba(253, 252, 248, 0.72);
  --line-dark: rgba(252, 252, 252, 0.12);

  /* Semantic */
  --bg: var(--cream);
  --surface: #ffffff;
  --surface-2: var(--sand);
  --text: var(--navy);
  --text-muted: #4e5966;
  --text-faint: #7a8490;
  --border: #e2dacc;
  --border-strong: #cfc4b1;
  --primary: var(--teal);
  --primary-hover: #0f4f52;
  --on-primary: var(--on-dark);
  --accent: var(--gold);
  --on-accent: var(--navy);
  --danger: #c0141f;
  --danger-soft: #fdecec;
  --success: #1d7a4f;
  --focus: var(--teal-light);

  --gradient-hero:
    radial-gradient(120% 90% at 85% 10%, rgba(21, 97, 101, 0.75) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, #0b2a35 100%);
  --gradient-soft: linear-gradient(180deg, var(--sand) 0%, var(--cream) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold) 0%, #e9c57f 100%);

  --shadow-card: 0 1px 2px rgba(9, 25, 42, 0.06), 0 12px 32px -14px rgba(9, 25, 42, 0.22);
  --shadow-lift: 0 2px 4px rgba(9, 25, 42, 0.06), 0 28px 50px -20px rgba(9, 25, 42, 0.35);
  --shadow-elegant: 0 24px 60px -24px rgba(9, 25, 42, 0.45);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --chart-fill: var(--teal);
  --chart-fill-hover: var(--teal-light);
  --chart-grid: rgba(9, 25, 42, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #07141f;
    --surface: #0d2130;
    --surface-2: #112a3b;
    --text: #f1eee6;
    --text-muted: #b3bcc4;
    --text-faint: #8693a0;
    --border: #1f3a4e;
    --border-strong: #2c4c63;
    --primary: #1f8a8f;
    --primary-hover: #26a0a6;
    --teal-soft: #0f3036;
    --gold-soft: #3a2f17;
    --danger: #ff6b6b;
    --danger-soft: #3a1518;
    --success: #4cc38a;
    --gradient-soft: linear-gradient(180deg, #0b1c29 0%, var(--bg) 100%);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -14px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 50px -20px rgba(0, 0, 0, 0.7);
    --chart-fill: var(--teal-light);
    --chart-fill-hover: var(--gold);
    --chart-grid: rgba(255, 255, 255, 0.08);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

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

img {
  max-width: 100%;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}