/* ============================================================================ BharatAg Crop Science — brand foundation Single source of truth for bharatag.in (corporate) and hellokissaan.com (store). Edit colour, type and layout HERE and nowhere else. After changing this file run `npm run sync-brand` so the standalone master build in backend/seed-source/ picks up the same values. Structure: 1. Primitives raw palette values. Never referenced by page CSS. 2. Semantic roles what a colour is FOR. Page CSS uses these. 3. Site aliases legacy names kept alive so existing page CSS works. 4. Base layer accessibility defaults shared by both sites. Contrast notes (WCAG 2.1, measured against #fff): #0E5323 9.21:1 AA/AAA — any text size #1E7A34 5.40:1 AA — body text, buttons with white labels #2F8F21 4.14:1 AA large only (>=18.66px bold / 24px) — never small text #57B23C 2.68:1 decorative only — never text #ECAD02 1.99:1 decorative, or dark text on top of it — never white text ========================================================================== */ :root { color-scheme: light; /* ---- 1. PRIMITIVES ---------------------------------------------------- Named by hue + lightness step, not by usage. Add a value here only when no existing step is close enough. */ /* green — the primary brand hue */ --bag-green-950: #0F2E1A; --bag-green-900: #0B3D1B; --bag-green-800: #0E5323; --bag-green-700: #1E7A34; --bag-green-600: #2F8F21; --bag-green-500: #2F9E45; --bag-green-400: #57B23C; --bag-green-100: #DFF0E2; --bag-green-50: #EEF4EE; /* gold — accent only, never a text-on-white colour */ --bag-gold-600: #C9930A; --bag-gold-500: #ECAD02; --bag-gold-300: #F6C63E; /* navy — corporate secondary, used for dark sections on bharatag.in */ --bag-navy-900: #0A1F44; --bag-navy-800: #052A57; --bag-navy-700: #00326F; --bag-navy-600: #0C3A78; /* neutrals */ --bag-ink-900: #15241A; --bag-ink-600: #3F5147; --bag-ink-400: #64756B; --bag-line: #E6ECE7; --bag-paper: #F6F9F6; --bag-white: #FFFFFF; /* foreground colours for use ON a filled brand surface */ --bag-on-green: #F1F8ED; --bag-on-green-dim: #CBE3BF; --bag-on-navy: #EAF1FA; --bag-on-navy-dim: #A9BDD9; /* status */ --bag-danger: #C1440E; --bag-whatsapp: #25D366; /* ---- 2. SEMANTIC ROLES ------------------------------------------------ Page CSS should reference these, so a palette change is a one-line edit. */ --brand: var(--bag-green-700); /* buttons, links, active states */ --brand-dark: var(--bag-green-800); /* hover / pressed / dense text */ --brand-deep: var(--bag-green-950); /* headings, dark hero backgrounds */ --brand-bright: var(--bag-green-600); /* large text, icons, illustration */ --brand-tint: var(--bag-green-400); /* decoration only — never text */ --brand-wash: var(--bag-green-100); /* filled chips, hover surfaces */ --accent: var(--bag-gold-500); --accent-dark: var(--bag-gold-600); --accent-soft: var(--bag-gold-300); --text: var(--bag-ink-900); --text-dim: var(--bag-ink-600); --text-muted: var(--bag-ink-400); --surface: var(--bag-white); --surface-sunk: var(--bag-paper); --surface-mist: var(--bag-green-50); --border: var(--bag-line); --danger: var(--bag-danger); --whatsapp: var(--bag-whatsapp); /* type */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* layout — one scale, two container widths chosen per site */ --maxw-narrow: 1180px; /* editorial / corporate reading width */ --maxw-wide: 1320px; /* product grid needs the extra column */ --pad-tight: clamp(16px, 4vw, 44px); --pad-roomy: clamp(20px, 5vw, 64px); /* elevation */ --shadow-1: 0 1px 3px rgba(15, 46, 26, .06); --shadow-2: 0 12px 34px rgba(15, 46, 26, .12); /* ---- 3. SHARED LEGACY ALIASES ---------------------------------------- Both sites' existing CSS refers to these names. Keeping them means the palette is unified without rewriting several hundred declarations. */ --green: var(--brand); --gold: var(--accent); --ink: var(--text); --mist: var(--surface-mist); --body: var(--font-body); --mono: var(--font-mono); --disp: var(--font-display); --white: var(--surface); } /* ---- 3b. SITE-SCOPED ALIASES ------------------------------------------- Where the two sites legitimately differ (container width, page rhythm, the meaning of "navy"), the difference is declared here rather than drifting apart in two separate files. */ :root[data-site="store"] { --green-d: var(--brand-dark); --green-l: var(--bag-green-500); --leaf: var(--brand-bright); --gold-d: var(--accent-dark); --navy: var(--brand-deep); /* store "navy" was always a dark green */ --ink-2: var(--text-dim); --ink-3: var(--text-muted); --line: var(--border); --bg: var(--surface-sunk); --card: var(--surface); --wa: var(--whatsapp); --red: var(--danger); --maxw: var(--maxw-wide); --pad: var(--pad-tight); --sh: var(--shadow-1); --sh2: var(--shadow-2); } :root[data-site="bharatag"] { --navy: var(--bag-navy-700); --navy-2: var(--bag-navy-800); --navy-3: var(--bag-navy-900); --navy-card: var(--bag-navy-600); --green-2: var(--brand-dark); --green-light: var(--brand-bright); --gold-soft: var(--accent-soft); --mist-2: var(--border); --ink-dim: var(--text-dim); --on-navy: var(--bag-on-navy); --on-navy-dim: var(--bag-on-navy-dim); --on-green: var(--bag-on-green); --on-green-dim: var(--bag-on-green-dim); --maxw: var(--maxw-narrow); --pad: var(--pad-roomy); } /* ---- 4. BASE LAYER ----------------------------------------------------- Quality floor both sites inherit. Page CSS loads after this file, so any rule here can still be overridden per page. */ /* A visible keyboard focus ring on every interactive element. Mouse users never see it; keyboard and screen-reader users depend on it. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; } /* Respect the OS "reduce motion" setting. Vestibular disorders aside, this is also what most users on low-end Android handsets want. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Anchored sections shouldn't hide under the fixed header. */ :where([id]) { scroll-margin-top: 92px; } /* Images default to responsive rather than overflowing their column. */ :where(img) { max-width: 100%; }