/* ========================================================================== MyKhata360 — MODERN THEME LAYER ("Modern Ledger Narrative") -------------------------------------------------------------------------- A SCOPED override of the --mk-* base, applied only inside `.mk-theme-modern`. Five products opt into it today and none of them owns it: .pf-theme Personal Finance (100) — consumer money app .garment-theme Garment Shop (4) — size/colour retail .cycle-theme Cycle Shop (27) .hotel-theme Hotels / Lodges (53) .restaurant-theme Restaurant (13) Each shell emits `mk-theme-modern` alongside its own identity class, so this sheet re-themes all of them while each keeps a hook for its own extras (the .pf-* component classes at the bottom of this file are PF's). They wear the same codebase as the other 45 business verticals and want different clothes: those verticals are a warm espresso ledger, these are a cool "digital vault". WHY A SCOPE AND NOT A FORK -------------------------- Every themed page reads var(--mk-*) rather than hardcoding hexes (that retrofit is what ~2,600 replacements bought for PF, and a further ~700 for the garment surface). So redefining those same token NAMES under one class re-themes every one of those screens without touching a single page. Anything that still looks wrong after this file is a page that hardcoded a literal — fix the page, not this sheet. Base tokens NOT listed here are inherited from design-tokens.css unchanged. That is deliberate: motion, breakpoints, the type ramp and the spacing scale are structural, not thematic, and PF has no reason to diverge. THE TWO-COLOR RULE (from the design system's "Colors" section) ------------------------------------------------------------- Deep navy is STRUCTURE — headings, icons, nav chrome, progress fills. Brand orange is ACTION — the FAB, the active tab, primary CTAs. Nothing else. The moment orange starts labelling non-actionable things it stops reading as "tap me", which is the failure mode the warm-espresso hero was already introduced to avoid on the business side. Loaded AFTER design-tokens.css. It wins on specificity (.mk-theme-modern beats :root) regardless of order, but keep it late so intent stays legible. ========================================================================== */ .mk-theme-modern { /* ====================================================================== 1. BRAND — navy structure, orange action `--mk-primary` stays the ACTION handle so every existing StackButton, focus ring and CTA in PF keeps working untouched; it just moves from #F97316 to the design system's slightly warmer #fd761a. The navy gets its own name rather than stealing --mk-primary, because hundreds of call sites already mean "the tappable colour" when they say primary. ====================================================================== */ --mk-pf-ink: #041627; /* deep navy — headings, icons, structure */ --mk-pf-ink-2: #1a2b3c; /* one step up — filled icon chips */ --mk-pf-ink-3: #38485a; /* text on a light navy tint */ --mk-pf-ink-soft: #8192a7; /* navy at reading weight on dark */ --mk-pf-ink-tint: #d2e4fb; /* light navy fill — chips, progress track */ --mk-primary: #fd761a; --mk-primary-hover: #e56514; --mk-primary-ink: #9d4300; /* AA-safe on white: links + body-size text */ --mk-primary-lt: #ffdbca; --mk-primary-lt-2: #ffb690; --mk-primary-border: #ffb690; --mk-primary-muted: #e1c29b; --mk-primary-deep: #5c2400; /* The raw ramp, not just the semantic handles. Page markup reaches past --mk-primary straight into --mk-orange-dark / -300 / -900 for gradient partners and tint fills; leaving the ramp at its base values meant a PF gradient started on the new orange and ended on the old one. */ --mk-orange-50: var(--mk-primary-lt); --mk-orange-100: var(--mk-primary-lt-2); --mk-orange-200: var(--mk-primary-border); --mk-orange-300: var(--mk-primary-muted); --mk-orange-400: #ffb690; --mk-orange-500: var(--mk-primary); --mk-orange-600: var(--mk-primary-hover); --mk-orange-700: var(--mk-primary-ink); --mk-orange-900: var(--mk-primary-deep); --mk-orange: var(--mk-primary); --mk-orange-hi: var(--mk-primary-hover); --mk-orange-ink: var(--mk-primary-ink); --mk-orange-lt: var(--mk-primary-lt); /* Gradient partner for --mk-primary. Deliberately DARKER than primary here: on the base palette this name means "lifted for dark surfaces", but every PF call site uses it as the far end of a light-mode CTA gradient, where a lighter partner washes the button out. */ --mk-orange-dark: var(--mk-primary-hover); /* Text/link handles follow the action colour, per the base file's contract. */ --mk-text-link: var(--mk-primary-ink); --mk-focus: var(--mk-primary); --mk-focus-ring: 0 0 0 3px rgba(253, 118, 26, .18); /* ====================================================================== 2. SURFACES — tonal layering, not shadows Light mode is a layered cool-white: a blue-tinted canvas with pure-white cards sitting on it. The difference between #f8f9ff and #ffffff is only ~2%, which is the point — depth comes from the 1px border plus a very soft shadow, not from a contrast step the eye reads as a second colour. ====================================================================== */ --mk-bg-app: #f8f9ff; /* content canvas */ --mk-bg-surface: #ffffff; /* cards, sheets, tab bar */ --mk-bg-subtle: #eff4ff; /* row hover, input prefix */ --mk-bg-container: #e6eeff; /* icon chips, avatar wells */ --mk-bg-container-2:#dee9fc; /* one step up */ --mk-bg-container-3:#d9e3f6; /* progress tracks, inert fills */ /* The top bar. Glassmorphism is reserved for sticky navigation ONLY — it exists to keep scroll position legible through the chrome, and using it anywhere else turns a depth cue into decoration. */ --mk-pf-glass: rgba(248, 249, 255, .8); --mk-pf-glass-blur: 16px; --mk-bg-nav: var(--mk-bg-surface); --mk-bg-nav-hover: var(--mk-bg-subtle); --mk-bg-nav-active: var(--mk-bg-container-2); --mk-bg-scrim: rgba(4, 22, 39, .5); /* ====================================================================== 3. TEXT ====================================================================== */ --mk-text: #121c2a; --mk-text-strong: var(--mk-pf-ink); --mk-text-2: #44474c; --mk-text-muted: #74777d; --mk-text-ondark: #ffffff; --mk-text-ondark-2: var(--mk-pf-ink-soft); --mk-text-oncolor: #ffffff; /* ====================================================================== 4. LINES The design system asks for borders at 30% opacity so cards read as "contained" without the grid of hard rules that makes a dense ledger look like a spreadsheet. --mk-border is that translucent value; the opaque one is kept for dividers that must survive on a tinted fill. ====================================================================== */ --mk-border: rgba(196, 198, 205, .3); --mk-border-solid: #c4c6cd; --mk-border-strong: #74777d; --mk-border-ondark: rgba(255, 255, 255, .1); /* ====================================================================== 5. FINANCIAL SEMANTICS Same five-role vocabulary as the base — money in green, money out red, not-yet-moved amber — retuned to the emerald/rose pair the design system specifies. These sit next to a ₹ figure hundreds of times per screen, so they are the tokens most worth getting exactly right. ====================================================================== */ --mk-fin-positive: #10b981; --mk-fin-positive-lt: rgba(16, 185, 129, .1); --mk-fin-positive-fg: #047857; --mk-fin-positive-br: rgba(16, 185, 129, .3); --mk-fin-positive-soft:#34d399; --mk-fin-negative: #ef4444; --mk-fin-negative-lt: rgba(239, 68, 68, .1); --mk-fin-negative-fg: #b91c1c; --mk-fin-negative-br: rgba(239, 68, 68, .3); --mk-fin-negative-soft:#f87171; --mk-fin-pending: #f59e0b; --mk-fin-pending-lt: rgba(245, 158, 11, .12); --mk-fin-pending-fg: #b45309; --mk-fin-pending-br: rgba(245, 158, 11, .3); --mk-fin-info: var(--mk-pf-ink-2); --mk-fin-info-lt: var(--mk-bg-container); --mk-fin-info-fg: var(--mk-pf-ink-3); --mk-fin-info-br: var(--mk-pf-ink-tint); --mk-fin-invest: var(--mk-pf-ink); --mk-fin-invest-lt: var(--mk-bg-container); --mk-fin-invest-fg: var(--mk-pf-ink-3); --mk-fin-invest-br: var(--mk-pf-ink-tint); /* Error is a distinct role from "money out" and keeps its own red. */ --mk-danger: #ba1a1a; --mk-danger-lt: #ffdad6; --mk-danger-fg: #93000a; --mk-success: var(--mk-fin-positive); --mk-success-lt: var(--mk-fin-positive-lt); --mk-success-fg: var(--mk-fin-positive-fg); --mk-warning: var(--mk-fin-pending); --mk-warning-lt: var(--mk-fin-pending-lt); --mk-warning-fg: var(--mk-fin-pending-fg); /* ====================================================================== 6. HERO Flat #111827, NOT a gradient and NOT the header. This is the distinction the whole redesign turns on: the hero is a dark CARD that sits in the content area under a LIGHT header. The previous build painted the header itself dark, which read as a title bar rather than as the one number the screen is about. ====================================================================== */ --mk-hero-bg: #111827; --mk-hero-fg: #ffffff; --mk-hero-fg-2: rgba(255, 255, 255, .7); --mk-hero-line: rgba(255, 255, 255, .1); --mk-hero-fill: rgba(255, 255, 255, .1); --mk-fin-positive-on-hero: var(--mk-fin-positive); --mk-fin-negative-on-hero: var(--mk-fin-negative); --mk-fin-pending-on-hero: var(--mk-fin-pending); --mk-fin-info-on-hero: var(--mk-fin-info); /* ====================================================================== 7. SHAPE "Cards 12px, buttons 8px" — the split is functional, not decorative: a softer corner says container, a tighter one says interactable target. 24px is the hero's own rung, used nowhere else. ====================================================================== */ --mk-r-sm: 8px; /* buttons, inputs, chips */ --mk-r-md: 12px; /* cards, list containers */ --mk-r-lg: 16px; /* elevated cards, sheets */ --mk-r-xl: 24px; /* hero panel only */ --mk-r-pill: 999px; /* ====================================================================== 8. ELEVATION — tonal, ambient, never heavy ====================================================================== */ --mk-sh-sm: 0 4px 6px -1px rgba(0, 0, 0, .05); --mk-sh-md: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -2px rgba(0, 0, 0, .05); --mk-sh-lg: 0 10px 15px -3px rgba(4, 22, 39, .1), 0 4px 6px -4px rgba(4, 22, 39, .1); /* ====================================================================== 9. DOWNSTREAM ALIASES — must be re-declared, not inherited --ek-*, --bs-primary and --color-primary are declared on :root as var(--mk-*). A custom property is substituted at the element where it is DECLARED, so :root's `--ek-primary: var(--mk-primary)` computed against :root's orange before this scope ever existed, and descendants inherit that already-resolved value. Redefining --mk-primary here therefore does NOT move them — MyStackBlazor buttons, bootstrap and every eKash-era class would keep the business palette inside a PF screen. So the alias layer is re-stated here. Anything added to app.css's alias block or App.razor's inline override has to be mirrored below or it will silently desynchronise inside .pf-theme only — which is the hardest kind of theme bug to see, because the rest of the app looks right. ====================================================================== */ --color-primary: var(--mk-primary); --color-primary-foreground: var(--mk-text-oncolor); --bs-primary: var(--mk-primary); --bs-primary-rgb: 253, 118, 26; --ek-primary: var(--mk-primary); --ek-primary-lt: var(--mk-primary-lt); --ek-success: var(--mk-success); --ek-success-lt: var(--mk-success-lt); --ek-danger: var(--mk-danger); --ek-danger-lt: var(--mk-danger-lt); --ek-warning: var(--mk-warning); --ek-warning-lt: var(--mk-warning-lt); --ek-info: var(--mk-fin-info); --ek-info-lt: var(--mk-fin-info-lt); --ek-purple: var(--mk-fin-invest); --ek-purple-lt: var(--mk-fin-invest-lt); --ek-text: var(--mk-text); --ek-muted: var(--mk-text-2); --ek-surface: var(--mk-bg-app); --ek-border: var(--mk-border); --ek-card: var(--mk-bg-surface); --ek-r: var(--mk-r-md); --ek-r-btn: var(--mk-r-sm); --ek-shadow: var(--mk-sh-sm); --ek-shadow-md: var(--mk-sh-md); } /* ========================================================================== DARK — "Deep Dark Mode" Canvas #111827 with cards at #1f2937, and borders kept LOW contrast on purpose. A dark theme that keeps the light theme's border strength is the classic "boxy" failure: every card grows a visible cage because a light line on a dark ground is far more assertive than a dark line on a light one. Only the tokens that actually change are redeclared, per the base file's convention. Nested under .dark so it follows the app's existing switch rather than inventing a second mechanism. ========================================================================== */ .dark .mk-theme-modern, .mk-theme-modern.dark { --mk-bg-app: #111827; --mk-bg-surface: #1f2937; --mk-bg-subtle: #27313f; --mk-bg-container: #27313f; --mk-bg-container-2:#374151; --mk-bg-container-3:#4b5563; --mk-pf-glass: rgba(17, 24, 39, .8); --mk-bg-nav: var(--mk-bg-surface); --mk-bg-nav-hover: var(--mk-bg-container); --mk-bg-nav-active: var(--mk-bg-container-2); /* Navy inverts to its light partners — a #041627 heading on a #1f2937 card is invisible, so the ink family flips to the "fixed" end of the ramp. */ --mk-pf-ink: #d2e4fb; --mk-pf-ink-2: #b7c8de; --mk-pf-ink-3: #b7c8de; --mk-pf-ink-soft: #8192a7; --mk-pf-ink-tint: #38485a; --mk-text: #eaf1ff; --mk-text-strong: #ffffff; --mk-text-2: #b7c8de; --mk-text-muted: #8192a7; --mk-border: rgba(255, 255, 255, .08); --mk-border-solid: #374151; --mk-border-strong: #4b5563; /* Lifted so they stay legible on #1f2937 without going neon. */ --mk-primary: #fb923c; --mk-primary-hover: #f97316; --mk-primary-ink: #fdba74; --mk-primary-lt: rgba(253, 118, 26, .16); --mk-primary-lt-2: rgba(253, 118, 26, .24); --mk-primary-border: rgba(253, 118, 26, .32); --mk-fin-positive: #34d399; --mk-fin-positive-lt: rgba(16, 185, 129, .14); --mk-fin-positive-fg: #6ee7b7; --mk-fin-negative: #f87171; --mk-fin-negative-lt: rgba(239, 68, 68, .14); --mk-fin-negative-fg: #fca5a5; --mk-fin-pending: #fbbf24; --mk-fin-pending-lt: rgba(245, 158, 11, .14); --mk-fin-pending-fg: #fcd34d; /* The hero has to stay distinguishable from a canvas that is now its own old colour, so it steps DOWN rather than up. */ --mk-hero-bg: #0b1220; --mk-danger: #ffb4ab; --mk-danger-lt: rgba(186, 26, 26, .2); --mk-danger-fg: #ffdad6; /* The alias block in .pf-theme resolves on this same element, so it picks up the dark --mk-* above automatically. The one exception is the package's foreground pair: white on the lifted #fb923c is under the AA floor, so dark mode flips it to ink the same way index.html does app-wide. */ --color-primary-foreground: #1f2937; } /* ========================================================================== COMPONENT PRIMITIVES Four things the design system specifies that no token can express on its own, and that were otherwise going to be re-typed inline on every screen. Everything else stays inline-styled from tokens, consistent with how the rest of the PF pages are written. ========================================================================== */ /* Sticky glass top bar. `position:sticky` not `fixed` — fixed drops the bar out of flow and every PF page would need a matching padding-top, which is exactly the kind of coupled magic number the token system exists to kill. */ .pf-appbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: var(--mk-s3); padding: var(--mk-s2) var(--mk-s4); background: var(--mk-pf-glass); -webkit-backdrop-filter: blur(var(--mk-pf-glass-blur)); backdrop-filter: blur(var(--mk-pf-glass-blur)); border-bottom: 1px solid var(--mk-border); color: var(--mk-pf-ink); } /* Card. The default container: white, 12px, hairline, whisper of a shadow. */ .pf-card { background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); box-shadow: var(--mk-sh-sm); } /* List container — same shell, but children divide themselves. The divider stops short of the edge (the inset below) because a rule that runs the full width visually cuts the card into separate cards. */ .pf-list { background: var(--mk-bg-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); overflow: hidden; } .pf-list > * + * { border-top: 1px solid var(--mk-border); } .pf-list-inset > * + * { border-top: 1px solid var(--mk-border); margin-inline: var(--mk-s4); } /* Financial chip — tinted background, full-strength text. Legibility here comes from the text, never from the fill, so the fill can stay this light. */ .pf-chip { display: inline-flex; align-items: center; gap: var(--mk-s1); padding: var(--mk-s1) var(--mk-s2); border-radius: var(--mk-r-sm); font-size: var(--mk-t-secondary); font-weight: var(--mk-fw-medium); white-space: nowrap; } .pf-chip-pos { background: var(--mk-fin-positive-lt); color: var(--mk-fin-positive-fg); } .pf-chip-neg { background: var(--mk-fin-negative-lt); color: var(--mk-fin-negative-fg); } .pf-chip-pend{ background: var(--mk-fin-pending-lt); color: var(--mk-fin-pending-fg); } .pf-chip-ink { background: var(--mk-bg-container); color: var(--mk-pf-ink-3); } /* Tabular figures. The design system asks for monospaced numerals on every ledger amount so decimal points line up down a column; without this, a list of ₹ figures in a proportional face reads as ragged. */ .pf-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Quick-action shortcut: icon tile with the label outside it. Used by the PF dashboard on both clients. The tile is the target; the label only names it. */ .pf-qa { display: flex; flex-direction: column; align-items: center; gap: var(--mk-s2); text-decoration: none; } .pf-qa-tile { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--mk-r-md); font-size: var(--mk-t-section); background: var(--mk-bg-container-2); border: 1px solid var(--mk-border); box-shadow: var(--mk-sh-sm); transition: background var(--mk-dur-fast) var(--mk-ease); } .pf-qa:hover .pf-qa-tile { background: var(--mk-bg-container); } /* The one filled tile on the row — the action the screen exists to make easy. */ .pf-qa-primary .pf-qa-tile { background: var(--mk-primary); border-color: var(--mk-primary); } .pf-qa-primary:hover .pf-qa-tile { background: var(--mk-primary-hover); } .pf-qa-label { font-size: var(--mk-t-micro); font-weight: var(--mk-fw-medium); color: var(--mk-text-2); text-align: center; }