@import url('fonts.css');   /* vendored offline fonts (Inter + Noto Serif Bengali) */

/* ============================================================
   SMU Student Portal — Design Tokens
   Brand: "Modern Health" (emerald + navy) · light + dark
   The ONLY place raw colors live. Everything else uses var(--x).
   ============================================================ */
:root {
  /* color — light */
  --bg:#F4F7F6; --surface:#FFFFFF; --surface-2:#EEF2F1; --surface-3:#E6ECEA;
  --border:#E2E8E6; --border-strong:#CBD5D1;
  --text:#0F1B2D; --text-muted:#5B6470; --text-subtle:#8A94A0;
  --primary:#0E8F6E; --primary-hover:#0C7D60; --on-primary:#FFFFFF;
  --navy:#0C3A5B; --accent:#14B8A6;
  --success:#16A34A; --success-bg:#E7F6EE;
  --warning:#B45309; --warning-bg:#FBEFD9;
  --danger:#DC2626;  --danger-bg:#FBE7E7;
  --info:#2563EB;    --info-bg:#E6EEFC;
  --ring:rgba(14,143,110,.35);

  /* type */
  --font-en:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --font-bn:'Noto Serif Bengali',Georgia,serif;

  /* radius / spacing / shadow */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s8:3rem;
  --shadow-sm:0 1px 2px rgba(16,32,40,.06);
  --shadow:0 4px 16px rgba(16,32,40,.10);
  --shadow-lg:0 12px 32px rgba(16,32,40,.16);

  /* layout */
  --tbar-h:56px; --side-w:248px; --maxw:1200px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:#0E1714; --surface:#17221E; --surface-2:#1E2B26; --surface-3:#243530;
  --border:#27332E; --border-strong:#33433C;
  --text:#E7EEEB; --text-muted:#9CABA4; --text-subtle:#6C7B74;
  --primary:#21C29E; --primary-hover:#2DD4BF; --on-primary:#06251D;
  --navy:#5BA3D0; --accent:#2DD4BF;
  --success:#34C759; --success-bg:rgba(52,199,89,.14);
  --warning:#F59E0B; --warning-bg:rgba(245,158,11,.14);
  --danger:#F87171;  --danger-bg:rgba(248,113,113,.14);
  --info:#5BA3D0;    --info-bg:rgba(91,163,208,.14);
  --ring:rgba(33,194,158,.40);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow:0 6px 20px rgba(0,0,0,.40);
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);

  color-scheme: dark;
}

/* LIGHT is the default theme for everyone, regardless of OS preference.
   Dark applies ONLY when the user explicitly toggles it (data-theme="dark",
   persisted by app.js). We intentionally do NOT auto-switch on
   prefers-color-scheme, so the client always opens in light mode. */