/* ============================================================================= tokens.css — THE SINGLE SOURCE OF BRAND ----------------------------------------------------------------------------- This is the ONLY place brand values are defined. Change a colour, font, radius or spacing here and every V2 page updates at once. No page may redefine these. Two layers live here: 1. BCL design tokens (--bc-* / --pbc-*) — the human brand palette, from docs/DESIGN_STYLE.md (canonical: MD/DESIGN_STYLE_BCL.md). 2. Material Web mapping (--md-*) — maps the BCL tokens onto Material Web's system tokens so every md-* component renders in BCL brand automatically. RULE: brand changes happen HERE. Never inline in a page, never in components.css. ============================================================================= */ :root { /* ---- PBC brand override ---- */ --pbc-blue-button: #0094D7; --pbc-blue-button-hover: #005274; /* ---- BCL primary ---- */ --bc-primary: #0079AD; --bc-primary-light: #0099D8; --bc-primary-dark: #27455C; --bc-primary-hover: #006594; /* ---- Status ---- */ --bc-success: #468254; --bc-error: #E72F25; --warning-orange: #FF6600; /* ---- Stepper progress accent (green, PolicyBazaar-style) — change here only ---- */ --bc-stepper-accent: #21A366; /* ---- Plan tier accents (DESIGN_COMPONENT §21.6) ---- */ --bc-tier-essential: #0079AD; /* GA Most Affordable — brand blue (comparator header + summary chip), matches its card/detail treatment */ --bc-tier-essential-from: #F1F2F4; --bc-tier-essential-to: #D8DBE0; --bc-tier-bronze: #8A5A24; --bc-tier-bronze-from: #F6E3CB; --bc-tier-bronze-to: #E0BC90; --bc-tier-silver: #5A6573; --bc-tier-silver-from: #EBEFF5; --bc-tier-silver-to: #CCD6E2; --bc-tier-gold: #7A6018; --bc-tier-gold-from: #FCEFB4; --bc-tier-gold-to: #EDD27C; /* ---- Status backgrounds ---- */ --success-bg: #E4F0D3; --error-bg: #F8E1DF; --warning-bg: #F3E5D8; /* ---- Text ---- */ --bc-text-primary: #3B3B3B; --bc-text-secondary: #555555; --bc-text-muted: #767676; --bc-text-light: #6F6F6F; --bc-text-hint: #696969; --bc-text-white: #FFFFFF; /* ---- Backgrounds ---- */ --bc-bg-white: #FFFFFF; --bc-bg-page: #F9FAFB; --bc-bg-sidebar: #F1F9FF; --bc-bg-info: #DCEAF8; --bc-bg-gray: #F4F4F4; --bc-bg-popular: #F8FDFF; /* light tint for the highlighted "popular" (Silver) column */ /* ---- Borders ---- */ --bc-border-input: #88C8DB; --bc-border-card: #C4DFE6; --bc-border-light: #E0E0E0; --bc-border-divider: #D5D5D5; /* ---- Radius ---- */ --bc-radius-sm: 4px; --bc-radius-md: 8px; /* ---- Shadow (cards are borderless — DESIGN_STYLE §5) ---- */ --bc-shadow-card: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10); --bc-shadow-card-hover: 0 2px 4px rgba(16,24,40,0.08), 0 4px 12px rgba(16,24,40,0.12); /* ---- Typography (THE type system — change here, updates everywhere) ---- */ --bc-font-family: "Open Sans", sans-serif; /* text sizes */ --bc-fs-display: 32px; /* page / step heading (H1) */ --bc-fs-h1: 28px; /* funnel question heading */ --bc-fs-h2: 24px; /* card title, price */ --bc-fs-h3: 18px; /* section & sub headings */ --bc-fs-body: 16px; /* body, inputs, option labels */ --bc-fs-sm: 14px; /* secondary text, helper */ --bc-fs-xs: 13px; /* hints, details, error text */ --bc-fs-2xs: 12px; /* captions, footer, stepper labels */ /* weights */ --bc-fw-light: 300; --bc-fw-regular: 400; --bc-fw-medium: 500; --bc-fw-semibold: 600; --bc-fw-bold: 700; --bc-fw-black: 900; /* line heights */ --bc-lh-tight: 1.3; --bc-lh-snug: 1.4; --bc-lh-normal: 1.5; --bc-lh-relaxed: 1.6; /* icon sizes (Material Icons font-size) */ --bc-icon-sm: 16px; --bc-icon-md: 18px; --bc-icon-lg: 20px; --bc-icon-xl: 24px; /* ---- Layout dimensions (DESIGN_LAYOUT — PolicyBazaar structure) ---- Content area is 1104px wide with 40px L/R margins → outer max 1184px. Header is a full-bleed bar; a back-nav sits below it. Then a 2-col grid: flexible main (horizontal stepper inside the card top) + fixed sticky summary. */ --content-max: 1184px; /* 1104 content + 2×40 margin */ --content-padding: 40px; /* L/R margin (16 on mobile) */ --section-pad-y: 32px; /* vertical padding of the content region (.bc-layout / .bc-funnel) */ --layout-gutter: 24px; /* gap between main and the summary column (journey) */ --rightbox-width: 370px; /* fixed, sticky RIGHT summary column (journey) */ --rightbox-sticky-top: 24px; /* sticky offset for the summary */ --header-height: 64px; /* full-bleed header bar */ --mobile-header-height: 56px; --card-padding: 32px; /* journey card padding (20 on mobile) */ --form-gap-col: 20px; --form-gap-row: 20px; --input-height: 44px; --funnel-field-width: 400px; /* funnel: max width of fields + CTA (button full-bleed within) */ --progress-height: 6px; /* funnel progress fill line */ /* ---- Spacing ---- */ --bc-space-xs: 4px; --bc-space-sm: 8px; --bc-space-md: 16px; --bc-space-lg: 24px; --bc-space-xl: 32px; --bc-space-2xl: 48px; /* =========================================================================== MATERIAL WEB MAPPING — maps the BCL tokens above onto Material's system tokens. This is what skins every md-* control to BCL. Do not hardcode hex here; reference the --bc-* / --pbc-* tokens so brand stays single-sourced. =========================================================================== */ --md-sys-color-primary: var(--bc-primary); /* radio/checkbox/field accent */ --md-sys-color-on-primary: var(--bc-text-white); --md-sys-color-secondary: var(--pbc-blue-button); --md-sys-color-error: var(--bc-error); --md-sys-color-surface: var(--bc-bg-white); --md-sys-color-surface-container: var(--bc-bg-white); --md-sys-color-surface-container-highest: var(--bc-bg-white); --md-sys-color-on-surface: var(--bc-text-primary); --md-sys-color-on-surface-variant: var(--bc-text-hint); /* Inactive/resting borders use Material's DEFAULT grey (not branded); the brand-blue (--md-sys-color-primary) shows on the ACTIVE/focus state. */ /* Open Sans everywhere */ --md-ref-typeface-brand: var(--bc-font-family); --md-ref-typeface-plain: var(--bc-font-family); /* md-icon uses the Material Icons font we load (not Material Symbols) */ --md-icon-font: "Material Icons"; /* BCL square-ish radius, not Material's default rounded */ --md-outlined-text-field-container-shape: 2px; --md-outlined-field-container-shape: 2px; /* Buttons: 8px corners (not M3's pill); applies to filled / outlined / text */ --md-filled-button-container-shape: var(--bc-radius-md); --md-outlined-button-container-shape: var(--bc-radius-md); --md-text-button-container-shape: var(--bc-radius-md); /* Filled CTA uses the brighter button-blue (not primary) — themed centrally, so pages never need an inline color override. White, legible label + icon. */ --md-filled-button-container-color: var(--pbc-blue-button); --md-filled-button-label-text-color: var(--bc-text-white); --md-filled-button-icon-color: var(--bc-text-white); --md-filled-button-label-text-size: var(--bc-fs-body); --md-filled-button-label-text-weight: var(--bc-fw-semibold); /* Outlined icon button (e.g. funnel back) — brand-blue icon, BCL border */ --md-outlined-icon-button-icon-color: var(--bc-primary); --md-outlined-icon-button-outline-color: var(--bc-border-card); /* Outlined (secondary) button keeps a BRAND border — it's an action, not an inactive field */ --md-outlined-button-outline-color: var(--pbc-blue-button); --md-outlined-button-label-text-color: var(--pbc-blue-button); /* Dialog — white BCL surface (M3 default is a tinted container) + brand text + 8px corners */ --md-dialog-container-color: var(--bc-bg-white); --md-dialog-headline-color: var(--bc-text-primary); --md-dialog-supporting-text-color: var(--bc-text-primary); --md-dialog-container-shape: var(--bc-radius-md); }