/* ═══════════════════════════════════════════════════════════════════════════ moneyed — design tokens ─────────────────────────────────────────────────────────────────────────── Loaded FIRST, before style.css and marketing.css. Scope is deliberately narrow. This file only DEFINES WHAT IS MISSING and FIXES WHAT IS BROKEN. It does not re-declare tokens that style.css:2-33 or marketing.css:35-103 already own, because both of those load after this one and would win anyway — and because silently changing a value those files depend on is how you break 6,592 lines of CSS you cannot see. Two token systems exist today and neither references the other: style.css:2-33 colours only, and it is what the page renders from marketing.css:35-103 has the spacing/radius/type scales, but its base rules target .marketing-layer-*-placeholder — class names present in no HTML file — so those scales reach almost nothing. New work (v2.html and the CIBIL screen) should use the canonical names in Part 3 below. Existing files keep working untouched. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── PART 1 — BUG FIXES Variables that are referenced across the codebase but never defined anywhere, or defined only behind a theme selector. ─────────────────────────────────────────────────────────────────────────── */ :root { /* --bg-color is read at index.html:778 (the blog / credit-card section background) and at style.css:4081, 4447, 5319, 6527. It is defined in no file. Where a fallback was written it silently wins; where one was not, the background resolves to transparent. */ --bg-color: #F0FFFA; /* --border-color is read at index.html:3088 and 3098 and defined nowhere. */ --border-color: rgba(8, 92, 58, 0.15); /* --neon-green is declared ONLY inside [data-theme="dark"] (style.css:3386) yet is referenced 13x in style.css and from light-mode-reachable inline styles (index.html:2752, 3178). In light mode those declarations are invalid and the property falls back to whatever it inherits. Declaring it here in :root gives light mode a real value. The dark block in style.css carries !important, so dark continues to win. */ --neon-green: #18C979; } [data-theme="dark"] { --bg-color: #121212; --border-color: rgba(255, 255, 255, 0.08); } /* ─────────────────────────────────────────────────────────────────────────── PART 2 — TYPOGRAPHY --font-sans previously asked for 'Inter', a face index.html never loads, so every rule using it fell back silently to -apple-system. Fixed at source in marketing.css:62 rather than re-declared here: marketing.css loads after this file and would win the cascade anyway. ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── PART 3 — CANONICAL SCALE The scales marketing.css defined but never delivered, restated here so they apply site-wide. New components should use these names. ─────────────────────────────────────────────────────────────────────────── */ :root { /* Brand — unchanged. Two greens exist as raw hex across the codebase: #18C979 (the token) and #1FA463 (~30 hardcoded uses in dark rules). #18C979 is canonical; #1FA463 is recorded so the difference is visible rather than accidental. */ --mn-green: #18C979; --mn-green-alt: #1FA463; --mn-green-deep: #085C3A; --mn-green-darkest:#052e1c; --mn-green-tint: rgba(24, 201, 121, 0.10); --mn-green-line: rgba(24, 201, 121, 0.26); /* Semantic — kept separate from the brand accent so a green brand and a "good" state never have to mean the same thing. */ --mn-good: #18C979; --mn-warn: #C2610C; --mn-danger: #C0392B; --mn-info: #1D6FA4; /* Spacing — 4px base */ --mn-1: .25rem; --mn-2: .5rem; --mn-3: .75rem; --mn-4: 1rem; --mn-5: 1.25rem; --mn-6: 1.5rem; --mn-8: 2rem; --mn-10: 2.5rem; --mn-12: 3rem; --mn-16: 4rem; --mn-20: 5rem; --mn-24: 6rem; /* Radius */ --mn-r-sm: .5rem; --mn-r-md: .75rem; --mn-r-lg: 1rem; --mn-r-xl: 1.375rem; --mn-r-full: 9999px; /* Elevation. NOTE: --shadow-hover is declared in BOTH style.css:16 and marketing.css:59. marketing.css loads last, so its value currently wins for every rule in style.css that uses it. That conflict is left alone deliberately — resolving it changes how the live site looks today, which belongs in a section-by-section pass, not a token file. */ --mn-sh-1: 0 2px 8px rgba(5, 46, 28, .05); --mn-sh-2: 0 8px 24px rgba(5, 46, 28, .08); --mn-sh-3: 0 18px 50px rgba(5, 46, 28, .11); /* Type scale */ --mn-t-xs: .6875rem; --mn-t-sm: .75rem; --mn-t-base: .875rem; --mn-t-md: 1rem; --mn-t-lg: 1.125rem; --mn-t-xl: 1.375rem; --mn-t-2xl: 1.625rem; --mn-t-3xl: 2rem; --mn-t-4xl: 2.5rem; /* Motion */ --mn-fast: 150ms ease; --mn-base: 250ms ease; --mn-slow: 400ms ease; --mn-spring: 500ms cubic-bezier(.34, 1.2, .64, 1); /* Breakpoints — recorded as tokens for reference only. CSS cannot read a custom property inside a media query; these exist so every new @media uses one of four widths instead of adding to the fifteen now in use (style.css alone has 28 queries across 13 distinct widths). */ --mn-bp-xl: 1440px; --mn-bp-lg: 1024px; --mn-bp-md: 768px; --mn-bp-sm: 480px; /* ── Ink ramp ────────────────────────────────────────────────────────── The CIBIL result screen wrote its muted text and its rules as literal rgba(255,255,255,…) inside JS template strings — white ink, no theme guard. In light mode every "Lender not named in report", every zebra stripe and every row rule rendered white on white, i.e. invisible. These four ink steps plus rule/wash replace those literals so the same markup reads correctly on either ground. */ --mn-ink-1: rgba(10, 22, 17, .92); /* near-primary text */ --mn-ink-2: rgba(10, 22, 17, .70); /* secondary text */ --mn-ink-3: rgba(10, 22, 17, .50); /* muted labels */ --mn-ink-4: rgba(10, 22, 17, .36); /* placeholders, em-dashes, ₹0 */ --mn-rule: rgba(10, 22, 17, .12); /* table and cell borders */ --mn-wash: rgba(10, 22, 17, .035); /* zebra stripe, surface tint */ /* ── Severity ladder ─────────────────────────────────────────────────── A delinquency is not one colour. The old table had three states — clean, "dpd", settled — so a single 5-day slip was painted the same amber as a 200-day default, and a written-off account no darker than a late one. Five steps, three of them red, each darker than the last, so severity reads from the colour alone before any number is compared. */ --sev-0: #0E9F5F; --sev-0-bg: rgba(24, 201, 121, .10); /* clean */ --sev-1: #C2551F; --sev-1-bg: rgba(226, 112, 58, .13); /* 1-29 days */ --sev-2: #B02725; --sev-2-bg: rgba(198, 47, 47, .15); /* 30-89 days */ --sev-3: #8E1616; --sev-3-bg: rgba(142, 22, 22, .19); /* 90+ / NPA */ --sev-4: #5C0A0A; --sev-4-bg: rgba(92, 10, 10, .26); /* WO / settled */ --sev-none: #6B7B72; --sev-none-bg: rgba(107, 123, 114, .10); /* not reported */ /* Frosted surface for sticky bars that float over content. This is a BACKGROUND, not ink — the two were briefly confused, which painted the report's action bar near-black under dark-green text. */ --mn-glass: rgba(255, 255, 255, .92); } [data-theme="dark"] { --mn-green-tint: rgba(24, 201, 121, .13); --mn-green-line: rgba(24, 201, 121, .30); --mn-warn: #F0A040; --mn-danger:#FF7A72; --mn-info: #93C5FD; --mn-sh-1: 0 2px 8px rgba(0, 0, 0, .40); --mn-sh-2: 0 8px 24px rgba(0, 0, 0, .50); --mn-sh-3: 0 18px 50px rgba(0, 0, 0, .55); /* Dark keeps the values the screen already shipped with, so nothing that currently looks right in dark mode changes. */ --mn-ink-1: rgba(255, 255, 255, .90); --mn-ink-2: rgba(255, 255, 255, .62); --mn-ink-3: rgba(255, 255, 255, .40); --mn-ink-4: rgba(255, 255, 255, .28); --mn-rule: rgba(255, 255, 255, .08); --mn-wash: rgba(255, 255, 255, .03); /* Dark ground needs the reds lifted or the worst two steps go black-on-black. The ordering is preserved: each step still reads darker than the one above. */ --sev-0: #3DDC97; --sev-0-bg: rgba(24, 201, 121, .16); --sev-1: #FF9B5A; --sev-1-bg: rgba(255, 155, 90, .16); --sev-2: #FF6B62; --sev-2-bg: rgba(255, 107, 98, .18); --sev-3: #E8433C; --sev-3-bg: rgba(232, 67, 60, .24); --sev-4: #B32222; --sev-4-bg: rgba(179, 34, 34, .34); --sev-none: #8FA399; --sev-none-bg: rgba(143, 163, 153, .12); --mn-glass: rgba(12, 31, 20, .92); }