/* EduPath — Design Tokens (approved MVP palette) */
:root{
  /* ===== Brand teal ramp ===== */
  --ep-teal-50:#e6f2f1; --ep-teal-100:#cfe6e3; --ep-teal-200:#a6d6d0; --ep-teal-300:#6ec0b8;
  --ep-teal-400:#2f9f95; --ep-teal-500:#0d7d74; --ep-teal-600:#0a5f58; --ep-teal-700:#0a4a45;
  --ep-teal-800:#0c3a37; --ep-teal-900:#0c2229;
  /* ===== Cool neutral ramp ===== */
  --ep-neutral-0:#ffffff; --ep-neutral-25:#f7faf9; --ep-neutral-50:#eef2f3; --ep-neutral-100:#e3eaec;
  --ep-neutral-200:#d3dcde; --ep-neutral-300:#b9c6c9; --ep-neutral-400:#9fb3b2; --ep-neutral-500:#7c9095;
  --ep-neutral-600:#566a74; --ep-neutral-700:#3c525b; --ep-neutral-800:#16303a; --ep-neutral-900:#0c2229;
  /* amber (worth-a-look) kept as warm accent */
  --ep-orange-100:#fbf2df; --ep-orange-500:#c2860f;
  --ep-navy-100:#d3dcde;
  /* ===== Semantic roles ===== */
  --ep-primary:#16303a;            /* Ink / dark surfaces, headings, text */
  --ep-dark:#0c2229;               /* Deepest brand surface */
  --ep-brand:#0d7d74;              /* Teal — primary brand */
  --ep-brand-dark:#0a5f58;
  --ep-brand-text:#0a5f58;         /* teal text/links on light (AA) */
  --ep-secondary:#cfe6e3;          /* soft teal — secondary buttons */
  --ep-secondary-text:#8a5d0a;
  --ep-accent:#0d7d74;
  --ep-bg:#eef2f3; --ep-cream:#eef2f3;
  --ep-surface:#ffffff; --ep-surface-subtle:#f7faf9;
  --ep-text:#16303a; --ep-text-muted:#566a74;
  --ep-border:#e3eaec;
  /* ===== Feedback ===== */
  --ep-success:#1f9d6b; --ep-success-text:#177a52; --ep-success-bg:#e7f6ef;
  --ep-info:#2f7dbd;    --ep-info-text:#286ea6;    --ep-info-bg:#e8f1fa;
  --ep-warning:#c2860f; --ep-warning-text:#8a5d0a; --ep-warning-bg:#fbf2df;
  --ep-error:#c0503f;   --ep-error-text:#a8412f;   --ep-error-bg:#fbe9e6;
  /* ===== Spacing (4px) ===== */
  --ep-space-1:4px; --ep-space-2:8px; --ep-space-3:12px; --ep-space-4:16px; --ep-space-5:20px;
  --ep-space-6:24px; --ep-space-8:32px; --ep-space-10:40px; --ep-space-12:48px; --ep-space-16:64px;
  /* ===== Radius ===== */
  --ep-radius-sm:6px; --ep-radius-md:10px; --ep-radius-lg:16px; --ep-radius-xl:24px; --ep-radius-pill:999px;
  /* ===== Shadows / elevation ===== */
  --ep-shadow-xs:0 1px 2px rgba(12,34,41,.06); --ep-shadow-sm:0 2px 8px rgba(12,34,41,.08);
  --ep-shadow-md:0 6px 20px rgba(12,34,41,.10); --ep-shadow-lg:0 16px 40px rgba(12,34,41,.14);
  --ep-focus-ring:0 0 0 3px rgba(13,125,116,.35);
  /* ===== Typography ===== */
  --ep-font-display:'Poppins',-apple-system,'Segoe UI',sans-serif;
  --ep-font-body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --ep-font-ar-display:'Tajawal',sans-serif;
  --ep-font-ar-body:'IBM Plex Sans Arabic',sans-serif;
  /* ===== Icon / stroke / motion ===== */
  --ep-icon-sm:16px; --ep-icon-md:20px; --ep-icon-lg:24px; --ep-icon-xl:32px;
  --ep-stroke-icon:1.75px; --ep-border-width:1px; --ep-focus-width:3px;
  --ep-dur-fast:120ms; --ep-dur-base:200ms; --ep-dur-slow:320ms;
  --ep-ease-standard:cubic-bezier(.2,.8,.2,1);
}