/* ============================================================================ Tonu Organic Food — App-wide Typography System ---------------------------------------------------------------------------- Bilingual (বাংলা + Latin). The site renders in Bangla (), so the body/UI font MUST carry Bengali glyphs — Open Sans did not, causing Bangla to fall back to inconsistent system fonts. • Body / UI : Hind Siliguri (Bangla + Latin, highly legible) • Display : Baloo Da 2 (friendly, strong headings — shop only) • Latin ext. : Inter (crisp numerals / Latin fallback) Loaded after style.css + ghorerbazar-overrides.css so these rules win. NOTE: In the shop, html font-size is 62.5% (1rem = 10px). The scale below is authored against that base and stays fluid via clamp(). ============================================================================ */ :root { /* ---- Font families ---------------------------------------------------- */ --gb-font-body: 'Hind Siliguri', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --gb-font-display: 'Baloo Da 2', 'Hind Siliguri', 'Poppins', system-ui, sans-serif; --gb-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace; /* Heading font — clean by default (used by admin/dashboards). The shop opts into the display voice below via html.gb-theme-active. */ --gb-font-heading: var(--gb-font-body); /* Remap the legacy token the whole theme already references so every existing `var(--font-family)` usage inherits the Bangla-safe stack. */ --font-family: var(--gb-font-body); /* ---- Fluid modular type scale (rem base = 10px) ----------------------- */ --fs-display: clamp(3.2rem, 2.4rem + 2.6vw, 5rem); --fs-h1: clamp(2.8rem, 2.2rem + 2vw, 4rem); --fs-h2: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); --fs-h3: clamp(2rem, 1.8rem + 0.9vw, 2.6rem); --fs-h4: 1.9rem; --fs-h5: 1.6rem; --fs-h6: 1.4rem; --fs-lead: clamp(1.6rem, 1.5rem + 0.4vw, 1.9rem); --fs-body: 1.5rem; --fs-sm: 1.3rem; --fs-xs: 1.2rem; --fs-eyebrow: 1.15rem; /* ---- Leading (line-height) -------------------------------------------- */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-snug: 1.45; --lh-body: 1.7; /* ---- Tracking (letter-spacing) ---------------------------------------- */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.12em; /* ---- Weights ---------------------------------------------------------- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; } /* The storefront (and the CMS live-preview iframe) gets the display voice. Admin shells keep the clean body font for a professional dashboard look. */ html.gb-theme-active { --gb-font-heading: var(--gb-font-display); } /* ---- Base rendering quality ------------------------------------------------ */ body { font-family: var(--gb-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'kern' 1, 'liga' 1; } /* Bangla benefits from a touch more leading for stacked vowel signs. Scoped to so it only sets an inherited base — component rules (buttons, badges, etc.) can still override without a specificity fight. */ body:lang(bn) { line-height: var(--lh-body); } /* ---- Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .gb-heading, .section-head .title, .section-title { font-family: var(--gb-font-heading); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); /* Kill widows/orphans on headings where supported. */ text-wrap: balance; } /* Sizes are scoped to the storefront so admin data tables / dashboard widgets keep their own tuned sizing. */ html.gb-theme-active h1 { font-size: var(--fs-h1); } html.gb-theme-active h2 { font-size: var(--fs-h2); } html.gb-theme-active h3 { font-size: var(--fs-h3); } html.gb-theme-active h4 { font-size: var(--fs-h4); } html.gb-theme-active h5 { font-size: var(--fs-h5); } html.gb-theme-active h6 { font-size: var(--fs-h6); } /* ---- Body copy rhythm ------------------------------------------------------ */ p { line-height: var(--lh-body); } html.gb-theme-active p { font-size: var(--fs-body); } /* Nicer paragraph wrapping where supported (avoids short last lines). */ p, li, blockquote, figcaption { text-wrap: pretty; } /* ============================================================================ Reusable typographic utilities (opt-in — safe to add to any markup) ============================================================================ */ /* Display / hero heading */ .gb-display { font-family: var(--gb-font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-wrap: balance; } /* Eyebrow / kicker label above a heading */ .gb-eyebrow { display: inline-block; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; line-height: 1; } /* Lead paragraph / intro text */ .gb-lead { font-size: var(--fs-lead); line-height: var(--lh-snug); font-weight: var(--fw-regular); } /* Small print / captions */ .gb-caption { font-size: var(--fs-xs); line-height: var(--lh-snug); } /* Wrapping helpers (hierarchy / widow-orphan control) */ .gb-balance { text-wrap: balance; } .gb-pretty { text-wrap: pretty; } .gb-nowrap { white-space: nowrap; } .gb-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Clamp to N lines */ .gb-clamp-2, .gb-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .gb-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; } .gb-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; } /* Font family helpers */ .gb-font-body { font-family: var(--gb-font-body); } .gb-font-display { font-family: var(--gb-font-display); } .gb-mono { font-family: var(--gb-font-mono); } /* Keep legacy theme helpers Bangla-safe (Open Sans / Poppins are no longer loaded) */ .font-primary { font-family: var(--gb-font-display) !important; } .font-secondary { font-family: var(--gb-font-body) !important; } /* Size helpers */ .gb-fs-display { font-size: var(--fs-display); } .gb-fs-h1 { font-size: var(--fs-h1); } .gb-fs-h2 { font-size: var(--fs-h2); } .gb-fs-h3 { font-size: var(--fs-h3); } .gb-fs-h4 { font-size: var(--fs-h4); } .gb-fs-lead { font-size: var(--fs-lead); } .gb-fs-body { font-size: var(--fs-body); } .gb-fs-sm { font-size: var(--fs-sm); } .gb-fs-xs { font-size: var(--fs-xs); } /* Weight helpers */ .gb-fw-regular { font-weight: var(--fw-regular); } .gb-fw-medium { font-weight: var(--fw-medium); } .gb-fw-semibold { font-weight: var(--fw-semibold); } .gb-fw-bold { font-weight: var(--fw-bold); } .gb-fw-black { font-weight: var(--fw-black); } /* Leading helpers */ .gb-lh-tight { line-height: var(--lh-tight); } .gb-lh-heading { line-height: var(--lh-heading); } .gb-lh-snug { line-height: var(--lh-snug); } .gb-lh-body { line-height: var(--lh-body); } /* Tracking helpers */ .gb-tracking-tight { letter-spacing: var(--ls-tight); } .gb-tracking-normal { letter-spacing: var(--ls-normal); } .gb-tracking-wide { letter-spacing: var(--ls-wide); } .gb-tracking-caps { letter-spacing: var(--ls-caps); text-transform: uppercase; }