/* =================================================================== finchaya.css -- one stylesheet for every page. =================================================================== WHY THIS FILE EXISTS Seven pages each carried their own copy of the tokens. Changing a colour meant editing seven files and finding out later which one was missed. Everything visual lives here now. THE AUDIENCE Investors in their twenties and thirties, mostly on a phone. That leads somewhere less obvious than it sounds: not dark mode and neon, which is the default costume for this audience and reads as a product with something to sell. The apps that actually won this market in India are light, fast and plain. Scepticism about being sold to is the defining trait, and a quiet interface where the numbers are the loudest thing is what answers it. THE RULES Colour carries meaning, never decoration. Green is a positive figure or an action; red is a negative one; amber marks the single thing worth noticing on a page. Nothing is tinted for looks. Numbers are set larger than the words describing them. On every page the data is the design. Mobile is the layout, not the fallback. Below 640px table rows become stacked cards -- a table that needs sideways scrolling on a phone is a table nobody reads. The proportion bar is the signature. It is the one thing here no competitor has, so it is big and it comes first. =================================================================== */ :root{ /* The page is grey-green; cards are white and lift off it. White on white gave every block the same depth, which is why the page read as a stylesheet rather than a composition. */ --bg:#f2f6f4; --card:#ffffff; --surface:#f4f8f6; --surface-2:#e8f0ec; --line:#e6ecea; --line-firm:#cbd8d3; --shadow:0 1px 2px rgba(16,40,34,.05),0 6px 20px rgba(16,40,34,.06); --shadow-lg:0 2px 4px rgba(16,40,34,.06),0 14px 40px rgba(16,40,34,.10); --ink:#0e1b17; /* near-black with green in it, not pure black */ --ink-2:#3d4f49; --muted:#6b7d77; --brand:#0f7a56; /* actions, and anything positive */ --brand-deep:#0b4f39; /* headers and the dark strip */ --brand-dark:#0c6244; --brand-wash:#e3f3ec; --neg:#d64545; --neg-wash:#fdeeee; --note:#e0952b; /* the one thing worth noticing */ --note-wash:#fdf4e5; /* Proportion-bar palette. Fixed, because the same colour must mean the same thing on every page a reader sees. */ --c-large:#00875a; --c-mid:#e0952b; --c-small:#d64545; --c-debt:#5b7f75; --c-gold:#c9a227; --c-intl:#4a7fb5; --c-none:#dfe5e2; --r-card:16px; --r:10px; --r-sm:6px; --s1:6px; --s2:12px; --s3:20px; --s4:32px; --s5:48px; --font:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue",Arial,sans-serif; } /* ------------------------------------------------------------------- Names the older pages already use. Seven pages were built before this file existed, each with its own token block. Rather than rewrite seven stylesheets by hand -- and get one of them subtly wrong -- their names are mapped onto these values. Every page changes appearance together, and nothing has to be found and edited twice. This file is linked AFTER each page's own