/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #020f0c #132420 #f5faf8 #0b6b57 #0d725e #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f5faf8; --surface: #fbfdfc; --surface-2: #e9eeec; --border: #d3d9d7; --border-strong: #acb4b1; --ink: #132420; --muted: #5c6764; --accent: #0b6b57; --accent-hover: #095b4a; --accent-ink: #ffffff; --accent-text: #0d725e; --accent-strong: #0b6b57; --accent-soft: #d4e6e1; --accent-border: #8cbab0; --success: #15803d; --success-ink: #ffffff; --success-soft: #daebe2; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ede6db; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #eedfde; --danger-strong: #b91c1c; --chart-1: #0b6b57; --chart-2: #187fab; --chart-3: #523a8c; --chart-4: #a74b75; --chart-5: #763b08; --chart-6: #73790c; --font-display: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.08em; --look: corporate; --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-btn: 6px; --radius-card: 8px; --radius-input: 6px; --border-w: 1px; --border-strong-w: 2px; --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); --shadow-raised: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent); --shadow-btn: none; --section-y: 5rem; --card-pad: 1.5rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 600; --measure: 65ch; } /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #020f0c; --surface: #1b2724; --surface-2: #0f1b18; --border: #25312e; --border-strong: #4e5755; --ink: #f5faf8; --muted: #949c9a; --accent: #0b6b57; --accent-hover: #308170; --accent-ink: #ffffff; --accent-text: #5e9d90; --accent-strong: #509586; --accent-soft: #04231d; --accent-border: #06382e; --success: #15803d; --success-ink: #ffffff; --success-soft: #062817; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #291e0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2a1210; --danger-strong: #d16969; --chart-1: #277d68; --chart-2: #2292c3; --chart-3: #846fc6; --chart-4: #bb5d87; --chart-5: #bb6729; --chart-6: #858c17; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* The Financial Plan report (views/report.ts) is its own printable document. Hide the on-screen-only controls when it is actually printed or saved as a PDF, and let each section break cleanly across pages. */ @media print { .no-print { display: none !important; } .report-page { max-width: none !important; padding: 0 !important; } .report-page section, .report-page .card { break-inside: avoid; box-shadow: none !important; } } /* ==================================================================== * COLUMNAR STAT ROWS (views/stat.ts) — every rupee figure in this app, * replacing the frozen .stat-card/.stat-value component entirely. A full * Indian-format amount (₹2,70,82,610) at that component's own display size * ran past the edge of a narrow card and printed over its own label, on * screen and in the PDF report alike. Plain text in a label/value row never * has that failure — it just wraps — and reads as a proper statement rather * than a row of boxes. * ==================================================================== */ .stat-cols { display: grid; gap: 0 var(--s-8, 2rem); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .stat-col { display: flex; flex-direction: column; min-width: 0; } .stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); } .stat-col > .stat-row:last-child { border-bottom: none; } .stat-row-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); flex-shrink: 0; } .stat-row-value { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); text-align: right; overflow-wrap: break-word; min-width: 0; } /* ==================================================================== * THE CHAT JOURNEY (views/chat.ts) — the WhatsApp-style onboarding: a * scrolling thread of bot/visitor bubbles, and a single-question composer * pinned under it. Tokens only; the accent carries the visitor's own * bubbles and the send button, exactly as it would a primary button. * ==================================================================== */ .chat-page { max-width: 40rem; margin-inline: auto; } .chat-shell { display: flex; flex-direction: column; gap: 1rem; } .chat-progress { height: 0.35rem; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .chat-progress-bar { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur-2, 300ms) var(--ease, ease); } .chat-thread { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.5rem 0.25rem 1rem; } .chat-row { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 88%; } .chat-row-bot { align-self: flex-start; } .chat-row-user { align-self: flex-end; justify-content: flex-end; margin-left: auto; } .chat-row-aside { opacity: 0.85; } .chat-avatar { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); flex-shrink: 0; } .chat-avatar-lg { width: 3rem; height: 3rem; } .chat-bubble { padding: 0.65rem 1rem; border-radius: var(--radius-lg); font-size: 0.95rem; line-height: 1.45; box-shadow: var(--shadow); } .chat-bubble-bot { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 0.25rem; } .chat-bubble-aside { background: transparent; border: none; box-shadow: none; color: var(--muted); font-size: 0.85rem; padding-top: 0; } .chat-bubble-error { color: var(--danger-text); } .chat-bubble-user { background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 0.25rem; } .chat-composer { position: sticky; bottom: 0.75rem; background: var(--canvas); padding-top: 0.5rem; } .chat-quick-replies { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chat-chip { cursor: pointer; } .chat-chip-outline { background: transparent; } .chat-input-row { display: flex; align-items: center; gap: 0.5rem; } .chat-input { flex: 1; border-radius: var(--radius-pill); } .chat-send { border-radius: var(--radius-pill); flex-shrink: 0; } .chat-done { padding-top: 0.5rem; } .chat-footnote { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }