/* ========================================================== BDA BAZAR - DESIGN TOKENS ---------------------------------------------------------- The single source of truth for colour, type, spacing, radius, shadow, layout and motion values. Loaded FIRST, before every other stylesheet, so anything later can consume these. The only values that stay outside this file are the three theme colours an admin can change in Index Page Manage - header.php emits those as --theme-* after this file loads, and they intentionally override the brand accent below. Colour direction (taken from the BDA Bazar logo): navy = structure (header, footer, headings) orange = brand accent / actions lime = the configurable CTA colour green = stock + success ONLY red = destructive + error ONLY ========================================================== */ :root{ /* ---------- 1. BRAND ---------- */ --bda-navy: #0b2545; --bda-navy-soft: #13345c; --bda-navy-deep: #071a33; --bda-orange: #f26a1b; --bda-orange-soft: #fff1e8; --bda-orange-dark: #d4570d; --bda-lime: #d8e02a; --bda-lime-dark: #c6ce18; /* ---------- 2. NEUTRALS ---------- */ --bda-white: #ffffff; --bda-grey-50: #f7f9fc; --bda-grey-100: #f2f5f9; --bda-grey-200: #e9eef5; --bda-grey-300: #d7dee8; --bda-grey-400: #b7c1cf; --bda-grey-500: #8b97a8; --bda-grey-600: #5c6b80; --bda-grey-700: #3d4a5c; --bda-grey-900: #0f2340; /* ---------- 3. TEXT ---------- */ --bda-ink: #0f2340; /* default body text */ --bda-muted: #5c6b80; /* secondary text */ --bda-faint: #8b97a8; /* timestamps, helper text */ --bda-on-dark: #ffffff; --bda-on-accent: #0b2545; /* text on lime / orange fills */ /* ---------- 4. BACKGROUNDS ---------- */ --bda-page: #f5f7fa; --bda-surface: #ffffff; --bda-surface-alt: #f7f9fc; --bda-surface-warm: #fbfaef; /* the benefits strip */ --bda-overlay: rgba(9, 22, 41, .55); /* ---------- 5. STATE ---------- */ --bda-success: #1d8f45; --bda-success-bg: #e7f8ed; --bda-success-border: #c7ecd3; --bda-warning: #9a6700; --bda-warning-bg: #fff8e1; --bda-warning-border: #f2e0a8; --bda-error: #a32020; --bda-error-bg: #fdecec; --bda-error-border: #f6cfcf; --bda-info: #1d4d7a; --bda-info-bg: #eef7ff; --bda-info-border: #cfe4f5; /* ---------- 6. BORDERS ---------- */ --bda-line: #e4e9f0; --bda-line-strong: #d7dee8; --bda-line-dark: rgba(255,255,255,.14); /* ---------- 7. TYPOGRAPHY ---------- System stack first: nothing to download, no layout shift, and Devanagari falls through to the platform Hindi font so Hindi product names render correctly. */ --bda-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Nirmala UI", "Noto Sans Devanagari", "Mangal", sans-serif; --bda-font-num: var(--bda-font-sans); /* type scale - mobile first; the desktop step-up is at the bottom */ --bda-fs-2xs: 11px; /* non-essential micro labels only */ --bda-fs-xs: 12px; /* the floor for meaningful copy */ --bda-fs-sm: 13px; --bda-fs-base: 14px; --bda-fs-md: 15px; --bda-fs-lg: 17px; --bda-fs-xl: 20px; --bda-fs-2xl: 24px; --bda-fs-3xl: 28px; /* 16px on mobile inputs stops iOS Safari zooming the page on focus */ --bda-fs-input: 16px; --bda-fw-normal: 400; --bda-fw-medium: 500; --bda-fw-semi: 600; --bda-fw-bold: 700; --bda-fw-black: 800; --bda-lh-tight: 1.25; --bda-lh-snug: 1.4; --bda-lh-normal: 1.6; --bda-lh-loose: 1.75; /* ---------- 8. SPACING (4px base) ---------- */ --bda-space-1: 4px; --bda-space-2: 8px; --bda-space-3: 12px; --bda-space-4: 16px; --bda-space-5: 20px; --bda-space-6: 24px; --bda-space-8: 32px; --bda-space-10: 40px; --bda-space-12: 48px; --bda-space-16: 64px; /* vertical rhythm between page sections */ --bda-section-gap: 24px; --bda-section-gap-lg: 36px; /* ---------- 9. RADIUS ---------- */ --bda-radius-sm: 6px; --bda-radius: 8px; --bda-radius-md: 10px; --bda-radius-lg: 12px; --bda-radius-xl: 16px; --bda-radius-pill: 999px; /* ---------- 10. SHADOW (kept shallow on purpose) ---------- */ --bda-shadow-xs: 0 1px 2px rgba(11,37,69,.05); --bda-shadow-sm: 0 2px 8px rgba(11,37,69,.06); --bda-shadow: 0 4px 16px rgba(11,37,69,.08); --bda-shadow-lg: 0 12px 32px rgba(11,37,69,.12); /* ---------- 11. LAYOUT ---------- */ --bda-container-max: 1680px; /* matches storefront-shell rail */ --bda-container-pad: 16px; --bda-content-max: 920px; /* readable measure for documents */ /* header heights - storefront-shell.js keeps --bda-header-h in sync with the real rendered height; these are the design targets */ --bda-header-h-desktop: 150px; --bda-header-h-mobile: 108px; /* ---------- 12. Z-INDEX SCALE ---------- */ --bda-z-base: 1; --bda-z-sticky: 100; --bda-z-header: 1000; --bda-z-dropdown: 1100; --bda-z-overlay: 1200; --bda-z-drawer: 1300; --bda-z-modal: 1400; --bda-z-toast: 1500; --bda-z-skip: 100000; /* ---------- 13. FOCUS RING ---------- */ --bda-focus-color: var(--bda-orange); --bda-focus-width: 3px; --bda-focus-offset: 2px; /* ---------- 14. MOTION ---------- */ --bda-dur-fast: .12s; --bda-dur: .2s; --bda-dur-slow: .32s; --bda-ease: cubic-bezier(.4, 0, .2, 1); /* ---------- 15. CONTROL SIZING ---------- */ --bda-control-h-sm: 36px; --bda-control-h: 44px; /* the touch-target baseline */ --bda-control-h-lg: 48px; } /* ---------- desktop type step-up ---------- One place to scale the whole system, instead of per-component media queries repeating font sizes. */ @media (min-width: 768px){ :root{ --bda-fs-base: 15px; --bda-fs-md: 16px; --bda-fs-lg: 18px; --bda-fs-xl: 22px; --bda-fs-2xl: 26px; --bda-fs-3xl: 32px; --bda-section-gap: 32px; --bda-section-gap-lg: 48px; --bda-container-pad: 24px; } } /* ========================================================== BREAKPOINTS (documentation - CSS cannot store these as vars) ---------------------------------------------------------- xs 320px smallest supported phone sm 390px common phone md 430px large phone lg 600px phablet / small tablet xl 768px tablet 2xl 1024px small laptop 3xl 1280px laptop 4xl 1440px desktop 5xl 1600px wide desktop Use these exact values so breakpoints stay consistent. ========================================================== */ /* ========================================================== Motion preference - honoured globally, so individual components never have to repeat this block. ========================================================== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }