/* ================================
   Al-baraka Academy — Design Tokens
   Brand: BLUE + WHITE · light mode only
   ================================ */

:root{
  /* -- brand core (blue) -- */
  --blue-900:#0B2E5B;   /* sidebar / deepest brand */
  --blue-800:#123F77;   /* sidebar hover, dark accents */
  --blue-700:#17508F;   /* primary button hover */
  --blue-600:#1E63B0;   /* primary brand / buttons / active nav */
  --blue-500:#2F7BD1;   /* links, focus, lighter accent */
  --blue-300:#9CC2EA;   /* borders on blue surfaces */
  --blue-100:#E3EEFA;   /* tinted fills, selected backgrounds */
  --blue-050:#F2F7FD;   /* subtle panel tint */

  /* aliases used across the app */
  --primary-900:var(--blue-900);
  --primary-800:var(--blue-800);
  --primary-700:var(--blue-700);
  --primary-600:var(--blue-600);
  --primary-500:var(--blue-500);
  --primary-100:var(--blue-100);
  --primary-050:var(--blue-050);
  --accent:var(--blue-500);

  /* -- light theme surfaces (white + very light blue-gray) -- */
  --bg:#F4F7FB;
  --surface:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--blue-050);
  --line:#E3E9F1;
  --line-strong:#C9D6E5;
  --ink:#131A24;
  --ink-soft:#414C5C;
  --ink-faint:#6E7A8A;

  /* text on blue surfaces */
  --on-primary:#FFFFFF;
  --on-primary-soft:#DCE9F8;
  --on-primary-faint:#A9C4E4;

  /* -- functional status colors (never brand colors) -- */
  --ok-bg:#E7F6EC;   --ok-text:#1C7A45;   --ok-line:#BEE3C8;   --ok-solid:#1E9E5A;
  --warn-bg:#FEF3E2; --warn-text:#95590F; --warn-line:#F6D9AE; --warn-solid:#E08A16;
  --bad-bg:#FDECEA;  --bad-text:#B42318;  --bad-line:#F5C6C0;  --bad-solid:#D9382B;
  --info-bg:#E7F0FB; --info-text:#1B5FA8; --info-line:#C3DAF5; --info-solid:var(--blue-600);

  /* -- type -- */
  --font-serif:'Lora',Georgia,'Noto Serif Ethiopic',serif;
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-am:'Noto Sans Ethiopic','Inter',sans-serif;

  /* -- radius / spacing rhythm -- */
  --r-sm:4px;
  --r-md:6px;
  --r-lg:10px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;

  --sidebar-w:242px;
  --topbar-h:64px;

  --shadow-sm:0 1px 2px rgba(19,42,74,.06);
  --shadow-pop:0 8px 24px rgba(11,46,91,.14);
  --focus-ring:0 0 0 3px rgba(47,123,209,.32);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}