@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Bengali:wght@400;500;600;700&display=swap");

:root {
  --primary: #0f6e5e;
  --primary-hover: #0c5a4d;
  --primary-subtle: #e5f3f0;
  --secondary: #e88c2a;
  --secondary-hover: #c9741b;
  --secondary-subtle: #fceedd;
  --accent: #4a47c4;
  --accent-subtle: #ebeafa;
  --success: #1e8e5a;
  --success-subtle: #e4f5ec;
  --warning: #c98a00;
  --warning-subtle: #fbf0da;
  --error: #d6483e;
  --error-subtle: #fbe7e5;
  --info: #2e7dd1;
  --info-subtle: #e7f1fc;
  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-2: #fbfbfa;
  --border: #e2e5e3;
  --border-strong: #cbd1cd;
  --text-heading: #14201c;
  --text-body: #3b443f;
  --text-muted: #6e766f;
  --text-disabled: #a8ada8;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 32, 28, 0.06), 0 1px 1px rgba(20, 32, 28, 0.04);
  --shadow-md: 0 4px 10px rgba(20, 32, 28, 0.08), 0 2px 4px rgba(20, 32, 28, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 32, 28, 0.14), 0 4px 8px rgba(20, 32, 28, 0.06);
  --font-en: "Inter", system-ui, sans-serif;
  --font-bn: "Noto Sans Bengali", "Inter", system-ui, sans-serif;

  /* Footer stays this dark shade in both light and dark site modes — it's
     never redefined under html.dark, so it doesn't inherit the flip that
     --text-heading gets (which would otherwise turn the footer near-white
     with light-on-light text once dark mode is on). */
  --footer-bg: #14201c;
  --footer-bg-2: #1a2621;
  --footer-border: #2a332e;
  --footer-heading: #ffffff;
  --footer-text: #c9cfc9;
  --footer-text-muted: #8c948e;
}

html.dark {
  --bg: #0e1412;
  --surface: #161e1b;
  --surface-2: #131a17;
  --border: #2a322e;
  --border-strong: #3a433d;
  --text-heading: #f3f5f3;
  --text-body: #c9cfc9;
  --text-muted: #8c948e;
  --text-disabled: #565d58;
  --primary: #28a187;
  --primary-hover: #37b899;
  --primary-subtle: #12291f;
  --secondary: #f0a452;
  --secondary-hover: #f5b975;
  --secondary-subtle: #2e2211;
  --accent: #7a77e0;
  --accent-subtle: #211f3a;
  --success: #3bb980;
  --success-subtle: #12291f;
  --warning: #e0ac33;
  --warning-subtle: #2e2510;
  --error: #e8746b;
  --error-subtle: #301613;
  --info: #5c9ee5;
  --info-subtle: #101f30;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
}