/* =========================================================================
DESIGN TOKENS — Medical Portfolio Design System
Change values here to re-skin an entire site built on this system.
Do not rename variables (components.css depends on these names) —
only change the values.
========================================================================= */
:root {
/* ---- Brand colors (medical palette: white / blue / green) ----
Swap these 5 colors to rebrand for a different doctor/clinic. */
--navy: #12346b; /* primary: headings, nav, primary buttons */
--navy-dark: #0b2247; /* hover state for navy, footer background */
--blue: #2f6fed; /* secondary accent (gradients, blobs) */
--teal: #2e9e7b; /* accent: icons, badges, links, CTAs */
--teal-light: #e3f6ef; /* accent background (badges, icon circles) */
--facebook: #1877f2; /* official Facebook blue — social icons/links only */
--facebook-light: #e7f0fe; /* facebook accent background/hover tint */
/* ---- Neutrals ---- */
--mint: #eaf7f1; /* page background gradient stop */
--sky: #eaf2fb; /* page background gradient stop */
--slate: #4a5568; /* body text */
--slate-light: #7c8aa0; /* secondary/muted text */
--white: #ffffff;
/* ---- Shape & elevation ---- */
--card-radius: 18px;
--shadow-soft: 0 10px 30px rgba(18, 52, 107, 0.08);
--shadow-hover: 0 16px 40px rgba(18, 52, 107, 0.14);
/* ---- Layout ---- */
--max-width: 1180px;
}
/* ---- Fonts ----
Pattern: formal serif for Bangla headings, humanist sans for Bangla body,
geometric sans for English headings, neutral sans for English body.
Swap the font-family names below (and the Google Fonts in your
HTML ) to change typography site-wide.
Usage: put class "lang-bn" or "lang-en" on and toggle it with JS
(see js/i18n.js) — or just pick one language and delete the other block
if you're building a monolingual site.
*/
body.lang-bn { font-family: "Hind Siliguri", "Inter", sans-serif; }
body.lang-bn h1, body.lang-bn h2, body.lang-bn h3, body.lang-bn .brand-name,
body.lang-bn .nav-link, body.lang-bn .btn {
font-family: "Noto Serif Bengali", "Hind Siliguri", serif;
}
body.lang-en { font-family: "Inter", sans-serif; }
body.lang-en h1, body.lang-en h2, body.lang-en h3, body.lang-en .brand-name {
font-family: "Poppins", "Inter", sans-serif;
}
/*
Google Fonts to include in when using the bn/en pair above:
*/