/* ═══════════════════════════════════════════════════════════════════════════ MONEYED — FOUNDATION The single source of truth for colour, type, space, shape and motion. WHY THIS FILE EXISTS An audit on 10 Oct 2026 of the 13 stylesheets found: 144 distinct greens, 253 hex colours, 96 font sizes, 49 radii, 104 shadows, 16 easing curves, 337 !important declarations, and 8 separate files each declaring their own :root with 209 custom properties between them. Five different tokens were named some variant of "green". No designer chooses 144 greens. That number is what makes the site read as assembled rather than designed, and it is why edits kept being silently overridden by a competing rule elsewhere. HOW TO USE IT This file ADDS the --mo-* scale. It deliberately does NOT alias the 209 existing properties, because many are redefined under [data-theme="dark"] and a blind remap would break dark mode in ways no single pass could verify. Migration is per-file and verified per-file. New work -> use --mo-* only. Touching old CSS -> replace the local token with its --mo-* equal. Never -> add a new raw hex, or a sixth green. The palette is accessible by construction: every token that may carry text states its measured contrast. Those numbers were computed, not estimated. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Brand green ────────────────────────────────────────────────────────── One scale. The contrast figures are against white (light UI) and against --mo-ink-900 (dark UI). A token marked DECORATIVE must never carry body text on a light ground: #18C979 is the signature mint but only 2.17:1 on white, which is why the founder line was unreadable before. */ --mo-green-900: #052E1C; /* 14.85 on white — darkest ground */ --mo-green-800: #085C3A; /* 8.07 on white — headings, strong text */ --mo-green-700: #087443; /* 5.85 on white — BODY TEXT, links, focus */ --mo-green-600: #1A7A4A; /* 5.35 on white — body text alternative */ --mo-green-500: #1FA463; /* 3.21 white / 5.60 dark — borders, icons */ --mo-green-400: #18C979; /* 2.17 white / 8.27 dark — DECORATIVE, dark-mode text */ --mo-green-300: #3DDC97; /* 1.77 white /10.16 dark — DECORATIVE */ --mo-green-200: #A9E7CE; /* DECORATIVE — fills, chart bands */ --mo-green-100: #E4F3EA; /* tint ground */ --mo-green-050: #F2F9F5; /* faintest ground */ /* ── Neutrals ───────────────────────────────────────────────────────────── Biased very slightly green so they sit with the brand instead of reading as a separate grey system. */ --mo-ink-900: #0A1A12; --mo-ink-700: #1E2E26; --mo-ink-500: #4A6358; --mo-ink-400: #6B8277; --mo-ink-300: #8FA89B; --mo-ink-200: #C8DECE; --mo-ink-100: #E7EFEA; --mo-ink-050: #F5FAF7; --mo-white: #FFFFFF; /* ── Semantic ───────────────────────────────────────────────────────────── Separate from the brand accent, so "good" never has to borrow the brand green and lose its meaning. Each is text-safe on a light ground. */ /* ── THE NEUTRALS ARE GREEN-TINTED ON PURPOSE ────────────────────── 9 Nov 2026, Nakul: "jaisa brand banne mein help kare, usse use karo." The brand sheet (MONEYED_BRAND_PALETTE MAIN.txt) declares five supporting UI colours this file does not use: Brick Red #A83B46, Baby Pink #F9DEE7, Muted Gold #AD8B47, Cool Silver #C6CED4 and Espresso Brown #49342D. Each one's JOB is already done here, in a green-biased version: borders are #C8DECE not #C6CED4, body text is #0A1A12 not #49342D, errors are #B3261E not #A83B46. NOT ADOPTING THEM IS THE DECISION, not an oversight. The green bias in the neutrals is what makes a Moneyed screen read as one system instead of a green logo dropped on a grey admin panel. Adopting neutral and warm equivalents would pull the whole interface off that bias for no gain, and half-adopting them would be worse than either. What actually damages the brand is measured and guarded elsewhere: 685 distinct colours ship and 642 of them are on no palette at all. tools/test-palette-drift.py is the ratchet that stops that growing. */ --mo-good: #137B4D; /* 5.29 on white, 4.72 on its own tint */ --mo-warn: #AF511A; /* 5.23 on white, 4.63 on its own tint */ --mo-bad: #B3261E; /* 6.17 on white, 5.62 on its own tint */ --mo-info: #1C5FA8; /* 6.15 on white, 5.63 on its own tint */ --mo-good-bg:#E8F5EE; --mo-warn-bg:#FBEFE6; --mo-bad-bg: #FBEAE9; --mo-info-bg:#E9F0F9; /* ── Type ───────────────────────────────────────────────────────────────── Eight steps on a ~1.22 ratio, replacing 96 ad-hoc sizes. If a design needs a ninth, the design is wrong. */ --mo-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mo-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --mo-t-xs: 11px; --mo-t-sm: 13px; --mo-t-md: 15px; --mo-t-lg: 18px; --mo-t-xl: 22px; --mo-t-2xl: 28px; --mo-t-3xl: 38px; --mo-t-4xl: 52px; --mo-lh-tight: 1.18; --mo-lh-snug: 1.4; --mo-lh-body: 1.65; --mo-w-normal: 500; --mo-w-semi: 600; --mo-w-bold: 700; --mo-w-black: 800; --mo-track-tight: -0.02em; --mo-track-caps: 0.08em; /* ── Space — a 4px grid, replacing arbitrary margins ──────────────────── */ --mo-s1: 4px; --mo-s2: 8px; --mo-s3: 12px; --mo-s4: 16px; --mo-s5: 24px; --mo-s6: 32px; --mo-s7: 48px; --mo-s8: 64px; --mo-s9: 96px; /* ── Shape — four radii, replacing 49 ─────────────────────────────────── */ --mo-r-sm: 8px; --mo-r-md: 12px; --mo-r-lg: 18px; --mo-r-full: 999px; /* ── Elevation — three, replacing 104. Depth is for things that genuinely float; a card that merely groups content gets a border, not a shadow, which is what was flattening the hierarchy. ─────────────────────── */ --mo-e1: 0 1px 2px rgba(10,26,18,.06), 0 2px 8px rgba(10,26,18,.04); --mo-e2: 0 4px 12px rgba(10,26,18,.08), 0 12px 32px rgba(10,26,18,.07); --mo-e3: 0 12px 28px rgba(10,26,18,.12), 0 32px 64px rgba(10,26,18,.12); /* ── Motion — one language, replacing 16 curves ─────────────────────────── standard : everything that moves between two resting states entrance : things arriving, slightly slower out of the gate Durations are deliberately few. Anything over 420ms feels broken on a phone; anything under 120ms is not perceived as motion at all. */ --mo-ease: cubic-bezier(.4, 0, .2, 1); --mo-ease-enter: cubic-bezier(.22, .9, .3, 1); --mo-d-fast: 140ms; --mo-d-base: 240ms; --mo-d-slow: 400ms; /* ── Layout ───────────────────────────────────────────────────────────── */ --mo-measure: 68ch; /* readable line length */ --mo-container: 1136px; --mo-gutter: max(16px, calc((100vw - var(--mo-container)) / 2)); /* ── Surfaces: semantic aliases the components actually reference, so a theme switch only has to redefine these six. ─────────────────────── */ --mo-bg: var(--mo-ink-050); --mo-surface: var(--mo-white); --mo-surface-2: var(--mo-green-050); --mo-line: var(--mo-ink-200); --mo-text: var(--mo-ink-900); --mo-text-soft: var(--mo-ink-500); --mo-accent: var(--mo-green-700); /* text-safe on light */ --mo-accent-dec:var(--mo-green-400); /* decorative only */ } /* Dark. Only the six surface aliases and the accent flip; the scale itself never changes, so a colour cannot mean one thing in light and another in dark. The guard lets an explicit light choice beat a dark OS. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --mo-bg: var(--mo-ink-900); --mo-surface: #10271E; --mo-surface-2: #153024; --mo-line: #2E4A3C; --mo-text: #F0FAF4; --mo-text-soft: #B8D9C7; --mo-accent: var(--mo-green-400); /* 8.27 on the dark ground */ /* Semantic colours need dark variants too. The light set is tuned for white grounds (#AF511A is 5.23 on white) and drops to 2.71 on the dark surface — which is exactly how the "cost of waiting" figure came out unreadable in dark mode. These are measured against both dark surfaces. */ --mo-good: #5AA382; /* 4.73 on surface-2, 5.26 on surface */ --mo-warn: #C7855F; /* 4.69 / 5.22 */ --mo-bad: #D17D78; /* 4.67 / 5.20 */ --mo-info: #6E99C7; /* 4.76 / 5.29 */ --mo-good-bg:#16341F; --mo-warn-bg:#36241A; --mo-bad-bg: #3A1F1E; --mo-info-bg:#1B2A3C; --mo-accent-dec:var(--mo-green-300); } } :root[data-theme="dark"]{ --mo-bg: var(--mo-ink-900); --mo-surface: #10271E; --mo-surface-2: #153024; --mo-line: #2E4A3C; --mo-text: #F0FAF4; --mo-text-soft: #B8D9C7; --mo-accent: var(--mo-green-400); --mo-accent-dec:var(--mo-green-300); --mo-good: #5AA382; --mo-warn: #C7855F; --mo-bad: #D17D78; --mo-info: #6E99C7; --mo-good-bg:#16341F; --mo-warn-bg:#36241A; --mo-bad-bg: #3A1F1E; --mo-info-bg:#1B2A3C; } /* One global motion kill-switch. Every --mo- duration collapses, so a component never has to remember to handle reduced motion itself. */ @media (prefers-reduced-motion: reduce){ :root{ --mo-d-fast: 1ms; --mo-d-base: 1ms; --mo-d-slow: 1ms; } }