/* ===================================================================== Bodhua Bazar — colors_and_type.css Single source of truth for color and type tokens. Consumed by preview cards and every UI kit. ===================================================================== */ /* --- Fonts ----------------------------------------------------------- FONT SYSTEM v0.2 · Hind Siliguri 600/700 Bangla display — headings, hero, marketing · Noto Sans Bengali 400/500 Bangla body — product cards, descriptions, alerts · Geist 400/500/600 English UI — buttons, labels, admin · Geist Mono 400/500 Mono — SKUs, IDs, wallet tx, admin log All OFL licensed. ~180KB subsetted. Geist via Vercel CDN. NOTE: Hind Siliguri remains for display; Noto Sans Bengali for body. ---------------------------------------------------------------------- */ /* Google Fonts — all confirmed loading in this environment */ @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@600;700&family=Noto+Sans+Bengali:ital,wght@0,400;0,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* =================================================================== COLOR — Base scales (OKLCH for perceptual uniformity) =================================================================== */ /* Paper / Ink — warm neutrals. The canvas. */ --bb-paper: #F7F2E8; /* default page bg — warm cream */ --bb-paper-2: #FBF7ED; /* card surface, slightly lighter */ --bb-paper-3: #FFFBF0; /* highest surface (modals) */ --bb-ink: #1A1915; /* primary text */ --bb-ink-2: #403E36; /* secondary text */ --bb-ink-3: #6B6759; /* tertiary text, meta */ --bb-line: #E6DFCE; /* hairline borders */ --bb-line-2: #D6CEB7; /* stronger divider */ /* Bodhua Green — primary, co-op, trust, go */ --bb-green-50: #E4F6EC; /* surface tint, success bg */ --bb-green-100: #BEE8CF; /* chip bg, hover tint */ --bb-green-300: #5ED398; /* illustration, mid-tone */ --bb-green-500: #1DBE77; /* --success (delivered, paid, approved) */ --bb-green-600: #12A866; /* --primary-hover */ --bb-green-700: #0B7A4A; /* --primary ★ default — Jute Green */ --bb-green-800: #084E30; /* --primary-pressed */ --bb-green-900: #063C24; /* text on green-50 bg */ /* Turmeric — savings, wallet credit, rewards */ --bb-turmeric-50: #FFF3D6; --bb-turmeric-100: #FFE3A1; --bb-turmeric-300: #FAC65A; --bb-turmeric-500: #F5A623; /* primary accent — vibrant saffron */ --bb-turmeric-700: #A66500; /* Clay / Terracotta — warn, debit, destructive */ --bb-clay-50: #FDE6DD; --bb-clay-300: #F28557; --bb-clay-600: #E04E1F; /* primary warn — vibrant terracotta */ --bb-clay-800: #9A2F0E; /* Jute — subtle secondary, badges */ --bb-jute-100: #EDE2C5; --bb-jute-500: #A68B56; --bb-jute-700: #6E5A33; /* =================================================================== COLOR — Semantic =================================================================== */ --bg: var(--bb-paper); --bg-surface: var(--bb-paper-2); --bg-raised: var(--bb-paper-3); --bg-inverse: var(--bb-ink); --fg: var(--bb-ink); --fg-muted: var(--bb-ink-2); --fg-subtle: var(--bb-ink-3); --fg-on-primary: var(--bb-paper); --fg-on-accent: var(--bb-ink); --border: var(--bb-line); --border-strong: var(--bb-line-2); --primary: var(--bb-green-700); /* #0B7A4A Jute Green */ --primary-hover: var(--bb-green-600); /* #12A866 */ --primary-pressed: var(--bb-green-800); /* #084E30 */ --primary-soft: var(--bb-green-50); --accent: var(--bb-turmeric-500); --accent-hover: var(--bb-turmeric-700); --accent-soft: var(--bb-turmeric-50); --danger: var(--bb-clay-600); --danger-hover: var(--bb-clay-800); --danger-soft: var(--bb-clay-50); --success: var(--bb-green-500); /* #1DBE77 — status chips only, never buttons */ --warning: var(--bb-turmeric-700); /* #A66500 — pending, expiry, low stock */ --info: #0891B2; /* muted teal — toasts, in-progress, hints */ --focus-ring: var(--bb-green-500); /* #1DBE77 2px + 2px offset on paper bg */ /* The one permitted decorative gradient — savings progress only. */ --bb-progress-gradient: linear-gradient(90deg, var(--bb-green-700) 0%, var(--bb-turmeric-500) 100%); /* =================================================================== TYPOGRAPHY — Families =================================================================== */ --font-display: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif; /* Bangla headings / hero */ --font-bangla: 'Noto Sans Bengali', 'Hind Siliguri', system-ui, sans-serif; /* Bangla body / product cards */ --font-latin: 'Inter', system-ui, -apple-system, sans-serif; /* English UI / admin — swap to Geist in prod */ --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* SKUs / IDs / tx log — swap to Geist Mono in prod */ --font-sans: var(--font-bangla); /* default */ /* Type scale — modular 1.20 (minor third) */ --fs-12: 0.75rem; /* 12px — meta */ --fs-13: 0.8125rem; /* 13px — small */ --fs-15: 0.9375rem; /* 15px — body min (customer) */ --fs-17: 1.0625rem; /* 17px — body */ --fs-18: 1.125rem; /* 18px — POS body min */ --fs-20: 1.25rem; /* 20px — h5 */ --fs-24: 1.5rem; /* 24px — h4 */ --fs-28: 1.75rem; /* 28px — h3 */ --fs-34: 2.125rem; /* 34px — h2 */ --fs-42: 2.625rem; /* 42px — h1 */ --fs-56: 3.5rem; /* 56px — display */ /* Line heights */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* =================================================================== SPACING — 4px base =================================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* =================================================================== RADII & ELEVATION =================================================================== */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --shadow-1: 0 1px 2px oklch(0.2 0.02 70 / 0.06); --shadow-2: 0 4px 10px oklch(0.2 0.02 70 / 0.08), 0 1px 2px oklch(0.2 0.02 70 / 0.06); --shadow-3: 0 12px 28px oklch(0.2 0.02 70 / 0.12), 0 2px 4px oklch(0.2 0.02 70 / 0.08); /* =================================================================== MOTION =================================================================== */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.3, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 300ms; } /* ===================================================================== SEMANTIC ELEMENT DEFAULTS Import this file, you get reasonable typography without utility classes. ===================================================================== */ html { font-size: 16px; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-17); line-height: var(--lh-normal); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "tnum" 0; } h1, h2, h3, h4, h5 { font-family: var(--font-sans); color: var(--fg); margin: 0 0 var(--s-3) 0; line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: -0.005em; } h1 { font-size: var(--fs-42); font-weight: var(--fw-bold); letter-spacing: -0.015em; } h2 { font-size: var(--fs-34); } h3 { font-size: var(--fs-28); } h4 { font-size: var(--fs-24); } h5 { font-size: var(--fs-20); } p { margin: 0 0 var(--s-3) 0; line-height: var(--lh-relaxed); } small, .meta { font-size: var(--fs-13); color: var(--fg-subtle); } code, pre, .mono, .sku { font-family: var(--font-mono); font-size: 0.92em; } .num, .price { font-variant-numeric: tabular-nums; } /* Latin-only pair labels (e.g. in admin) */ .latin { font-family: var(--font-latin); } /* Display — hero numbers, membership milestones */ .display { font-size: var(--fs-56); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.02em; } /* Focus ring — applied globally to :focus-visible */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }