/* tokens.css — DH Hospital - Cumilla design tokens
   Owner: design-system · v2.0 (2026-08-27)

   v2 brief from Billal: "more serious and professional with the color combination",
   and English type must read "clear and professional, semibold, tracking-tight".

   What changed from v1 and why:
   - v2.1 (2026-08-27): the real logo arrived, so every green is now DERIVED
     FROM THE BRAND MARK (#065f15, hue 130, sat .88) instead of guessed. The
     scale holds that hue and saturation and only moves lightness, which is why
     the family reads as one colour rather than seven neighbours.
   - The green family runs deep. A hospital reads as institutional when its
     darkest surface is genuinely dark, not mid-green.
   - Grounds are warm, not clinical: --bone for page tint, --cream for text on
     dark green. Pure white stays available for cards, so content still pops.
   - --gold added as a restrained accent, allowed ONLY on green-800 and darker.
     On white it measures 2.4:1 and is forbidden there.
   - --line-strong added: hairlines can be faint, but a control border (the
     search field) must clear 3:1 under WCAG 1.4.11.

   Every pair re-verified against the real brand green: 0 AA failures.
   NOTE: audit.py checks 18/21 are plain regex over the file text and do not
   skip comments — never write a sample property reference inside a comment.
*/

:root {
  /* ---------- brand greens (deep to light) ---------- */
  --green-950: #021a06;   /* utility strip, deepest ground · white 18.21:1 · cream 15.60:1 */
  --green-900: #03320b;   /* footer, mega panel, nav bar   · white 14.34:1 · cream 12.28:1 */
  --green-800: #054a10;   /* raised dark surfaces          · white 10.53:1 */
  --green-700: #065f15;   /* BRAND — taken from the logo   · white  7.91:1 */
  --green-600: #107d22;   /* INTERACTIVE: buttons, links   · on white 5.28:1 */
  --green-500: #239e38;   /* DECORATIVE ONLY — 3.49:1 on white: fine for icons and rules, never body text */
  --green-100: #ebf4ed;   /* cool section tint             · ink 15.34:1 */

  /* ---------- warm neutrals ---------- */
  --bone: #faf8f4;        /* warm page ground            · ink 16.25:1 */
  --cream: #f2ede2;       /* text/accents on dark green  · 12.65:1 on green-900 */
  --paper: #ffffff;       /* cards, elevated surfaces */

  /* ---------- accents ---------- */
  --gold: #c8a45c;        /* hairlines, small caps labels — ONLY on green-800 or darker */
  --gold-soft: #d9bd80;   /* gold as TEXT on green-900/950 · 8.12:1 / 10.10:1 */
  --accent-red: #b3271b;  /* emergency / ambulance ONLY · 6.52:1 both ways */
  --accent-red-on-dark: #ef7368; /* the same red, legible on green-950 · 6.41:1.
                             #b3271b scores only 2.82 there — never use it on dark. */

  /* ---------- ink ---------- */
  --ink: #141d18;         /* body text, green-biased near-black · 17.23:1 on white */
  --muted: #54615a;       /* secondary text · 6.49:1 on white, 6.12:1 on bone */
  --line: #e0e7e2;        /* decorative hairlines, card edges (non-text) */
  --line-strong: #7f8c85; /* CONTROL borders — search field, inputs · 3.50:1 on white */

  /* ---------- focus (accessibility-auditor §5) ---------- */
  --focus: #04180f;       /* on light surfaces · 18.38:1 on white */
  --focus-dark: #d9bd80;  /* on green surfaces · 8.12:1 on green-900 */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---------- typography ----------
     Latin glyphs resolve to Instrument Sans, Bengali glyphs fall through to
     Noto Sans Bengali. One stack, per-glyph fallback, no layout shift on the
     language toggle. */
  /* Body. Same reasoning as --font-display; these are matched to Noto
     Sans Bengali rather than the serif, which needs its own numbers. */
  --font-body: "Instrument Sans", "Noto Sans Bengali",
               "DH BN Body Nirmala", "DH BN Body Noto", "DH BN Body Rupali", "DH BN Body Kalpurush",
               "DH Latin Body Segoe", "DH Latin Body Arial", "DH Latin Body Roboto", system-ui, -apple-system, sans-serif;
  /* Bangla headings. font-display: swap paints a fallback first, so the
     fallback's width has to match or the heading visibly resizes — it was
     landing on the OS Bengali face at 1.26x and the hero was jumping 17px.
     The "DH BN Disp *" families are local() only: no download, so they are
     there in the swap window, each size-adjusted to Noto Serif Bengali by
     measurement. See tools/fetch_fonts.py and tests/foutreal.js. */
  /* .hero h1 measure — 26ch as it resolved in each edition, in em so a font
     swap cannot change it. See the note on .hero h1 in home.css. */
  --hero-measure: 14.534em;

  --font-display: "Noto Serif Bengali", "DH BN Disp Nirmala", "DH BN Disp Noto", "DH BN Disp Vrinda", "DH BN Disp Kalpurush",
                  "DH Latin Disp Segoe", "DH Latin Disp Arial", "DH Latin Disp Roboto", Georgia, serif;
  --font-ui: "Instrument Sans", "Noto Sans Bengali",
             "DH BN Body Nirmala", "DH BN Body Noto", "DH BN Body Rupali", "DH BN Body Kalpurush",
             "DH Latin Body Segoe", "DH Latin Body Arial", "DH Latin Body Roboto", system-ui, sans-serif;

  --fs-base: 17px;        /* Bangla needs the extra size on mobile */
  --lh-base: 1.7;         /* and the extra leading — conjuncts stack tall */
  --lh-tight: 1.3;

  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-md:   1rem;
  --fs-lg:   1.14rem;
  --fs-xl:   1.34rem;
  --fs-2xl:  1.68rem;
  --fs-3xl:  2.1rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  /* Tracking is applied ONLY to Latin headings (see base.css).
     Bangla must never be letter-spaced — it breaks conjunct perception. */
  --track-tight: -0.02em;
  --track-label: 0.08em;

  /* ---------- spacing (4px base) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

  /* ---------- shape ---------- */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius-btn: 4px;      /* primary buttons: squared off, not pill-shaped */
  --shadow: 0 1px 2px rgb(4 24 15 / .06), 0 4px 14px rgb(4 24 15 / .07);
  --shadow-lift: 0 6px 26px rgb(4 24 15 / .16);
  --shadow-panel: 0 18px 48px rgb(4 24 15 / .28);

  /* ---------- layout ---------- */
  --wrap: 1280px;
  --logo-col: 316px;      /* fixed width of the logo lockup, so the navbar
                             below can reserve exactly the same gutter and the
                             first menu item lands on the search field's edge */
  --wrap-narrow: 720px;
  --tap: 48px;
  --bottombar-h: 62px;

  /* header tiers */
  --h-utility: 36px;
  --h-main: 78px;
  --h-nav: 52px;

  /* ---------- z-index scale ---------- */
  --z-header: 100;
  --z-bottombar: 110;
  --z-menu: 120;
  --z-drawer: 125;
  --z-skip: 130;

  /* ---------- motion ---------- */
  --dur-press: 120ms;
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-reveal: 300ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

/* English pages get a sans display face with tight tracking.
   Bangla pages keep the serif — Billal signed that off unchanged. */
html[lang="en"] {
  --hero-measure: 17.732em;
  /* English headings. Instrument Sans is 8% wider than Segoe UI, so
     without a matched fallback the English hero painted narrow and then
     grew, pushing the page down 17px — the same fault as the Bangla side,
     in the other direction. */
  --font-display: "Instrument Sans", "DH Latin Disp Segoe", "DH Latin Disp Arial", "DH Latin Disp Roboto",
                  system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
  :root { --fs-base: 18px; --h-main: 86px; }
}

/* Motion tokens collapse for users who ask for less motion.
   Media-query wrapped, never JS-toggled (motion-interaction §3). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-reveal: 0ms; }
}