/* ========================================================================== MowChak design system — foundation ========================================================================== Audience: Bangladesh only. Product: honey only. Those two facts drive everything below, so they are worth stating plainly: 1. BENGALI IS THE PRIMARY SCRIPT, not a translation layer. The type scale, line heights and letter-spacing rules are calibrated for Bengali, not for Latin with Bengali bolted on. See "Typography" for the reasoning. 2. MOBILE ON METERED DATA IS THE PRIMARY DEVICE. Bangladeshi traffic is overwhelmingly Android on 3G/4G, often on a data package the customer is counting. Every byte is a cost to the customer, so the system stays small: no icon font, no render-blocking web font, no CSS framework, colour and shadow expressed as tokens rather than repeated values. 3. ONE PRODUCT MEANS NO CATALOGUE. There is no navigation, search, category, breadcrumb or related-products component in this system, and that is deliberate — the header is a logo and a phone number because there is nowhere else to go. The whole page exists to sell four pack sizes of one honey. Layers, in order: 1. Primitives — the LOCKED brand palette. Never reference these directly from a component; use a role. 2. Typography — Bengali-calibrated scale and leading. 3. Roles — semantic names components actually consume. 4. Space, shape, elevation, motion, layout. 5. Admin — a denser Latin-first scale for the staff panel. The locked palette cannot change. Where a locked colour could not meet WCAG AA as text, the fix was to change which locked colour carries the text — see --price-ink — never to invent a new one. Run `npm run contrast` to re-check. ========================================================================== */ :root { /* ======================================================================= 1. PRIMITIVES — LOCKED brand palette Do not add colours here. Do not reference these from components. ======================================================================= */ --honey-yellow: #F5B400; --deep-honey-gold: #D89A00; --accent-gold: #C9972B; --black: #111111; --natural-dark-green: #123D16; --natural-green: #245B20; --soft-cream: #FFF9EA; --white: #FFFFFF; --border: #E5E5E5; --error-red: #D32F2F; --success-green: #1F7A3D; /* Derived neutrals and tints. Not locked — these are mixes of the above, tuned to pass WCAG AA against the text that sits on them. */ --ink: var(--black); --ink-muted: #5A5A5A; --ink-soft: #6E6E6E; --surface: var(--white); --surface-alt: var(--soft-cream); --surface-sunken: #FBF4E2; --border-strong: #D4D4D4; --honey-tint: #FFF3D1; --honey-tint-strong: #FFE9AE; --green-tint: #E9F2E7; --error-tint: #FEF4F4; --success-tint: #E7F4EC; /* ======================================================================= 2. TYPOGRAPHY — calibrated for Bengali ======================================================================= Bengali is not Latin at a different size. Three properties of the script decide this scale: - The headline stroke (মাত্রা) runs along the top of most letters, and conjuncts (যুক্তাক্ষর) stack glyphs vertically. Both extend well past the x-height band, so Bengali needs MORE leading than Latin at the same size or the lines visually collide. Body copy is 1.75, not 1.5. - Bengali glyphs read smaller than Latin at an identical point size, so the floor is raised. Nothing customer-facing sits below --fs-2xs (13px); Latin-calibrated 11-12px "small print" is unreadable in Bengali. - Bengali is UNICASE and its conjuncts are ligatures. `text-transform: uppercase` does nothing to it, and `letter-spacing` actively pulls the parts of a conjunct apart so that যুক্ত stops looking like one letter. Both are forbidden on Bengali and enforced by the guard near the bottom of this file; tracking is allowed only inside .lang-en, where Latin actually benefits from it. */ --font-bn: 'Kalpurush', 'Noto Sans Bengali', 'Nirmala UI', 'SolaimanLipi', 'Shonar Bangla', 'Vrinda', system-ui, sans-serif; --font-en: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace; /* Scale. Public site only — the admin keeps its own denser scale below. */ --fs-2xs: 0.8125rem; /* 13px - the Bengali floor. Badges, ribbons only. */ --fs-xs: 0.875rem; /* 14px - meta, hints, helper text */ --fs-sm: 0.9375rem; /* 15px - secondary copy, small labels */ --fs-base: 1.0625rem; /* 17px - Bengali body. 16px reads small in Bengali */ --fs-md: 1.125rem; /* 18px - lead paragraphs, prices in a row */ --fs-lg: 1.3125rem; /* 21px - card prices, sub-headings */ --fs-xl: 1.5rem; /* 24px - panel and page headings */ --fs-2xl: 1.875rem; /* 30px - section titles */ --fs-3xl: 2.25rem; /* 36px - hero */ /* Leading. Bengali-first; --lh-tight is still looser than a Latin display line-height would be, for the reason given above. */ --lh-tight: 1.35; /* hero and section titles */ --lh-heading: 1.45; /* card and panel headings */ --lh-ui: 1.5; /* buttons, labels, cells */ --lh-body: 1.75; /* Bengali paragraphs */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; --fw-black: 800; /* ======================================================================= 3. ROLES — what components consume A component should never name a brand colour. If a role is missing, add one here rather than reaching past this layer. ======================================================================= */ /* --- Surfaces --- */ --surface-page: var(--white); --surface-card: var(--white); --surface-muted: var(--soft-cream); /* alternating section bands */ --surface-recessed: var(--surface-sunken); /* wells, image backdrops */ --surface-inverse: var(--black); /* panel heads, footer */ --surface-nature: var(--natural-dark-green); /* hero */ --surface-brand: var(--honey-yellow); /* primary action */ --surface-highlight: var(--honey-tint); /* selected rows, summaries */ /* --- Ink --- */ --ink-primary: var(--black); --ink-secondary: var(--ink-muted); /* 6.9:1 on white */ --ink-tertiary: var(--ink-soft); /* 5.1:1 on white */ --ink-inverse: var(--white); /* primary ink on dark surfaces */ --ink-inverse-soft: var(--soft-cream); /* secondary ink on dark */ --ink-on-brand: var(--black); /* on honey yellow, 10.3:1 */ --ink-brand: var(--honey-yellow); /* on inverse surfaces only */ /* Money. No colour in the locked palette can carry text on a light background at AA — Deep Honey Gold manages 2.46:1 on white and 2.22:1 on the honey tint, under the 3:1 floor even for large bold text. A price is the one thing a customer must be able to read, so numerals use locked Black (18.9:1) and the honey-gold identity is carried by the borders and badges around them. Setting this to var(--deep-honey-gold) restores gold prices and re-introduces that failure. */ --price-ink: var(--black); /* --- Accent: decoration and borders only, never text on a light ground --- */ --accent-line: var(--deep-honey-gold); --accent-line-soft: var(--accent-gold); /* --- Borders --- */ --border-subtle: var(--border); --border-firm: var(--border-strong); --border-selected: var(--deep-honey-gold); --border-inverse: rgba(255, 255, 255, 0.14); --border-hover: var(--honey-yellow); /* --- Actions --- */ --action-primary-from: var(--honey-yellow); --action-primary-to: var(--deep-honey-gold); --action-primary-ink: var(--black); --action-inverse-bg: var(--black); --action-inverse-ink: var(--honey-yellow); --action-nature-bg: var(--natural-green); --action-nature-ink: var(--white); --action-success-bg: var(--success-green); --action-success-ink: var(--white); /* --- States --- */ --state-selected-border: var(--deep-honey-gold); --state-selected-bg: var(--honey-tint); --state-selected-mark: var(--black); /* the indicator dot: 18.9:1 */ --state-selected-glow: rgba(245, 180, 0, 0.28); --state-error-ink: var(--error-red); --state-error-bg: var(--error-tint); --state-error-border: var(--error-red); --state-error-glow: rgba(211, 47, 47, 0.22); --surface-danger: var(--error-red); /* filled warning chips */ --ink-on-danger: var(--white); --state-success-ink: var(--success-green); --state-success-bg: var(--success-tint); --state-trust-ink: var(--natural-dark-green); /* 10.8:1 on green tint */ --state-trust-bg: var(--green-tint); /* Focus. One colour cannot serve a white card and the dark green hero, so the ring is dark by default and inverted on dark surfaces. */ --focus-ring: var(--black); --focus-ring-inverse: var(--honey-yellow); --focus-ring-width: 3px; --focus-ring-offset: 2px; /* ======================================================================= 4. SPACE, SHAPE, ELEVATION, MOTION, LAYOUT ======================================================================= */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08); --shadow: 0 4px 12px rgba(17, 17, 17, 0.08); --shadow-lg: 0 12px 32px rgba(17, 17, 17, 0.14); --shadow-honey: 0 6px 20px rgba(216, 154, 0, 0.28); --container: 1160px; --container-narrow: 820px; --header-height: 64px; /* Minimum tap target. Thumb-driven, one-handed, often outdoors in daylight on a scratched screen — 48px, above the 44px floor. */ --tap-min: 48px; --tap-min-compact: 44px; /* Safe-area insets, so the floating Call Now clears a home bar. */ --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-left: env(safe-area-inset-left, 0px); --ease: cubic-bezier(0.4, 0, 0.2, 1); --speed-fast: 120ms; --speed: 200ms; --speed-slow: 320ms; --z-header: 100; --z-floating: 200; --z-toast: 300; --z-modal: 400; /* ======================================================================= 5. ADMIN — a denser, Latin-first scale The staff panel is English, on a desk, working through tables. It wants information density rather than Bengali reading comfort, so it keeps its own compact scale and neutral greys. Bengali still appears there in customer names and addresses; .bn switches those runs to the Bengali face and the guard below protects them from tracking. ======================================================================= */ --admin-fs-xs: 11px; --admin-fs-sm: 12px; --admin-fs-base: 13.5px; --admin-fs-md: 14px; --admin-fs-lg: 18px; --admin-fs-xl: 26px; --admin-page: #F6F6F4; /* app background */ --admin-head: #FAFAF8; /* table and card headers */ --admin-row-hover: #FCFBF6; /* warm row hover */ --admin-hover: #F2F2EF; /* neutral control hover */ --admin-chip-bg: #EFEFEC; /* muted badges */ --admin-code-bg: #1E1E1C; /* log output */ --admin-code-ink: #E8E6E0; /* Status families for the admin. Each ink is AA on its own background. */ --admin-info-ink: #14477E; --admin-info-bg: #EAF2FB; --admin-info-border: #C4DAF3; --admin-ship-ink: #1B4E8F; --admin-ship-bg: #E8F0FB; --admin-ship-border: #CFE0F5; --admin-warn-ink: #6D4F00; --admin-open-ink: #7A5A00; --admin-danger-ink: #8F1F1F; --admin-danger-border: #F0BDBD; --admin-danger-hover: #B71C1C; --admin-success-border: #B6DCC5; --admin-closed-border: #C9E6D5; --admin-return-border: #F6CFCF; } @media (min-width: 768px) { :root { --header-height: 76px; --fs-2xl: 2.125rem; --fs-3xl: 2.75rem; } } /* ========================================================================== BENGALI TYPOGRAPHY GUARD The one rule in this file that is not a token, because it has to be. Latin habits — tracking out a small label, uppercasing a heading — are wrong for Bengali: the script is unicase, and letter-spacing separates the parts of a conjunct. Rather than trusting every future component to remember, the safe default is enforced here and opted out of explicitly by .lang-en and .mono, which are the only places Latin tracking is wanted. ========================================================================== */ .bn, .bn *, [lang='bn'] { text-transform: none; letter-spacing: normal; } /* ========================================================================== FONTS Kalpurush is the specified Bengali face. Drop the licensed files into src/public/fonts/ and these rules activate with no code change; until then the stack falls through to the Bengali faces that ship with Android, Windows, iOS and most Linux distributions, so Bengali always renders. font-display: swap so a slow connection never blanks the text, and unicode-range so a page with no Bengali on it downloads no Bengali font. ========================================================================== */ @font-face { font-family: 'Kalpurush'; src: url('/assets/fonts/kalpurush.woff2') format('woff2'), url('/assets/fonts/kalpurush.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; } @font-face { font-family: 'Kalpurush'; src: url('/assets/fonts/kalpurush-bold.woff2') format('woff2'), url('/assets/fonts/kalpurush-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }