/* ========================================================================== BanarasBhraman — Design Tokens -------------------------------------------------------------------------- The single source of truth. Nothing anywhere else in the theme may declare a raw colour, length, font-size, radius, duration or z-index. If a value is needed and no token exists, add the token here first. Naming: --bb--- Groups: color | space | text | font | leading | radius | shadow | z | size | dur | ease | border ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND PRIMITIVES Sampled directly from the official logo (logoBB1). These are raw values — never reference a primitive in a component, use a semantic token from section 2 instead. ------------------------------------------------------------------ */ --bb-color-saffron-900: #7A2200; --bb-color-saffron-800: #9C2C00; --bb-color-saffron-700: #B03200; --bb-color-saffron-600: #D03000; /* logo: deep vermilion */ --bb-color-saffron-500: #D84000; /* logo: core brand saffron */ --bb-color-saffron-400: #E05000; /* logo: dominant orange */ --bb-color-saffron-300: #EE7A33; --bb-color-saffron-200: #F7B183; --bb-color-saffron-100: #FCE3D2; --bb-color-saffron-050: #FFF4ED; --bb-color-gold-600: #B06D00; --bb-color-gold-500: #E89010; /* logo: amber highlight */ --bb-color-gold-300: #F3C46B; --bb-color-gold-100: #FBEBC6; --bb-color-cream-200: #F0E4C4; --bb-color-cream-100: #F8F0D8; /* logo: cream disc */ --bb-color-cream-050: #FDF9EF; /* Neutrals — pure white and black per the brand rule, with a warm-tinted grey ramp so greys sit beside saffron without reading blue. */ --bb-color-white: #FFFFFF; --bb-color-black: #000000; --bb-color-grey-900: #14100E; --bb-color-grey-800: #241D19; --bb-color-grey-700: #3A2F29; --bb-color-grey-600: #5A4B43; --bb-color-grey-500: #7D6D64; --bb-color-grey-400: #A89A92; --bb-color-grey-300: #CFC5BF; --bb-color-grey-200: #E5DED9; --bb-color-grey-100: #F2EEEB; --bb-color-grey-050: #F9F7F6; /* Status — the only non-brand hues in the system. UI feedback only, never decoration. */ /* Third-party brand colours. Used only where a platform's own colour is the recognisable affordance (a green WhatsApp button), never decoratively. */ --bb-color-whatsapp: #128C4B; --bb-color-whatsapp-hover: #0E7340; --bb-color-success-600: #1B6E3C; --bb-color-success-100: #E3F3E9; --bb-color-danger-600: #A3231B; --bb-color-danger-100: #FBE7E5; --bb-color-info-600: #1F5B7A; --bb-color-info-100: #E4F0F6; /* ------------------------------------------------------------------ 2. SEMANTIC COLOUR What components actually consume. Swapping a brand primitive above re-themes the whole site through these. ------------------------------------------------------------------ */ --bb-color-brand: var(--bb-color-saffron-500); --bb-color-brand-hover: var(--bb-color-saffron-600); --bb-color-brand-active: var(--bb-color-saffron-700); /* Brand at a contrast level safe for body-size text on white (>=4.5:1). */ --bb-color-brand-text: var(--bb-color-saffron-700); --bb-color-brand-subtle: var(--bb-color-saffron-050); --bb-color-brand-border: var(--bb-color-saffron-200); --bb-color-accent: var(--bb-color-gold-500); --bb-color-accent-text: var(--bb-color-gold-600); --bb-color-accent-subtle: var(--bb-color-gold-100); --bb-color-text: var(--bb-color-grey-900); --bb-color-text-muted: var(--bb-color-grey-600); --bb-color-text-subtle: var(--bb-color-grey-500); --bb-color-text-inverse: var(--bb-color-white); --bb-color-text-on-brand: var(--bb-color-white); --bb-color-surface: var(--bb-color-white); --bb-color-surface-raised: var(--bb-color-white); --bb-color-surface-sunken: var(--bb-color-grey-050); --bb-color-surface-tint: var(--bb-color-cream-050); --bb-color-surface-inverse: var(--bb-color-grey-900); --bb-color-border: var(--bb-color-grey-200); --bb-color-border-strong: var(--bb-color-grey-300); --bb-color-border-inverse: rgb(255 255 255 / 0.16); --bb-color-focus: var(--bb-color-saffron-600); --bb-color-overlay: rgb(20 16 14 / 0.56); --bb-color-skeleton: var(--bb-color-grey-100); /* ------------------------------------------------------------------ 2b. TEXTURE The watermark laid over brand-subtle surfaces. It resolves to an uploaded file, so its URL cannot be written in a static stylesheet — inc/assets.php redefines this on :root when the file is present. The `none` default is what makes a missing upload degrade to the flat colour underneath instead of a broken image request. ------------------------------------------------------------------ */ --bb-image-texture: none; /* ------------------------------------------------------------------ 3. SPACE — 4px base, geometric-ish ramp. ------------------------------------------------------------------ */ --bb-space-0: 0; --bb-space-px: 1px; --bb-space-1: 0.25rem; /* 4px */ --bb-space-2: 0.5rem; /* 8px */ --bb-space-3: 0.75rem; /* 12px */ --bb-space-4: 1rem; /* 16px */ --bb-space-5: 1.25rem; /* 20px */ --bb-space-6: 1.5rem; /* 24px */ --bb-space-8: 2rem; /* 32px */ --bb-space-10: 2.5rem; /* 40px */ --bb-space-12: 3rem; /* 48px */ --bb-space-16: 4rem; /* 64px */ --bb-space-20: 5rem; /* 80px */ --bb-space-24: 6rem; /* 96px */ /* Fluid rhythm — section padding and gutters scale with the viewport so mobile stays tight and desktop breathes, with no breakpoint jumps. */ --bb-space-gutter: clamp(var(--bb-space-4), 4vw, var(--bb-space-8)); /* Tuned down from 6rem: at desktop widths the taller value left visible dead space between the homepage bands. */ --bb-space-section: clamp(var(--bb-space-10), 6vw, var(--bb-space-16)); --bb-space-stack: var(--bb-space-6); /* ------------------------------------------------------------------ 4. TYPOGRAPHY System stack: zero network requests, zero layout shift, no CDN. A self-hosted display face can later override --bb-font-heading only. ------------------------------------------------------------------ */ --bb-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --bb-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bb-font-body: var(--bb-font-sans); --bb-font-heading: var(--bb-font-sans); --bb-font-weight-regular: 400; --bb-font-weight-medium: 500; --bb-font-weight-semibold: 600; --bb-font-weight-bold: 700; /* Fluid type scale — min is the mobile size, max the desktop size. */ --bb-text-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --bb-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --bb-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --bb-text-md: clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); --bb-text-lg: clamp(1.25rem, 1.17rem + 0.40vw, 1.5rem); --bb-text-xl: clamp(1.5rem, 1.36rem + 0.68vw, 1.875rem); --bb-text-2xl: clamp(1.75rem, 1.53rem + 1.10vw, 2.375rem); --bb-text-3xl: clamp(2rem, 1.64rem + 1.80vw, 3rem); --bb-text-4xl: clamp(2.25rem, 1.70rem + 2.75vw, 3.75rem); --bb-leading-none: 1; --bb-leading-tight: 1.15; --bb-leading-snug: 1.3; --bb-leading-normal: 1.6; --bb-leading-relaxed: 1.75; --bb-tracking-tight: -0.02em; --bb-tracking-normal: 0; --bb-tracking-wide: 0.04em; --bb-tracking-caps: 0.08em; /* Comfortable measure for long-form SEO copy. */ --bb-measure: 68ch; --bb-measure-narrow: 54ch; /* ------------------------------------------------------------------ 5. RADIUS / BORDER / SHADOW ------------------------------------------------------------------ */ --bb-radius-none: 0; --bb-radius-sm: 0.25rem; --bb-radius-md: 0.5rem; --bb-radius-lg: 0.75rem; --bb-radius-xl: 1rem; --bb-radius-2xl: 1.5rem; --bb-radius-pill: 999rem; --bb-radius-circle: 50%; --bb-border-width: 1px; --bb-border-width-thick: 2px; --bb-border: var(--bb-border-width) solid var(--bb-color-border); /* Warm-tinted shadows — neutral black shadows read grey against cream. */ --bb-shadow-xs: 0 1px 2px rgb(58 47 41 / 0.06); --bb-shadow-sm: 0 1px 3px rgb(58 47 41 / 0.08), 0 1px 2px rgb(58 47 41 / 0.04); --bb-shadow-md: 0 4px 12px rgb(58 47 41 / 0.09), 0 2px 4px rgb(58 47 41 / 0.05); --bb-shadow-lg: 0 12px 28px rgb(58 47 41 / 0.12), 0 4px 8px rgb(58 47 41 / 0.06); --bb-shadow-focus: 0 0 0 3px var(--bb-color-brand-border); /* ------------------------------------------------------------------ 6. LAYOUT ------------------------------------------------------------------ */ --bb-size-container: 75rem; /* 1200px */ --bb-size-container-wide: 90rem; /* 1440px */ --bb-size-container-narrow: 48rem; /* 768px */ --bb-size-header-height: 4.75rem; --bb-size-touch-target: 2.75rem; /* 44px — WCAG 2.5.5 minimum */ --bb-size-icon-sm: 1rem; --bb-size-icon-md: 1.25rem; --bb-size-icon-lg: 1.5rem; /* Breakpoints are documented here for reference. CSS custom properties cannot be used inside @media, so media queries state these literally. sm 30rem/480px · md 48rem/768px · lg 64rem/1024px · xl 80rem/1280px */ /* ------------------------------------------------------------------ 7. Z-INDEX — named scale, no ad-hoc numbers. ------------------------------------------------------------------ */ --bb-z-below: -1; --bb-z-base: 0; --bb-z-raised: 10; --bb-z-sticky: 100; /* Deliberately above overlay/drawer, not below: the sticky header contains the mobile drawer's own toggle/close control, so it must stay visible and clickable on top of the drawer it opens — the one exception to this scale otherwise increasing with how "temporary" a layer is. */ --bb-z-header: 450; --bb-z-overlay: 300; --bb-z-drawer: 400; --bb-z-modal: 500; --bb-z-toast: 600; --bb-z-skip-link: 700; /* ------------------------------------------------------------------ 8. MOTION — restrained, per the "no unnecessary animation" rule. ------------------------------------------------------------------ */ --bb-dur-instant: 80ms; --bb-dur-fast: 150ms; --bb-dur-normal: 240ms; --bb-dur-slow: 360ms; --bb-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --bb-ease-in: cubic-bezier(0.4, 0, 1, 1); --bb-ease-out: cubic-bezier(0, 0, 0.2, 1); --bb-transition-colors: color var(--bb-dur-fast) var(--bb-ease-standard), background-color var(--bb-dur-fast) var(--bb-ease-standard), border-color var(--bb-dur-fast) var(--bb-ease-standard); } /* Honour the OS reduced-motion preference by collapsing the duration tokens themselves — every component inherits the change for free. */ @media (prefers-reduced-motion: reduce) { :root { --bb-dur-instant: 1ms; --bb-dur-fast: 1ms; --bb-dur-normal: 1ms; --bb-dur-slow: 1ms; } }