/* ========================================================================== Vision Enterprises — Design Tokens Ref #CSG-WEB-2026 Every colour, size and spacing value used anywhere in this build comes from this file. Nothing outside this list is introduced without written approval. Edit here first — the other stylesheets only consume these variables. ========================================================================== */ /* -------------------------------------------------------------------------- Fonts — self-hosted WOFF2 only. The Google Fonts CDN is deliberately NOT used. Government offices routinely block fonts.googleapis.com, which would leave the page falling back mid-render. Drop the WOFF2 files into assets/fonts/ and these rules pick them up; until then the system stack in --font-latin carries the page. -------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans Devanagari"; src: url("../assets/fonts/noto-devanagari-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans Devanagari"; src: url("../assets/fonts/noto-devanagari-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Sans Devanagari"; src: url("../assets/fonts/noto-devanagari-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ------------------------------------------------------------------------ Colour — derived from the Vision Enterprises logo. CONTRAST RULE, NOT NEGOTIABLE: --ve-amber on white measures 1.93:1 and --ve-gold on white 1.52:1. Neither may ever carry text on a light background. They are FILL colours; charcoal sits on top of them (8.37:1 and 10.60:1). Where amber-coloured text is required, use --ve-amber-dk (4.22:1). Any deviation is a QA failure. ------------------------------------------------------------------------ */ --ve-amber: #FAAB18; /* primary — CTA fills, section bands, icon fills, active underline */ --ve-gold: #FFCB04; /* accent — hover states, badges, statistic figures, ticker highlight */ --ve-charcoal: #281F1B; /* base — all body text, navigation bar, footer */ --ve-cream: #F8E6C5; /* surface — alternate section bands, cards, quiet blocks */ /* The ONLY amber permitted as text. DEVIATION FROM THE SPECIFICATION, DELIBERATE — the spec is self-contradictory here. It declares 4.5:1 the non-negotiable AA threshold and "any deviation is a QA failure", then prescribes #B36A00 for amber text at 4.22:1. That value fails AA on white, and on the cream section bands it measures only 3.44:1. #8C5300 is the same amber hue darkened until it clears AA on BOTH surfaces: on white #FFFFFF 6.26:1 on cream #F8E6C5 5.11:1 Raise this value only after re-measuring against the cream band, which is the harder of the two backgrounds. */ --ve-amber-dk: #8C5300; --ve-white: #FFFFFF; /* canvas — default page background */ /* Derived tints. Charcoal at reduced opacity for text hierarchy, and tinted surfaces mixed from the six colours above — no new hues. */ --ve-text: rgba(40, 31, 27, 0.88); /* body copy */ --ve-text-muted: rgba(40, 31, 27, 0.70); /* small print and captions */ --ve-text-faint: rgba(40, 31, 27, 0.55); /* disabled and placeholder */ --ve-on-dark: #FFFFFF; /* text on charcoal */ --ve-on-dark-muted: rgba(248, 230, 197, 0.82); --ve-cream-deep: #F1D9B0; /* cream border / divider */ --ve-rule: rgba(40, 31, 27, 0.12); /* hairline divider on white */ --ve-rule-dark: rgba(248, 230, 197, 0.18);/* hairline divider on charcoal */ --ve-charcoal-80: rgba(40, 31, 27, 0.80); --ve-charcoal-65: rgba(40, 31, 27, 0.65); /* hero video scrim */ /* Error red. Chosen to clear 4.5:1 on white — errors never rely on a red border alone, which fails for colour-blind users. */ --ve-error: #B3261E; --ve-error-bg: #FCEEED; --ve-success: #1B5E20; --ve-success-bg: #EAF3EB; /* ------------------------------------------------------------------------ Typography ------------------------------------------------------------------------ */ /* Devanagari first so Hindi resolves before the Latin stack is consulted. Both share a common baseline and x-height so mixed lines do not look stitched together. */ --font-sans: "Noto Sans Devanagari", "Inter", system-ui, "Segoe UI", Roboto, sans-serif; /* Desktop scale */ --fs-h1: 40px; --lh-h1: 44px; --fs-h2: 30px; --lh-h2: 36px; --fs-h3: 22px; --lh-h3: 28px; --fs-body: 16px; --lh-body: 27px; --fs-small: 14px; --lh-small: 21px; --fs-button: 15px; --fs-stat: 48px; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --ls-h1: -0.02em; --ls-button: 0.01em; /* ------------------------------------------------------------------------ Spacing scale — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 No arbitrary values in between. ------------------------------------------------------------------------ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --section-pad: 96px; /* desktop top and bottom */ --container: 1200px; --gutter: 40px; /* tablet and above */ --grid-gap: 24px; --measure: 720px; /* legal pages — narrower measure for readability */ /* ------------------------------------------------------------------------ Radius — nothing fully rounded except avatars ------------------------------------------------------------------------ */ --radius-card: 8px; --radius-input: 8px; --radius-button: 6px; --radius-avatar: 50%; /* ------------------------------------------------------------------------ Shadow — two levels only ------------------------------------------------------------------------ */ --shadow-rest: 0 1px 3px rgba(40, 31, 27, 0.08); --shadow-hover: 0 8px 24px rgba(40, 31, 27, 0.12); /* ------------------------------------------------------------------------ Motion — 200ms on hover, 400ms on scroll reveal. base.css disables both entirely under prefers-reduced-motion. ------------------------------------------------------------------------ */ --t-hover: 200ms; --t-reveal: 400ms; --ease: cubic-bezier(0.33, 1, 0.68, 1); /* ------------------------------------------------------------------------ Global shell dimensions ------------------------------------------------------------------------ */ --header-h: 88px; /* resting */ --header-h-compact: 64px; /* after 80px of scroll */ --topbar-h: 40px; --fab-size: 56px; /* WhatsApp button */ --z-header: 100; --z-mobile-menu: 200; --z-fab: 300; --z-lightbox: 400; } /* -------------------------------------------------------------------------- Mobile scale — breakpoints are mobile ≤767 · tablet 768–1023 · desktop 1024–1439 · wide ≥1440. Body copy never drops below 16px. -------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --fs-h1: 28px; --lh-h1: 32px; --fs-h2: 24px; --lh-h2: 30px; --fs-h3: 19px; --lh-h3: 26px; --fs-body: 16px; --lh-body: 26px; --fs-small: 13px; --lh-small: 20px; --fs-stat: 34px; --section-pad: 56px; --gutter: 24px; } }