/* ============================================================ BAJAJ FINSERV — DESIGN TOKENS All values extracted from the Figma design system. Consumed by every other stylesheet. Nothing here is themed; theme-specific mappings live at the bottom (:root = light) and in dark-mode.css ([data-theme="dark"]). ============================================================ */ :root { /* -------------------------------------------------------- 1. BRAND PALETTE (raw, non-semantic) -------------------------------------------------------- */ --bf-blue: #005DAC; /* rgb(0,93,172) primary brand */ --bf-blue-strong: #075DAA; /* rgb(7,93,170) headings */ --bf-blue-600: #065EAC; /* rgb(6,94,172) */ --bf-blue-500: #1761AC; /* rgb(23,97,172) */ --bf-navy: #002A50; /* rgb(0,42,80) deep navy */ --bf-navy-900: #001B33; /* derived, darker navy */ /* Accent — cyan / teal family */ --bf-cyan: #3AC2D6; /* rgb(58,194,214) */ --bf-cyan-light: #5FC9E1; /* rgb(95,201,225) */ --bf-cyan-soft: #6CCBD9; /* rgb(108,203,217) */ --bf-teal: #00A5AE; /* rgb(0,165,174) */ /* Accent — purple & warm */ --bf-purple: #8A38F5; /* rgb(138,56,245) */ --bf-tan: #B4917F; /* rgb(180,145,127) */ --bf-sand: #F1E8E2; /* rgb(241,232,226) */ /* Cyan surface tints */ --bf-cyan-050: #EFF8F9; /* rgb(239,248,249) */ --bf-cyan-100: #DFF2F7; /* rgb(223,242,247) */ --bf-cyan-150: #D2E7EA; /* rgb(210,231,234) */ --bf-cyan-200: #CFECF3; /* rgb(207,236,243) */ --bf-blue-050: #F2F6FF; /* rgb(242,246,255) icon wells */ /* Neutrals / ink */ --bf-ink: #2E2E2E; /* rgb(46,46,46) body text */ --bf-ink-900: #231F20; /* rgb(35,31,32) near-black */ --bf-ink-800: #222222; /* rgb(34,34,34) */ --bf-ink-700: #2F2F2F; /* rgb(47,47,47) */ --bf-slate: #3B4655; /* rgb(59,70,85) muted heading */ --bf-grey-600: #898989; /* rgb(137,137,137) */ --bf-grey-500: #959595; /* rgb(149,149,149) */ --bf-grey-300: #CECECE; /* rgb(206,206,206) */ --bf-grey-200: #D9D9D9; /* rgb(217,217,217) */ --bf-grey-100: #E5E5E5; /* rgb(229,229,229) */ --bf-grey-050: #F6F6F6; /* rgb(246,246,246) */ --bf-white: #FFFFFF; --bf-black: #000000; /* Status — derived to harmonise with the brand palette (the source file defines no semantic status colours). */ --bf-success: #1E9E62; --bf-success-bg: #E7F4EC; --bf-warning: #E8A020; --bf-warning-bg: #FBF1DD; --bf-error: #D64545; --bf-error-bg: #FaE9E9; --bf-info: #005DAC; --bf-info-bg: #E3EEF8; /* -------------------------------------------------------- 2. TYPOGRAPHY -------------------------------------------------------- */ --font-primary: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-secondary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: "Nimbus Sans", "Rubik", Arial, sans-serif; /* Font sizes — exact scale used in the file */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 36px; --fs-4xl: 40px; --fs-5xl: 50px; --fs-6xl: 60px; --fs-display: 120px; /* Page-title scale — one source of truth for every inner-page

(and its subtitle). Flat 32px at every breakpoint so all pages read identically; never override per page. */ --fs-page-title: 32px; --fs-page-subtitle: var(--fs-xl); /* Font weights (Rubik + Poppins) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-none: 1; --lh-tight: 1.2; --lh-snug: 1.25; --lh-normal: 1.3; --lh-relaxed: 1.4; --lh-loose: 1.5; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; /* -------------------------------------------------------- 3. SPACING SCALE (4px base; includes the design's native increments 10/14/15/25/30/40) -------------------------------------------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 10px; --space-5: 12px; --space-6: 14px; --space-7: 15px; --space-8: 16px; --space-9: 20px; --space-10: 24px; --space-11: 25px; --space-12: 30px; --space-13: 40px; --space-14: 48px; --space-15: 60px; --space-16: 80px; /* -------------------------------------------------------- 4. RADII -------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 5px; --radius-md: 10px; --radius-lg: 20px; --radius-pill: 999px; --radius-circle: 50%; /* -------------------------------------------------------- 5. SHADOWS -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 8px 24px rgba(0,0,0,0.10); --shadow-card: 0 0 40px rgba(0,0,0,0.15); /* exact — download cards */ --shadow-lg: 0 16px 48px rgba(0,0,0,0.18); /* -------------------------------------------------------- 6. LAYOUT — container, grid, breakpoints -------------------------------------------------------- */ --container-max: 1512px; /* full design frame */ --container-content: 1366px; /* content column */ --container-gutter: 73px; /* frame side gutter */ --header-h: 73px; /* fixed header height (72px bar + 1px border); phone override in responsive.css */ --grid-columns: 12; --grid-gutter: 30px; /* dominant column gap */ /* Breakpoints (Bootstrap 5 aligned) — for reference in JS/media queries */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; /* -------------------------------------------------------- 7. ICON SIZES -------------------------------------------------------- */ --icon-sm: 16px; --icon-md: 18px; --icon-lg: 20px; --icon-xl: 24px; --icon-2xl: 40px; /* circular icon wells */ /* -------------------------------------------------------- 8. MOTION -------------------------------------------------------- */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Z-index scale */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* -------------------------------------------------------- 9. SEMANTIC THEME TOKENS — LIGHT (default) Everything in components/utilities references these, never the raw --bf-* values, so dark mode is a single remap in dark-mode.css. -------------------------------------------------------- */ --color-primary: var(--bf-blue); --color-primary-strong: var(--bf-blue-strong); --color-primary-hover: #004E90; --color-accent: var(--bf-cyan); --color-accent-2: var(--bf-purple); --color-bg: var(--bf-white); --color-bg-subtle: var(--bf-cyan-050); --color-surface: var(--bf-white); --color-surface-2: var(--bf-grey-050); --color-surface-tint: rgba(0,0,0,0.03); /* download-card fill */ --color-text: var(--bf-ink); --color-text-strong: var(--bf-ink-900); --color-text-muted: var(--bf-grey-500); --color-text-inverse: var(--bf-white); --color-border: var(--bf-grey-100); --color-border-strong: var(--bf-grey-300); --color-divider: rgba(46,46,46,0.2); --color-icon-well: var(--bf-blue-050); /* Header / footer surfaces */ --header-bg: rgba(255,255,255,0.85); --header-border: var(--bf-grey-100); --header-text: var(--bf-ink); --footer-bg: var(--bf-cyan-050); --footer-text: var(--bf-ink); --footer-heading: var(--bf-blue-strong); /* Footer bar (copyright strip) — always a dark surface */ --footer-bar-bg: var(--bf-navy); --footer-bar-text: rgba(232,238,244,0.80); --footer-bar-hover: var(--bf-white); color-scheme: light; }