:root {
  /* ── Brand palette ─────────────────────────────── */
  --edu-blue-50:  #EFF6FF;
  --edu-blue-100: #DBEAFE;
  --edu-blue-200: #BFDBFE;
  --edu-blue-300: #93C5FD;
  --edu-blue-400: #60A5FA;
  --edu-blue-500: #3B82F6; /* primary */
  --edu-blue-600: #2563EB; /* hover */
  --edu-blue-700: #1D4ED8; /* active */
  --edu-blue-800: #1E40AF;
  --edu-blue-900: #1E3A8A; /* logo deep */

  /* Neutrals (cool gray) */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --white: #FFFFFF;

  /* Semantic status */
  --success: #10B981;
  --success-bg: #ECFDF5;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB;
  --error:   #EF4444;
  --error-bg: #FEF2F2;
  --info:    #3B82F6;
  --info-bg: #EFF6FF;

  /* ── Semantic aliases ──────────────────────────── */
  --color-primary: var(--edu-blue-500);
  --color-primary-hover: var(--edu-blue-600);
  --color-primary-active: var(--edu-blue-700);

  --bg-page: var(--gray-50);          /* #F9FAFB page background */
  --surface: var(--white);            /* cards, panels */
  --surface-muted: var(--gray-100);   /* tertiary backgrounds */

  --text-primary: var(--gray-900);    /* #111827 */
  --text-secondary: var(--gray-500);  /* #6B7280 metadata */
  --text-tertiary: var(--gray-400);   /* #9CA3AF placeholder */
  --text-on-primary: var(--white);
  --text-label: var(--gray-700);      /* #374151 form labels */

  --border: var(--gray-200);          /* #E5E7EB default border */
  --border-strong: var(--gray-300);
  --divider: var(--gray-100);         /* thread/list dividers */
}