/* ========================================================================== 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; /* ====================================================================== 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. One knob, because every Personal Finance screen had grown its own orange gradient and the cumulative effect was an app that shouted before it said anything. It is dark rather than brand orange on purpose: the accent has to stay scarce to still read as an accent, and a ledger is easier to trust when the chrome is quiet and the only colour on screen is a number's. The brand still leads — it owns every CTA sitting on top of this. But dark ≠ neutral. It used to be a cold blue-black (#1A1F2B → #2C3345), which put a slate-blue block at the top of an otherwise orange app and read as belonging to a different product. It is now a warm espresso in the same hue family as --mk-primary: still quiet enough to sit under a ₹ figure, but unmistakably the same palette as the buttons on top of it. Going any further — an actual orange hero — is the thing that was already tried and rejected, because at that size orange drowns every number on it. Change these three and every hero changes together. ---------------------------------------------------------------------- */ --mk-hero-bg: linear-gradient(135deg, #241B14 0%, #33241A 55%, #402C1D 100%); --mk-hero-fg: #FFFFFF; --mk-hero-fg-2: rgba(255, 255, 255, .62); /* eyebrows, subtitles */ --mk-hero-line: rgba(255, 255, 255, .16); /* hairline on a hero control */ --mk-hero-fill: rgba(255, 255, 255, .10); /* secondary button on a hero */ /* Financial colours as they appear ON the dark hero. The on-white values are tuned for contrast against paper and go muddy against charcoal, so the hero gets its own pair. Same hues, lifted. */ --mk-fin-positive-on-hero: #86EFAC; --mk-fin-negative-on-hero: #FCA5A5; --mk-fin-pending-on-hero: #FDE68A; --mk-fin-info-on-hero: #93C5FD; /* ====================================================================== 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); /* ====================================================================== 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, and MyKhata360 ships 8 Indian languages. ====================================================================== */ --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; /* 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; /* 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); /* The hero is already dark; in dark mode 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-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