/* ============================================================================ ARGUS DASHBOARD — BURGER SINGH THEME TOKENS Portable CSS custom properties. Framework-agnostic (works in vanilla CSS, Jinja templates, Bootstrap, or as a Tailwind theme source). Brand hex extracted from the live burgersinghonline.com theme CSS (wp-content/themes/burger-singh/, fetched 2026-06-17), cross-checked against the IIFL Information Memorandum (Oct 2024). PRINCIPLE: light neutral canvas; brand colour concentrated in app chrome (header, primary actions, focus/active) and held OFF data surfaces except as semantic-free emphasis. Status colours are deliberately separated from brand red/yellow so monitoring states never blur into brand chrome. Every text/UI pairing below is WCAG-verified (ratios in the theme guide). ============================================================================ */ :root { /* ---- 1. BRAND PRIMITIVES (raw, do not use directly in components) ------- */ --bs-red: #D0333A; /* primary identity / logo / primary action */ --bs-red-600: #B22A30; /* hover */ --bs-red-700: #8F2126; /* active / pressed */ --bs-yellow: #FDDE00; /* brand surface yellow (dark text ONLY) */ --bs-gold: #FFD700; /* gold accent */ --bs-cyan: #03A6E1; /* brand cyan — fills/charts/large decorative */ --bs-cyan-600: #0288C0; /* focus ring / hover */ --bs-cyan-700: #026B96; /* link & accent TEXT (cyan fails as text) */ --bs-black: #16181D; /* near-black for chrome & headlines */ /* ---- 2. NEUTRAL SCALE (light theme canvas) ------------------------------ */ --neutral-0: #FFFFFF; --neutral-50: #F7F8FC; --neutral-100: #F1F3F7; --neutral-200: #E5E7EC; --neutral-300: #CBD0D8; --neutral-400: #9AA1AD; --neutral-500: #6B7280; --neutral-600: #4B515C; --neutral-700: #2E333B; --neutral-900: #16181D; /* ---- 3. SEMANTIC SURFACES & TEXT (use THESE in components) -------------- */ --color-bg: var(--neutral-50); /* app ground */ --color-surface: var(--neutral-0); /* cards / tiles */ --color-surface-2: var(--neutral-100); /* table stripe / subtle panel */ --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); --color-text: var(--neutral-900); /* body (16.7:1 on --color-bg) */ --color-text-secondary:var(--neutral-500); /* labels (4.8:1 on surface) */ --color-text-muted: var(--neutral-400); /* non-essential only */ --color-text-inverse: #FFFFFF; /* ---- 4. BRAND ROLES ----------------------------------------------------- */ --color-brand: var(--bs-red); /* primary action / identity */ --color-brand-hover: var(--bs-red-600); --color-brand-active: var(--bs-red-700); --color-on-brand: #FFFFFF; /* text on red (4.98:1) */ --color-accent: var(--bs-cyan-700); /* links / accent TEXT (5.9:1) */ --color-accent-hover: var(--bs-cyan-600); --color-accent-fill: var(--bs-cyan); /* cyan as a FILL only */ --color-highlight: var(--bs-yellow); /* sparing: brand stripe/marker */ --color-on-highlight: var(--neutral-900); /* dark text on yellow (13.2:1) */ --focus-ring: var(--bs-cyan-600); /* visible ring (3.97:1) */ /* ---- 4b. APP CHROME ----------------------------------------------------- */ --color-header: var(--bs-cyan-700); /* brand blue = deepened cyan */ --color-header-fg: #FFFFFF; /* white on header (5.92:1) */ --color-header-muted: #EAF7FC; /* eyebrow / meta on header */ --color-header-rule: var(--color-highlight); /* 3px yellow identity rule */ --color-header-overlay: rgba(255, 255, 255, 0.14); --color-header-overlay-strong: rgba(255, 255, 255, 0.28); --color-header-border: rgba(255, 255, 255, 0.72); --color-selected: var(--color-brand); /* active tab/toggle = brand red */ --color-on-selected: #FFFFFF; /* white on red (4.98:1) */ /* KPI delta colours — by request these use the BRAND hue, not muted status. */ --delta-up: var(--status-success-fg); /* positive (green) */ --delta-down: var(--color-brand); /* negative = brand red */ --delta-flat: var(--color-text-muted); /* flat */ /* ---- 5. STATUS (separated from brand; ALWAYS pair with an icon + label) - */ --status-success: #1B8A5A; --status-success-bg: #E4F3EB; --status-success-fg: #146B43; /* on success-bg, 5.7:1 */ --status-warning: #E07B00; /* ORANGE amber — NOT brand yellow */ --status-warning-bg: #FBEBD6; --status-warning-fg: #9A5400; /* on warning-bg, 4.93:1 */ --status-critical: #C62828; /* alert red — NEVER used as brand chrome */ --status-critical-bg: #FBE7E8; --status-critical-fg: #9E1C24; /* on critical-bg, 6.69:1 */ --status-info: var(--bs-cyan-700); --status-info-bg: #E1F2FB; --status-info-fg: #036A92; /* on info-bg, 5.26:1 */ /* ---- 6. CHART — CATEGORICAL (semantic-free 1–6; brand emphasis last) ---- */ --chart-1: #03A6E1; /* brand cyan */ --chart-2: #2D3A5E; /* indigo */ --chart-3: #7B61A8; /* purple */ --chart-4: #0E9C8C; /* teal */ --chart-5: #C77D11; /* bronze */ --chart-6: #5B6B7A; /* slate */ --chart-7: #D0333A; /* brand red — emphasis series ONLY (reads as "bad") */ --chart-8: #9AA5B1; /* grey — "other/remainder" */ /* ---- 7. CHART — SEQUENTIAL (cyan ramp: e.g. revenue intensity, geo) ----- */ --seq-1: #E1F2FB; --seq-2: #BCE3F5; --seq-3: #8FD0EE; --seq-4: #56B7E6; --seq-5: #03A6E1; --seq-6: #0381B4; --seq-7: #025C80; /* ---- 8. CHART — DIVERGING (SSSG +/-: red ← neutral → green) ------------- */ --div-neg-2: #B0121E; --div-neg-1: #E8767C; --div-mid: #F1F3F7; --div-pos-1: #6FC79B; --div-pos-2: #146B43; --div-neg-fg: #5F1217; --div-mid-fg: var(--neutral-900); --div-pos-fg: #0B4F31; /* ---- 8b. METRIC INTENSITY SURFACES -------------------------------------- */ --metric-heat-pos-bg: var(--status-success-bg); --metric-heat-mid-bg: var(--status-warning-bg); --metric-heat-neg-bg: var(--status-critical-bg); --metric-heat-pos-fg: var(--status-success-fg); --metric-heat-mid-fg: var(--status-warning-fg); --metric-heat-neg-fg: var(--status-critical-fg); /* ---- 8c. SHARED OVERLAYS ------------------------------------------------ */ --overlay-scrim: rgba(22, 24, 29, 0.38); --overlay-modal: rgba(22, 24, 29, 0.20); --overlay-surface-strong: rgba(255, 255, 255, 0.90); --overlay-cell-inset: rgba(255, 255, 255, 0.28); --overlay-marker-outline: rgba(22, 24, 29, 0.18); /* ---- 9. TYPOGRAPHY ------------------------------------------------------ */ /* Load via in template head (see guide). Anton = condensed display (section titles, app name, big static KPI labels). Nunito = all body, tables, and data. Numeric data MUST use tabular figures. */ --font-display: 'Anton', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-numeric: 'Nunito', system-ui, sans-serif; /* + font-variant-numeric: tabular-nums */ /* 2026-09-01: x0.75 of original spec, same factor and same reasoning as invus-theme.css's token block - see the comment above html{} in that file. Kept in lockstep with invus-theme.css's --invus-* equivalents (identical px values) since components draw from both systems. */ --fs-display: 1.875rem; --lh-display: 1.05; /* was 2.5rem */ --fs-h1: 1.3125rem; --lh-h1: 1.15; /* was 1.75rem */ --fs-h2: 1.03125rem; --lh-h2: 1.2; /* was 1.375rem */ --fs-h3: 0.84375rem; --lh-h3: 1.3; /* was 1.125rem */ --fs-body: 0.703125rem; --lh-body: 1.5; /* was 0.9375rem (15px) */ --fs-sm: 0.609375rem; --lh-sm: 1.45; /* was 0.8125rem (13px) */ --fs-xs: 0.515625rem; --lh-xs: 1.4; /* was 0.6875rem (11px) */ --fw-regular: 400; --fw-medium: 600; --fw-bold: 700; /* ---- 10. RADIUS / SHADOW / SPACE / MOTION ------------------------------- */ --radius-sm: 3px; /* was 4px */ --radius-md: 6px; /* was 8px */ --radius-lg: 9px; /* was 12px */ --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(22,24,29,.06); --shadow-card: 0 1px 3px rgba(22,24,29,.08), 0 1px 2px rgba(22,24,29,.04); --shadow-pop: 0 8px 24px rgba(22,24,29,.12); --space-1: 3px; --space-2: 6px; --space-3: 9px; --space-4: 12px; /* was 4/8/12/16px */ --space-5: 18px; --space-6: 24px; --space-7: 36px; --space-8: 48px; /* was 24/32/48/64px */ --transition-fast: 120ms ease; --transition-base: 200ms ease; } /* Respect reduced-motion as a quality floor */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }