/* =========================================================================
   DESIGN TOKENS — Dr. Shaoun site (teal + navy, after the drsamiulhasan.com reference)
   Change values here to re-skin. Components read only these names.
   Names kept from the first version: --brand = navy (dark bands, buttons, names), --accent = teal (nav bar,
   titles, icon circles), --accent-deep = darker teal for small text / small UI.
   ========================================================================= */
:root {
  /* Brand */
  --brand: #282262;        /* navy: buttons, facts bar, schedule band, doctor name */
  --brand-deep: #1a1548;   /* footer, hover */
  --brand-soft: #dbeef0;   /* pale teal: hero and tinted sections */
  --brand-line: #bfdfe5;   /* hairlines on tinted ground */
  --accent: #0098b7;       /* teal: nav bar, section titles, icon circles (white text on it is large/bold only) */
  --accent-deep: #00758d;  /* teal as small TEXT / small UI, 5.3:1 on white */
  --accent-soft: #e3f4f7;  /* teal tint */
  --sun: #f6b33d;          /* small warm highlight: today marker */
  --alert: #c4362b;        /* emergency box only */
  --alert-soft: #fff3f1;
  --wa: #128c4a;           /* WhatsApp action, 4.6:1 with white text */
  --grad: var(--brand);    /* legacy name: solid navy (the reference uses flat colour, no gradients) */

  /* Neutrals */
  --paper: #ffffff;        /* page background */
  --white: #ffffff;
  --line: #d7e3e6;         /* hairlines on white */
  --line-strong: #b3c6cb;
  --ink: #1e2430;          /* body text */
  --muted: #566270;        /* secondary text, 6:1 on white */

  /* Shape + elevation */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --btn-r: 4px;            /* squared buttons on desktop; pills on phones (mobile.css) */
  --shadow: 0 10px 30px rgba(40, 34, 98, .14);
  --shadow-sm: 0 4px 14px rgba(40, 34, 98, .09);

  /* Layout */
  --max: 1160px;
  --gutter: clamp(18px, 4vw, 40px);
  --header-h: 56px;        /* the sticky teal nav bar on desktop */
  --tabbar-h: 62px;

  /* Type scale (fluid) */
  --fs-hero: clamp(2.3rem, 1.3rem + 4vw, 4rem);
  --fs-h2: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.1rem, 1.02rem + .4vw, 1.3rem);
  --fs-body: 1.0625rem;
}

/* ---- Fonts -------------------------------------------------------------
   English: Montserrat (headings) + Open Sans (body), as on the reference.
   Bangla: Hind Siliguri for headings and body; the digits-only Noto Sans Bengali subset comes first so phone
   numbers read well (Hind Siliguri's "১" is a tiny hook). <html lang> is set server-side per URL.
*/
html[lang="bn"] body { font-family: "Noto Sans Bengali", "Hind Siliguri", "Open Sans", sans-serif; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3,
html[lang="bn"] .display { font-family: "Hind Siliguri", "Montserrat", sans-serif; font-weight: 600; }
html[lang="en"] body { font-family: "Open Sans", "Hind Siliguri", sans-serif; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] .display { font-family: "Montserrat", "Hind Siliguri", sans-serif; font-weight: 600; }

/*
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
*/