/* ========================================================================== MyKhata360 — BASE DESIGN TOKENS -------------------------------------------------------------------------- THE single source of truth for color, type, space, radius, elevation and breakpoints. Everything else in the app derives from this file. This is the reconciliation of two systems that had grown up separately: EXISTING (what actually ships today) NEW (documents/DESIGN_RULES.md) ------------------------------------ -------------------------------- --ek-* eKash palette, app.css --mk-* bahi-khata palette --bs-* bootstrap overrides 3 layout shells (§1.1–1.3) --color-primary MyStackBlazor pkg Inter + Noto type stack --rd-* responsive sizing, 32 pages structured naming + roles .dark working dark mode (no dark mode) WHO WON WHAT, AND WHY --------------------- - Action color: EXISTING. #F97316 already drives bootstrap, MyStackBlazor and eKash simultaneously and is dark-mode tuned. The spec's #E8590C was a near-identical orange with no upside worth a whole-app repaint. - Breakpoints: EXISTING. The --rd-* tiers (600/1025/1441) are consumed by 32 razor files; DESIGN_RULES' 640/1024/1440 by nothing yet. Two systems reflowing at different widths in one page is the worst outcome, so the spec's numbers were retired, not the shipping ones. - Identity, chrome, typography, structure: NEW. Ledger red, marigold, cream and ink navy carry the bahi-khata identity the old palette had no opinion about; the Inter + Noto stack is required (Inter has zero Indic glyphs and tofus all 8 shipped languages). - Dark mode: EXISTING, extended. The .dark block below gives the --mk-* layer the dark support it was missing. So --mk-* is the base and --ek-* / --bs-primary / --color-primary are now thin aliases of it (see §14 and the notes in app.css / App.razor). Change a brand value HERE and it moves everywhere; change it downstream and it desynchronises. Loaded FIRST in App.razor — declarations only, no selectors, no reset, so it cannot disturb the cascade beneath it. RULE: no component ever hardcodes a hex, px, radius or shadow. Always var(--mk-*). The only sanctioned literals are @media widths (§13). ========================================================================== */ :root { /* ====================================================================== 1. BRAND CORE Two families, deliberately. The orange family is the ACTION color — inherited from the shipping app. The bahi-khata family is the IDENTITY — brand mark, nav chrome, warm paper — and never competes for a CTA. ====================================================================== */ /* -- Action family (existing, live across bootstrap/MyStackBlazor/eKash). The full ramp is declared, not just the five semantic steps: page markup already reaches for 50/100/200/300/900 for tint fills, tint borders and gradient partners, and any step left as a raw literal would stay stuck at its light value when .dark flips the rest. */ --mk-orange-50: #FFF7ED; /* tint fill behind primary content */ --mk-orange-100: #FFEDD5; /* tint fill, one step up */ --mk-orange-200: #FED7AA; /* border companion to a 50/100 fill */ --mk-orange-300: #FDBA74; /* muted accent, disabled primary */ --mk-orange-400: #FB923C; /* lifted for dark surfaces */ --mk-orange-500: #F97316; /* primary action */ --mk-orange-600: #EA580C; /* hover / pressed */ --mk-orange-700: #C2410C; /* AA-safe on white — links + small text */ --mk-orange-900: #7C2D12; /* deep end of primary gradients */ /* Semantic handles onto the ramp — prefer these in components. */ --mk-orange: var(--mk-orange-500); --mk-orange-hi: var(--mk-orange-600); --mk-orange-ink: var(--mk-orange-700); --mk-orange-lt: var(--mk-orange-50); --mk-orange-dark: var(--mk-orange-400); /* -- Identity family (bahi-khata: cloth binding, thread, paper, ink) ---- */ --mk-red: #9D2226; /* ledger cloth — brand mark, card spine */ --mk-red-deep: #7A1A1D; --mk-marigold: #F4A62A; /* thread — active-nav accent, highlights */ --mk-cream: #FDF7EE; /* paper — onboarding / promo surfaces */ --mk-cream-deep: #F7EBDA; --mk-navy: #12203C; /* ink — nav chrome ONLY */ --mk-navy-hi: #1C2F55; --mk-navy-act: #26406F; /* -- The ₹ badge ------------------------------------------------------ THESE HAVE NO DARK-MODE TWIN, AND THAT IS THE POINT. The badge is an orange tile that is the same orange in both themes, so everything drawn on it must be theme-fixed too. Painting the ₹ with --mk-hero-fg made it near-black on orange in light mode (the hero went light in the light theme, so its foreground went dark) and white in dark mode — the mark changed colour with the page while the tile it sits on did not. Values match wwwroot/favicon.svg and the Android launcher icon, which are static assets and cannot read a token at all. */ --mk-brand-mark-fg: #FFFFFF; /* the ₹ glyph and the dashed arc */ --mk-brand-mark-ribbon: #0F172A; /* the bookmark corner */ --mk-brand-mark-ribbon-hi: #1E293B; /* its lighter top edge */ /* ====================================================================== 2. SEMANTIC ROLES Status colors are the eKash set — they are already tuned for both themes and used by live Personal Finance pages. ====================================================================== */ --mk-primary: var(--mk-orange); --mk-primary-hover: var(--mk-orange-hi); --mk-primary-ink: var(--mk-orange-ink); --mk-primary-lt: var(--mk-orange-lt); --mk-primary-lt-2: var(--mk-orange-100); /* second tint step */ --mk-primary-border: var(--mk-orange-200); /* 1px edge around a tint fill */ --mk-primary-muted: var(--mk-orange-300); /* disabled / de-emphasised */ --mk-primary-deep: var(--mk-orange-900); /* far end of a CTA gradient */ /* The reference draws a hard line between an app CTA and an AUTH action (its blue "Next" button). Keep the split — accent also owns text links. */ --mk-accent: #1F5FD0; --mk-accent-hover: #17499F; --mk-success: #059669; --mk-success-lt: #ECFDF5; --mk-warning: #F59E0B; --mk-warning-lt: #FFFBEB; --mk-danger: #D9695A; --mk-danger-lt: #FDF2F1; --mk-info: #06B6D4; --mk-info-lt: #ECFEFF; --mk-purple: #8B5CF6; --mk-purple-lt: #F5F3FF; /* Readable foregrounds for the *-lt fills above (badges, banners). */ --mk-success-fg: #065F46; --mk-warning-fg: #92400E; --mk-danger-fg: #9B2C1E; --mk-info-fg: #155E75; /* ---------------------------------------------------------------------- 2b. FINANCIAL SEMANTICS A separate family from the status colours above, because they answer a different question. `--mk-danger` means "this action destroys something" and is deliberately a soft terracotta so a Delete button doesn't scream. `--mk-fin-negative` means "money left your account" — it sits next to a number hundreds of times per screen, and it has to be an unambiguous ledger red, not a warm one. Overloading one on the other was how the Personal Finance pages ended up with ~1,100 hardcoded hexes: the status token looked wrong in a ledger, so every page invented its own red. The mapping is fixed and is the whole vocabulary — money in is green, money out is red, not-yet-moved is amber, informational is blue, and goals/investments are purple. Nothing else earns a colour. ---------------------------------------------------------------------- */ --mk-fin-positive: #059669; /* income, received, gains, on-track */ --mk-fin-positive-lt: #ECFDF5; --mk-fin-positive-fg: #065F46; --mk-fin-positive-br: #A7F3D0; /* 1px edge around the tint fill */ --mk-fin-positive-soft:#34D399; /* lighter partner in a 2-stop gradient */ --mk-fin-negative: #DC2626; /* expense, due, owed, losses */ --mk-fin-negative-lt: #FEF2F2; --mk-fin-negative-fg: #B91C1C; --mk-fin-negative-br: #FECACA; --mk-fin-negative-soft:#F87171; /* lighter partner in a 2-stop gradient */ --mk-fin-pending: #D97706; /* upcoming, partially used, at risk */ --mk-fin-pending-lt: #FFFBEB; --mk-fin-pending-fg: #B45309; --mk-fin-pending-br: #FDE68A; --mk-fin-info: #2563EB; /* neutral facts, transfers, references */ --mk-fin-info-lt: #EFF6FF; --mk-fin-info-fg: #1D4ED8; --mk-fin-info-br: #BFDBFE; --mk-fin-invest: #7C3AED; /* goals, investments, long-horizon */ --mk-fin-invest-lt: #F5F3FF; --mk-fin-invest-fg: #6D28D9; --mk-fin-invest-br: #DDD6FE; /* ---------------------------------------------------------------------- 2c. PAGE HERO The banner behind a page title, and the summary card at the top of a screen. One knob: change these and every hero changes together. LIGHT in light mode (owner decision, 2026-09-16). It was a dark band for a long time — cold blue-black, then warm espresso — on the argument that quiet dark chrome lets the numbers lead. In practice a near-black block at the top of an otherwise light app read as dark theme leaking into light mode. It is now a pale warm tint of the brand with ordinary dark text. Still not a saturated orange: at hero size that drowns every number on it. Dark mode keeps a dark hero (see the .dark block), so every value below is the LIGHT one and each has a dark-mode twin. Text on a hero uses --mk-hero-fg / --mk-hero-fg-2, never --mk-text-oncolor: that token is white by definition (it sits on orange buttons) and vanishes on this background. ---------------------------------------------------------------------- */ --mk-hero-bg: linear-gradient(135deg, #FFEBDC 0%, #FFF4EC 55%, #FFFAF6 100%); --mk-hero-fg: #1A1F2B; /* = --mk-text-strong */ --mk-hero-fg-2: #566070; /* eyebrows, subtitles; AA on tint */ --mk-hero-line: rgba(36, 27, 20, .14); /* hairline on a hero control */ --mk-hero-fill: rgba(36, 27, 20, .06); /* secondary button on a hero */ /* Financial colours as they appear ON the hero: the dark shades, which keep contrast on the pale tint. The .dark block lifts them back to pastels. */ --mk-fin-positive-on-hero: #047857; --mk-fin-negative-on-hero: #B91C1C; --mk-fin-pending-on-hero: #B45309; --mk-fin-info-on-hero: #1D4ED8; /* ---------------------------------------------------------------------- 2c-bis. CATEGORICAL CHART PALETTE Eight hues for telling *unrelated* series apart — donut slices, stacked segments, multi-line. Nothing else: a chart showing magnitude wants one hue light→dark, and a chart showing state wants --mk-fin-*, which is reserved and must never be borrowed as "series 4". Assign these in fixed order, 1→8, and never cycle. A ninth series folds into an "Other" slice instead of getting a made-up ninth hue, because a repeated hue in a categorical chart makes two unrelated things read as the same thing. Colour follows the *entity*, not its rank in the current sort — a filter that drops a series must not repaint the survivors. Both columns are validated as a set (adjacent-pair colour-blind ΔE ≥ 8, normal-vision ΔE ≥ 15, and ≥ 3:1 against the surface in dark). The dark column is the same eight hues re-stepped for #1E1A16, not an auto-flip. Three of the light steps sit under 3:1 on white, which is allowed only because every chart using them ships direct labels and a table view — keep that relief if you reuse them. ---------------------------------------------------------------------- */ --mk-chart-1: #2A78D6; /* blue */ --mk-chart-2: #EB6834; /* orange */ --mk-chart-3: #1BAF7A; /* aqua */ --mk-chart-4: #EDA100; /* yellow */ --mk-chart-5: #E87BA4; /* magenta */ --mk-chart-6: #008300; /* green */ --mk-chart-7: #4A3AA7; /* violet */ --mk-chart-8: #E34948; /* red */ /* Third-party brand colour. WhatsApp green is fixed by its brand guidelines and identifies the channel, not a state — so it deliberately does not change in dark mode. */ --mk-brand-whatsapp: #25D366; /* ====================================================================== 2d. MOTION Spec §33: animation communicates state, it does not decorate. The whole budget is 150-250ms - long enough to be followed, short enough that a person tapping through twenty transactions never waits on it. One easing curve for everything that enters or settles, and separate accelerate/decelerate curves for exits. More than that reads as inconsistency, not richness. ====================================================================== */ --mk-dur-fast: 150ms; /* hover, press, colour change */ --mk-dur: 200ms; /* card enter, tab switch, tooltip */ --mk-dur-slow: 250ms; /* sheet, drawer, page section */ --mk-ease: cubic-bezier(.2, .8, .2, 1); /* decelerate - enters */ --mk-ease-in: cubic-bezier(.4, 0, 1, 1); /* accelerate - exits */ --mk-ease-out: cubic-bezier(0, 0, .2, 1); /* ====================================================================== 3. SURFACES ====================================================================== */ --mk-bg-app: #F4F6F9; /* content canvas behind cards */ --mk-bg-surface: #FFFFFF; /* cards, panels, inputs, top bar */ --mk-bg-subtle: #FAFBFC; /* table headers, input prefixes, row hover */ --mk-bg-warm: var(--mk-cream); --mk-bg-nav: var(--mk-navy); --mk-bg-nav-hover: var(--mk-navy-hi); --mk-bg-nav-active: var(--mk-navy-act); --mk-bg-scrim: rgba(18, 32, 60, .5); /* ====================================================================== 3b. LAYERS (z-index) One ladder for everything that floats, because the numbers only mean anything relative to each other. Picking a number without looking here is how the notification popup (700) ended up *underneath* the Personal Finance quick-links strip (900), which claims its layer permanently so its own popup clears the toasts. Reading up: page chrome, then things anchored to the page, then things anchored to the top bar, then things that take over the screen. A dropdown opened from the TOP BAR must outrank every page-level layer — the page scrolls under it, and it is drawn at root level for that reason. Web only for now: Mobile's layers are per-screen sheets and its token file carries no equivalent, so there is nothing to keep in sync there yet. ====================================================================== */ --mk-z-topbar: 100; --mk-z-bottomnav: 150; --mk-z-drawer-backdrop: 299; --mk-z-drawer: 300; --mk-z-toast: 800; /* alert toasts under the top bar */ --mk-z-page-pop: 900; /* in-page popovers (quick-links strip) */ --mk-z-page-pop-panel: 901; --mk-z-header-backdrop: 1199; /* close-on-outside-click for the below */ --mk-z-header-menu: 1200; /* avatar / add / notification dropdowns */ --mk-z-tour: 1300; /* guided tour: spotlights the above */ --mk-z-modal: 9999; /* full-screen dialogs */ /* ====================================================================== 4. TEXT ====================================================================== */ --mk-text: #334155; --mk-text-strong: #1A1F2B; /* headings */ --mk-text-2: #64748B; /* subtitles, table headers */ --mk-text-muted: #939BA8; /* placeholders, input icons, footers */ --mk-text-ondark: #EEF1F6; --mk-text-ondark-2: #96A1B8; --mk-text-oncolor: #FFFFFF; /* on primary / accent / danger fills */ --mk-text-link: var(--mk-primary-ink); /* ====================================================================== 5. LINES ====================================================================== */ --mk-border: #E5E9F0; --mk-border-strong: #C6CCD5; --mk-border-ondark: rgba(255, 255, 255, .08); --mk-focus: var(--mk-primary); --mk-focus-ring: 0 0 0 3px rgba(249, 115, 22, .18); --mk-focus-ring-accent: 0 0 0 3px rgba(31, 95, 208, .14); /* ====================================================================== 6. TYPOGRAPHY Plus Jakarta Sans is the shipping UI face and stays first. Inter backs it up, and Noto MUST remain in the stack — neither Jakarta nor Inter has Indic coverage. To be exact about what "ships": the AppLanguage enum names 11 languages and User.PreferredLanguage stores one, but NOTHING in Web or Mobile reads it — there are no .resx files and no IStringLocalizer anywhere in the tree, so every screen is English. The Indic families below are here for user-entered Devanagari (a party name, a note, a category) and for the day the UI is actually translated. Don't read this stack as evidence that localisation exists. ====================================================================== */ --mk-font: 'Plus Jakarta Sans', 'Inter', 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Bengali', 'Noto Sans Kannada', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Tabular ₹ figures — stat values, table amounts, OTP digits. */ --mk-font-num: 'Inter', ui-monospace, 'SF Mono', monospace; /* Codes a person reads character by character: GSTIN, barcodes, IMEIs, API keys, ticket ids. Not --mk-font-num: Inter is proportional, so O/0 and l/1 in a GSTIN are not distinguishable. */ --mk-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, 'Noto Sans Mono', monospace; /* Handwritten accent — khata/ledger flourishes only, never UI chrome. */ --mk-font-script: 'Kalam', cursive; /* The scale bottoms out at a real micro step. Without one, dense chrome (nav badges, sidebar meta, table chips) kept inventing 9.5px / 10.5px / 11.5px one-offs — that ad-hoc bottom end was most of why the sidebar type looked unsystematic. 11px is the floor; nothing should go below it. */ --mk-fs-2xs: 0.6875rem; /* 11px — badges, micro-labels, dense meta */ --mk-fs-xs: 0.75rem; /* 12px — uppercase labels, hints */ --mk-fs-sm: 0.875rem; /* 14px — body small, table cells, buttons */ --mk-fs-base: 1rem; /* 16px — body */ --mk-fs-md: 1.125rem; /* 18px — card titles */ --mk-fs-lg: 1.5rem; /* 24px — page titles */ --mk-fs-xl: 2rem; /* 32px — auth headings */ --mk-fs-2xl: 2.5rem; /* 40px — marketing hero only */ /* ---------------------------------------------------------------------- 6b. TYPE ROLES The --mk-fs-* ramp above is a size ladder. These are the six ROLES the product spec defines, each named for its job rather than its size, so markup says what a thing IS ("this is the hero amount") instead of how big it happens to be. The spec gives each role a RANGE, so most roles have two steps and both are on-spec. Pick the larger step when the element is the point of the screen, the smaller when it is one of several peers. role spec range steps here hero amount 32-40px --mk-t-hero-lg / -hero / -hero-sm page heading 24-28px --mk-t-page / -page-sm section heading 18-20px --mk-t-section / -section-sm card title 15-16px --mk-t-card / -card-sm body 14-15px --mk-t-body secondary 12-13px --mk-t-secondary / -secondary-sm 11px is the floor and always was; --mk-t-micro is the only thing below secondary, for badges and dense meta. Anything reaching for 9.5 or 10.5 is off the system. Why this exists: the ramp had no 13px, 15px or 20px step, and those are three of the five most-used sizes in Personal Finance. That gap is exactly why hundreds of font-sizes were hardcoded. ---------------------------------------------------------------------- */ --mk-t-hero-lg: 2.5rem; /* 40px - top of the hero range */ --mk-t-hero: 2.25rem; /* 36px - the one number a screen is about */ --mk-t-hero-sm: 2rem; /* 32px */ --mk-t-page: 1.625rem; /* 26px */ --mk-t-page-sm: 1.5rem; /* 24px */ --mk-t-section: 1.25rem; /* 20px */ --mk-t-section-sm: 1.125rem; /* 18px */ --mk-t-card: 1rem; /* 16px */ --mk-t-card-sm: 0.9375rem; /* 15px */ --mk-t-body: 0.875rem; /* 14px */ --mk-t-secondary: 0.8125rem; /* 13px */ --mk-t-secondary-sm: 0.75rem; /* 12px */ --mk-t-micro: 0.6875rem; /* 11px - floor. Nothing goes below this. */ /* Weights that pair with the roles above, per the spec's table. */ --mk-t-w-hero: var(--mk-fw-bold); --mk-t-w-page: var(--mk-fw-semibold); --mk-t-w-section: var(--mk-fw-semibold); --mk-t-w-card: var(--mk-fw-medium); --mk-t-w-body: var(--mk-fw-regular); --mk-fw-regular: 400; --mk-fw-medium: 500; --mk-fw-semibold: 600; --mk-fw-bold: 700; /* 800 is genuinely loaded — App.razor requests wght@400;500;600;700;800 for Plus Jakarta Sans. It is NOT available in Inter or Noto, so an 800 run of Devanagari falls back to 700; that is acceptable, 900 is not — nothing loads 900 and it silently renders as 800. */ --mk-fw-extrabold: 800; --mk-lh-tight: 1.2; /* headings */ --mk-lh: 1.55; /* body — roomier than 1.5 for Devanagari matras */ --mk-ls-label: 0.06em; /* uppercase section labels */ --mk-ls-tight: -0.02em; /* large headings, stat values */ /* ====================================================================== 7. SPACING — 4px base ====================================================================== */ --mk-s1: 0.25rem; /* 4px */ --mk-s2: 0.5rem; /* 8px */ --mk-s3: 0.75rem; /* 12px */ --mk-s4: 1rem; /* 16px */ --mk-s5: 1.5rem; /* 24px — card padding, section gap */ --mk-s6: 2rem; /* 32px — pane padding */ --mk-s8: 3rem; /* 48px — shell padding, XL gutters */ --mk-s7: 2.5rem; /* 40px — completes the spec's 8-point list */ /* ====================================================================== 8. RADIUS The eKash 10px/8px pair is the shipping feel; the spec's 5/9/14 ladder is the structure. Merged: keep the ladder, land the two most-used rungs on the values already on screen. ====================================================================== */ --mk-r-sm: 6px; /* inputs, buttons, nav rows — MyStackBlazor baseline */ --mk-r-md: 10px; /* cards, panels — the live --ek-r */ --mk-r-lg: 14px; /* auth cards, modals */ /* Top rung, for a full-bleed hero panel. Declared here rather than only in pf-theme.css so a page using it still resolves to a sane radius when it renders outside the .pf-theme scope — an unresolved var() collapses the whole declaration, which reads as a bug rather than as a fallback. */ --mk-r-xl: 20px; /* hero panel only */ --mk-r-pill: 999px; /* status badges */ /* ====================================================================== 9. ELEVATION ====================================================================== */ --mk-sh-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06); --mk-sh-md: 0 4px 16px rgba(0, 0, 0, .08); --mk-sh-lg: 0 12px 32px rgba(18, 32, 60, .14); /* ====================================================================== 10. COMPONENT SIZING 36px is the MyStackBlazor control baseline and is kept for dense desktop chrome; 46px is the DESIGN_RULES §0 touch target for forms and CTAs. ====================================================================== */ --mk-input-h: 46px; --mk-btn-h: 46px; --mk-ctrl-h: 36px; /* dense in-app controls (toolbar, filters) */ --mk-icon-btn: 36px; --mk-avatar: 34px; --mk-otp-w: 48px; --mk-otp-h: 56px; --mk-tour-w: 340px; /* guided-tour card (PfAppTour) */ /* Shell metrics come from the shipping MainLayout, not the spec sketch — the spec's 230/64/58 were three pixel values nothing on screen used, and the sidebar's own top-row has to match the app top bar exactly or the brand block sits a couple of pixels off the header it aligns with. */ --mk-sidebar: 260px; --mk-sidebar-sm: 56px; /* Medium-tier / collapsed icon-only rail */ --mk-topbar: 56px; --mk-bottomnav: 64px; /* Small-tier bottom tab bar */ --mk-icon-rail: 48px; --mk-content-maxw: 1440px; --mk-auth-card-maxw: 960px; /* with benefit panel */ --mk-auth-card-maxw-solo: 460px; --mk-form-maxw: 420px; /* ====================================================================== 11. MOTION ====================================================================== */ --mk-t-fast: 120ms ease; --mk-t: 200ms ease; } /* ========================================================================== 12. DARK THEME Charcoal surfaces, not inverted black. Toggled by the pre-paint script in App.razor, which puts `.dark` on . Only tokens that actually change are redefined; everything else inherits from :root above. The charcoal is WARM, and that is the whole point. The first version used a neutral/cold ramp (#121212 / #1E1E1E, text #E5E7EB → #9CA3AF, all blue-grey) which is the correct choice for a blue or neutral brand and the wrong one here: against #FB923C those greys read as dirty, and the app stopped looking like the orange product it is in light mode. Every neutral now carries a few degrees of the brand hue at very low saturation, so orange sits ON the surface instead of fighting it. Warmth is not an excuse to lose contrast — every value below still clears 4.5:1 on --mk-bg-surface (#1E1A16): --mk-text #EDE7E0 ≈ 13.9:1 --mk-text-2 #A9A199 ≈ 6.9:1 --mk-text-muted #8D857B ≈ 4.7:1 <- the floor; do not darken it --mk-primary #FB923C ≈ 7.4:1 ========================================================================== */ .dark { /* Only the low end of the ramp inverts. On charcoal a near-white peach fill reads as a glaring panel, so 50–200 become translucent orange washes that let the dark surface through. 300–900 are left alone deliberately: 900 is the dark end of CTA gradients and lightening it would flip those gradients inside out under their white text. */ --mk-orange-50: rgba(249, 115, 22, .10); --mk-orange-100: rgba(249, 115, 22, .16); --mk-orange-200: rgba(249, 115, 22, .30); --mk-primary: var(--mk-orange-400); --mk-primary-hover: var(--mk-orange-500); --mk-primary-ink: var(--mk-orange-400); --mk-primary-lt: var(--mk-orange-50); --mk-accent: #6C9BF0; --mk-accent-hover: #8FB4F5; --mk-success: #34D399; --mk-success-lt: rgba(16, 185, 129, .12); --mk-warning: #FBBF24; --mk-warning-lt: rgba(245, 158, 11, .12); --mk-danger: #F2867A; --mk-danger-lt: rgba(217, 105, 90, .12); --mk-info: #22D3EE; --mk-info-lt: rgba(6, 182, 212, .12); --mk-purple: #A78BFA; --mk-purple-lt: rgba(139, 92, 246, .12); --mk-success-fg: #6EE7B7; --mk-warning-fg: #FCD34D; --mk-danger-fg: #FCA5A5; --mk-info-fg: #67E8F9; /* Financial semantics, dark. The hues stay recognisably green/red/amber/ blue/purple — a ledger reader must never have to relearn which way is up. What changes is luminance: the light-mode values are tuned for contrast on white and go muddy on charcoal, so each lifts to its 400-level step. The tints become translucent washes for the same reason the orange 50–200 do — a near-white pastel fill glares against a dark card. */ --mk-fin-positive: #34D399; --mk-fin-positive-lt: rgba(16, 185, 129, .13); --mk-fin-positive-fg: #6EE7B7; --mk-fin-positive-br: rgba(52, 211, 153, .32); --mk-fin-positive-soft:#6EE7B7; --mk-fin-negative: #F87171; --mk-fin-negative-lt: rgba(220, 38, 38, .15); --mk-fin-negative-fg: #FCA5A5; --mk-fin-negative-br: rgba(248, 113, 113, .32); --mk-fin-negative-soft:#FCA5A5; --mk-fin-pending: #FBBF24; --mk-fin-pending-lt: rgba(217, 119, 6, .15); --mk-fin-pending-fg: #FCD34D; --mk-fin-pending-br: rgba(251, 191, 36, .32); --mk-fin-info: #60A5FA; --mk-fin-info-lt: rgba(37, 99, 235, .16); --mk-fin-info-fg: #93C5FD; --mk-fin-info-br: rgba(96, 165, 250, .32); --mk-fin-invest: #A78BFA; --mk-fin-invest-lt: rgba(124, 58, 237, .17); --mk-fin-invest-fg: #C4B5FD; --mk-fin-invest-br: rgba(167, 139, 250, .32); /* Same eight hues, re-stepped for the dark surface (#1E1A16) and validated against it as a set — not the light values lightened. */ --mk-chart-1: #3987E5; --mk-chart-2: #D95926; --mk-chart-3: #199E70; --mk-chart-4: #C98500; --mk-chart-5: #D55181; --mk-chart-6: #008300; --mk-chart-7: #9085E9; --mk-chart-8: #E66767; /* In dark mode the hero stays dark. It only needs to separate from the page rather than dominate it, so it lifts slightly instead of inverting. */ --mk-hero-bg: linear-gradient(135deg, #1A1512 0%, #241C16 60%, #2E241B 100%); --mk-hero-fg: #FAF7F3; --mk-hero-fg-2: rgba(250, 247, 243, .58); --mk-hero-line: rgba(255, 255, 255, .12); --mk-hero-fill: rgba(255, 255, 255, .07); --mk-fin-positive-on-hero: #86EFAC; --mk-fin-negative-on-hero: #FCA5A5; --mk-fin-pending-on-hero: #FDE68A; --mk-fin-info-on-hero: #93C5FD; --mk-bg-app: #14110E; --mk-bg-surface: #1E1A16; --mk-bg-subtle: #262119; /* Warm paper has no dark equivalent — it becomes a warm-tinted charcoal rather than glaring cream on a dark page. */ --mk-bg-warm: #241E18; --mk-cream-deep: #33291F; --mk-bg-scrim: rgba(0, 0, 0, .6); --mk-text: #EDE7E0; --mk-text-strong: #FAF7F3; --mk-text-2: #A9A199; --mk-text-muted: #8D857B; --mk-border: #2E2822; --mk-border-strong: #423A31; --mk-focus-ring: 0 0 0 3px rgba(251, 146, 60, .22); --mk-focus-ring-accent: 0 0 0 3px rgba(108, 155, 240, .20); --mk-sh-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 8px rgba(0, 0, 0, .3); --mk-sh-md: 0 4px 16px rgba(0, 0, 0, .45); --mk-sh-lg: 0 12px 32px rgba(0, 0, 0, .55); } /* ========================================================================== 13. BREAKPOINTS Canonical tiers, inherited from the shipping --rd-* system so a page can mix --mk-* chrome with --rd-* dashboard sizing and reflow exactly once: Small (mobile) 0 – 599px off-canvas drawer, 1 column Medium (tablet) 600 – 1024px icon-only sidebar, 2 columns Large (desktop) 1025 – 1440px full sidebar, 2–3 columns XL (wide) 1441px + capped width, wide gutters The half-pixel max-widths (599.98 / 1024.98 / 1440.98) exist so fractional device-pixel-ratio viewports cannot land in a dead zone between an integer max-width and the next min-width. These custom properties are for JS and documentation ONLY — CSS forbids custom properties inside @media, so every stylesheet writes the literal. If you change a number here, grep for the literal and change it too. ========================================================================== */ :root { --mk-bp-md: 600px; /* Medium tier starts */ --mk-bp-lg: 1025px; /* Large tier starts */ --mk-bp-xl: 1441px; /* XL tier starts */ } /* ========================================================================== 14. BRIDGES — legacy namespaces, now derived These keep the ~38 files written against the older token names working while making --mk-* the only place a brand value is authored. The remaining two bridges live where cascade order forces them: - --color-primary (MyStackBlazor) : inline