/* ============================================================================ AdvEntDeli Cashier — design tokens and base. This file is the whole visual language. Nothing else should declare a colour, a radius, a shadow or a font size as a literal; if a screen needs one that is not here, add it here. WHY IT LIVES IN AdvDeli.Catalog.UI AND NOT IN THE CASHIER. It started in AdvDeli.Cashier.Shared, which was right while the Cashier was the only thing using it. Then the catalog screens — Item Manager, Item Entry, Menu Designer, Store Config — were themed, and those live in this project because BOTH the Cashier and the Web Office render them. The Web Office is net8.0 and Cashier.Shared is net9.0, so the Web Office cannot reference Cashier.Shared at all: _content/AdvDeli.Cashier.Shared/theme.css was unreachable from there at any price. This project is multi-targeted net8.0;net9.0 and is the only thing both applications share, so it is the only place the tokens can physically live. The fonts moved with it. The @font-face rules below use URLs relative to this stylesheet, so splitting them would have left the Web Office with a token file and no typeface. IT MUST BE LINKED BY EVERY HOST. It is a static web asset of this RCL, so a host that does not reference it still SERVES it and simply never loads it — at which point every var() in every page silently resolves to nothing and the whole app renders as unstyled black-on-white. There is no error and no console warning; it just looks broken. Three heads link it today: AdvDeli.Cashier/wwwroot/index.html (MAUI, net9) AdvDeli.Cashier.Web/Components/App.razor (Blazor Server, net9) AdvDeli.WebOffice/Components/App.razor (Blazor Server, net8) CASCADE POSITION DIFFERS BY HOST, deliberately. In the two Cashier heads it sits AFTER bootstrap.min.css and app.css — all three declare html/body at the same specificity and this one has to win — and BEFORE the scoped .styles.css bundle. In the Web Office it sits BEFORE its app.css. The Web Office has its own navy/copper chrome with its own html/body rules, and it is not being restyled — it is here for the tokens the shared catalog screens consume. Going first means those tokens are available everywhere while the Web Office's own base rules still win the elements they set. Its palette uses different names (--navy, --copper, --ink, --line) so nothing collides. To adopt the full look in the Web Office later, move that one link below app.css. That is the entire migration. (A MudBlazor mirror of these values, AdvDeliTheme.cs, used to live in Theme/. It was removed: nothing rendered its providers, no host registered AddMudServices, no page used a Mud* component, and the package reference it needed was long gone — so it only broke the build.) WHAT REPLACED WHAT, AND WHY. The previous look was inherited from the product's first iteration and had three habits that dated it badly on a 2026 screen: Glossy skeuomorphism. Every button and key carried a radial gradient, an inset white highlight and a drop shadow — the 2010 "clickable bead" idiom. It reads as decoration, and on a keypad of twelve keys it is twelve competing light sources. Gradient fills as identity. Buttons were vertical gradients (#33c763 -> #178a41). Two colours where one is needed, and the pair drifts out of step whenever anyone re-picks one. Navy-on-charcoal with six blues. A cool palette that said nothing about a food business, spread across enough near-identical shades that "the brand blue" was not a decidable question. The replacement: Flat, layered surfaces. Depth comes from a stepped surface ramp and hairline borders, not from bevels. Shadow is used once — to lift a modal off the page — and never as texture. One accent, used sparingly. Saffron. Warm, appetite-adjacent, unmistakably not the old navy, and it sits in the same family as the AE logo mark so the brand stops fighting the UI. True neutral greys. Zero-chroma, so the accent is the only hue on screen and therefore the only thing that reads as "act here". Inter Variable, self-hosted. Segoe UI is a fine text face and a dull interface face; its numerals in particular are soft at the sizes a keypad needs. Inter has a taller x-height, genuine tabular figures, and one variable file covers every weight — so 800-weight headings and 500-weight body cost one 48 KB download and work with no network, which the MAUI WebView requires. IF YOU WANT A DIFFERENT ACCENT: change --c-accent and --c-accent-press below and the matching Primary in AdvDeliTheme.cs. Nothing else references the hue. Two alternates are given. ============================================================================ */ /* --------------------------------------------------------------------------- Inter Variable. Two subsets: latin covers English, latin-ext adds the rest of Western Europe — needed for French (œ, and correctly shaped accents at weight) and for staff names the Paris site will actually have. --------------------------------------------------------------------------- */ @font-face { font-family: 'InterVar'; font-style: normal; font-display: swap; /* text paints immediately; never a blank till */ font-weight: 100 900; /* one file, the whole ramp */ src: url('fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'InterVar'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* =========================================================================================== TWO THEMES, ONE SET OF NAMES. Light is the default and lives in :root. Dark is the same names re-bound under [data-theme="dark"] on . To switch: document.documentElement.setAttribute('data-theme', 'dark'); // or remove it for light Nothing outside this file needs to know which theme is on. Every screen consumes these tokens and only these tokens, so a theme is a value swap rather than a second stylesheet — which is the whole reason the pages were converted off literal hexes in the first place. WHY THERE ARE MORE TOKENS THAN THERE WERE. Three groups had to be added because they cannot be derived from the others and they genuinely differ per theme: --glass-* the translucent material. On dark it is white at low alpha; on light it is white at HIGH alpha over a grey page. Same idea, opposite numbers. --well-* recessed areas (ticket body, group panel). Dark recesses toward black, light recesses toward grey — an inset that works on one is invisible on the other. --c-*-text saffron/green/red as TEXT. The fill values are chosen for a coloured surface with ink on top; as text on their own tint they fail AA on light, so each has a readable counterpart. Never use --c-accent for a text colour; use --c-accent-text. CONTRAST. Every text token is measured against the surface it is intended for and nothing below 4.5:1 carries body copy in either theme. =========================================================================================== */ :root { /* ---- surface ramp ------------------------------------------------------- Five steps, true neutral (zero chroma). Depth is read from the step, not from a gradient or a bevel. s-0 is the page; each subsequent step sits on top of the last. On light the ramp runs the other way — s0 is the darkest, because "raised" means "closer to white" on paper. */ --c-s0: #F4F4F6; /* page */ --c-s1: #FAFAFB; /* header / footer bars */ --c-s2: #FFFFFF; /* cards, tiles, modals */ --c-s3: #FFFFFF; /* raised within a card — keypad keys, inputs */ --c-s4: #EFEFF2; /* hover */ /* ---- hairlines ---------------------------------------------------------- */ --c-line: #E3E3E7; /* default separator */ --c-line-strong: #C9C9D0; /* input and tile borders — must be visible, not decorative */ /* ---- text --------------------------------------------------------------- */ --c-text: #17171A; /* 15.9:1 on --c-s0 */ --c-text-dim: #55555F; /* 7.4:1 */ --c-text-faint: #7A7A85; /* 4.6:1 — still legible; not for anything essential */ /* ---- accent: saffron ---------------------------------------------------- The only hue on the screen. Everything else is neutral, which is what makes a single saffron control unmissable without needing to be large. Alternates, if saffron is wrong for the brand — swap the fill and the press: Copper #E2683C / #C4552E Electric #4F7CFF / #3D63D6 */ --c-accent: #F5A524; /* FILL — same in both themes; it is the brand */ --c-accent-press: #D98D14; --c-accent-ink: #17120A; /* text ON accent — white on saffron is 2.1:1 */ --c-accent-text: #8A5A02; /* accent as TEXT on a light ground — 5.4:1 */ --c-accent-wash: rgba(245, 165, 36, .16); /* tint for selected/hover states */ /* ---- semantic ----------------------------------------------------------- Deliberately muted next to the accent. On a till the affirmative action is already the obvious one; it does not also need to be the brightest thing on screen, and a saturated green competing with a saturated amber is how you get a screen nobody can scan. */ --c-go: #2BA96B; --c-go-press: #238956; --c-go-text: #146B41; /* go as TEXT on its own tint — 5.1:1 on light */ --c-stop: #E5484D; --c-stop-press: #C13B3F; --c-stop-text: #A81F24; /* stop as TEXT on its own tint — 5.6:1 on light */ --c-warn: #B87503; /* ---- glass -------------------------------------------------------------- The single material every pane is made of. On light this is white at high alpha, which reads as frosted over the page tint; on dark it inverts to white at low alpha. */ --glass-fill: rgba(255, 255, 255, .70); --glass-fill-hi: rgba(255, 255, 255, .90); --glass-fill-hover: rgba(255, 255, 255, 1); --glass-line: rgba(0, 0, 0, .09); --glass-line-hi: rgba(0, 0, 0, .16); --glass-blur: blur(20px) saturate(140%); --glass-blur-lite: blur(10px) saturate(130%); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9); /* PANE glass — for a container that covers most of the screen, not a control. Size changes what the same alpha does. At the size of a button, .70 white still lets the page tint through visibly, because you can see the un-frosted page immediately beside it and read the difference. At the size of a full-page card there is no beside — the pane IS the screen — so .70 just looks like a white page with a border, and every gradient behind it is flattened to a pastel wash. The material stops being legible as material. Large panes therefore get a much lower alpha, so the colour ground survives them. Use --glass-fill for controls, this for the pane they sit in. FILL ONLY — DO NOT PAIR THIS WITH backdrop-filter. A full-page pane sits over the radial mesh and nothing else, and blurring a smooth gradient returns very nearly the same gradient, so the blur buys nothing. What it costs is real: an element with backdrop-filter becomes a BACKDROP ROOT, and any descendant's own backdrop-filter is then silently dropped. Put blur on a page card and every popover, dropdown and inline dialog inside it stops frosting — it renders as a flat translucent box with sharp text showing straight through. Blur belongs on the things that float ON the pane, not on the pane. */ --glass-fill-pane: rgba(255, 255, 255, .34); /* Floating surfaces — dialogs, dropdowns, toasts. THE SCRIM AND THE CARD ARE TUNED AS A PAIR. It is tempting to make a dialog translucent and stop there, but if the scrim behind it has already flattened the page to a solid wash there is nothing left to show through and the card just looks milky. So the scrim is light enough that the POS keeps its shapes and colours, and the card is transparent enough to let them read as depth. The card's blur is what keeps this safe: at 30px the grid underneath is unresolvable — colour and mass, never text — so nothing competes with the dialog's own words even though you can plainly see something is there. */ --scrim: rgba(232, 232, 238, .42); --scrim-blur: blur(11px) saturate(115%); --c-popover: rgba(255, 255, 255, .84); --modal-fill: rgba(255, 255, 255, .58); --modal-blur: blur(30px) saturate(180%); /* Order-type tags. Categorical, so they cannot be derived from the accent — and they need re-picking per theme because a pastel that reads on black disappears on white. */ --tag-counter: #5B4BBF; --tag-take: #1F6FB2; /* NAVIGATION SELECTION — which category tab is active. Deliberately NOT the accent. Saffron already means money on the POS (the tender ribbon, the cash keys, the order total), and using it for "where am I in the menu" as well makes one colour carry two unrelated meanings on the same screen. This is the only place this hue appears, so changing it here changes the tab strip and nothing else. */ --c-nav: #1F6FB2; --c-nav-wash: rgba(31, 111, 178, .12); /* ---- wells -------------------------------------------------------------- Recessed regions: the ticket body, the group panel, an amount display. */ --well-fill: rgba(0, 0, 0, .04); --well-fill-strong: rgba(0, 0, 0, .07); /* ---- ambient ------------------------------------------------------------ The two colour fields behind the glass. Kept as tokens so the ground stays legible in both themes instead of being a dark-only flourish. */ --amb-warm: rgba(245, 165, 36, .34); --amb-cool: rgba(64, 96, 150, .26); /* Four-point mesh behind the item grid. Held far lower than a marketing gradient would be: it is there to give translucent tiles an edge to sit against, and anything stronger starts competing with the tile colours, which are data. */ --mesh-a: rgba(245, 165, 36, .30); --mesh-b: rgba(64, 128, 190, .27); --mesh-c: rgba(226, 104, 60, .20); --mesh-d: rgba(120, 90, 190, .22); /* How much of its own colour a tinted-glass item tile keeps. This HAS to differ per theme and it is not a taste setting. A colour mixed toward transparent over a near-white ground loses saturation fast — 40% of a mid blue on white is a pale grey-blue with nothing left to identify — whereas the same 40% over near-black stays recognisably blue. Light therefore needs far more of the hue to remain findable at a glance, and to keep a white label above 4.5:1. */ --tile-tint: 72%; --tile-tint-hover: 84%; /* The æ behind the ticket. Needs to differ per theme: the same alpha that reads as a faint ghost on near-black reads as a solid peach shape on near-white, because the mark is saffron and saffron is far closer to white than to black. */ --watermark-alpha: .06; /* ---- geometry ----------------------------------------------------------- Generous and consistent. The old UI mixed 6/8/10/12/14px radii with no rule. */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; /* ---- elevation ---------------------------------------------------------- One shadow, for modals only. Everything else uses the surface ramp. */ --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, .28); /* ---- type --------------------------------------------------------------- Negative tracking on display sizes is what stops Inter reading as generic at large weights; positive tracking on small caps labels stops them reading as a smudge. */ --font: 'InterVar', system-ui, -apple-system, 'Segoe UI', sans-serif; --track-display: -.022em; --track-tight: -.012em; --track-label: .06em; } /* =========================================================================================== DARK. Same names, re-bound. Set data-theme="dark" on . =========================================================================================== */ :root[data-theme="dark"] { --c-s0: #0A0A0B; --c-s1: #121214; --c-s2: #191A1D; --c-s3: #212226; --c-s4: #2A2C31; --c-line: #26272B; --c-line-strong: #35373D; --c-text: #F4F4F5; /* 17.4:1 */ --c-text-dim: #A1A2A8; /* 7.1:1 */ --c-text-faint: #6E7076; /* 4.6:1 */ /* Saffron is bright enough to be its own text colour on a dark ground, so accent-text collapses back onto the fill here. */ --c-accent-text: #F5A524; --c-accent-wash: rgba(245, 165, 36, .12); --c-go-text: #5FD69C; --c-stop-text: #FF8A8D; --c-warn: #F5A524; --glass-fill: rgba(255, 255, 255, .05); --glass-fill-hi: rgba(255, 255, 255, .085); --glass-fill-hover: rgba(255, 255, 255, .13); --glass-line: rgba(255, 255, 255, .10); --glass-line-hi: rgba(255, 255, 255, .18); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, .12); /* Pane glass on dark barely needs to move — .05 white over a dark ground is already almost all ground. It drops a little anyway so the mesh behind a full-page card stays as visible as it is behind a small one. Same fill-only rule as light; see the note there. */ --glass-fill-pane: rgba(255, 255, 255, .035); --scrim: rgba(6, 6, 8, .52); --c-popover: rgba(25, 26, 29, .72); --modal-fill: rgba(25, 26, 29, .55); --tag-counter: #A99BFF; --tag-take: #7FB6F5; --c-nav: #7FB6F5; --c-nav-wash: rgba(127, 182, 245, .14); --well-fill: rgba(0, 0, 0, .22); --well-fill-strong: rgba(0, 0, 0, .30); --amb-warm: rgba(245, 165, 36, .16); --amb-cool: rgba(64, 96, 150, .19); --mesh-a: rgba(245, 165, 36, .16); --mesh-b: rgba(64, 128, 190, .20); --mesh-c: rgba(226, 104, 60, .12); --mesh-d: rgba(120, 90, 190, .16); --tile-tint: 46%; --tile-tint-hover: 60%; --watermark-alpha: .07; --shadow-modal: 0 24px 64px -12px rgba(0, 0, 0, .75); } /* --------------------------------------------------------------------------- Base. Kept minimal — MudBlazor supplies its own reset and this only sets what the app assumes globally. --------------------------------------------------------------------------- */ html, body { font-family: var(--font); background: var(--c-s0); color: var(--c-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Inter's contextual alternates and tabular figures. tnum matters everywhere money or a PIN is shown: proportional digits make a running total jitter as it changes. */ font-feature-settings: 'cv05' 1, 'ss03' 1; font-variant-numeric: tabular-nums; } /* A POS is touched, not browsed. Text selection on a button label is only ever an accident, and the blue tap flash on Android WebView is not ours to style. */ button, .no-select { -webkit-tap-highlight-color: transparent; user-select: none; } /* Numbers that must not jitter: totals, PINs, clocks, quantities. */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }