/* ========================================================== 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; /* rating stars - one gold for the whole site (was #f4b400 / #f69931 / #f5a623 in three different stylesheets) */ --bda-star: #f4b400; --bda-star-empty: #d7dee8; /* veg / non-veg marks are a regulatory convention, not brand colour - they stay pure green/red on purpose */ --bda-veg: #008000; --bda-nonveg: #d60000; /* ---------- 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) ---------------------------------------------------------- Is block me pehle ek 9-value list thi with "use these exact values" - lekin codebase us list ko follow nahi karta, aur follow kar bhi nahi sakta jab tak Bootstrap 3 load ho raha hai. Us galat instruction ki wajah se diagnosis ulta chala jata tha, isliye ab yahan asli tasveer likhi hai. PROJECT ME DO SYSTEM CHAL RAHE HAIN. Dono jaan-boojh kar hain: 1. LAYOUT breakpoints - Bootstrap 3 ke grid ke saath aligned. Jab tak bootstrap.min.css load ho raha hai, .container inhi par 750/970/1170px par snap karta hai, isliye koi bhi layout change inhi par hona chahiye: 767 / 768 phone -> tablet 991 / 992 tablet -> desktop 1199 / 1200 desktop -> wide Extra-wide steps (sirf column count badhane ke liye): 1280 1400 1560 1700 Use karne wali files: storefront-shell.css, home-redesign.css, product-redesign.css, store-page.css, responsive.css, spacing.css, components.css 2. TYPE / POLISH breakpoints - font-size aur padding ke steps. Ye layout nahi badalte, isliye inhe Bootstrap se match karne ki zarurat nahi: 600 bada phone 1024 small laptop / iPad landscape Use karne wali files: product-card.css, static-pages.css product-card.css me dono dikhte hain aur ye galti nahi hai: column count 600/992/1280 par badalta hai (layout), jabki font-size 600/1024 par (polish). 3. Chhote polish tweaks: 360 / 400 / 420 / 480 par kuch one-off rules hain (badge font, hero text). Inhe kisi system me lane ki zarurat nahi. NAYA RULE LIKHTE WAQT: - layout badal rahe ho (column count, sidebar, drawer)? -> 767/768, 991/992, 1199/1200 me se chuno - sirf font/padding tune kar rahe ho? -> 600 ya 1024 - min-width:X aur max-width:X kabhi ek saath mat likho - exactly X par dono apply ho jaate hain. max-width hamesha X-1 hona chahiye. Poore project ko ek single breakpoint system par lana alag kaam hai - uske liye pehle Bootstrap 3 ka grid hatana padega, aur har page ka visual regression test karna padega. ========================================================== */ /* ========================================================== 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; } }