/* ============================================================================ AllRegions — «День и Ночь» design system. One skeleton, two skins driven ENTIRELY by tokens: Light («Джой»): milk paper, white cards, Nintendo red, yellow discount stickers, tactile thick-bottom cards. Dark («Полночь»): OLED near-black, indigo accent, green discount chips, ambient cover glow, flat hairline cards. Theme switching: (set before first paint by the inline script in index.html; toggled from the header). No attribute = follow the system via prefers-color-scheme. Components — global AND scoped (.razor.css) — style through these tokens only; never hardcode a surface/ink color in a component again. ============================================================================ */ :root { /* surfaces + ink */ --bg: #FDF9F4; /* page — warm milk */ --sf: #FFFFFF; /* cards, panels */ --sf2: #F7F2EA; /* inset surfaces: inputs, hover, thumbs */ --ln: #F0E9DF; /* hairlines / borders */ --ln2: #EBE2D4; /* thick-bottom ("lift") tint */ --tx: #22252B; /* primary ink */ --tx2: #4A4538; /* secondary ink */ --mut: #8A8578; /* muted ink */ /* action accent (light = Nintendo red) */ --acc: #E4032E; --acc-ink: #FFFFFF; --acc-brd: #C00227; --acc-soft: rgba(228, 3, 46, 0.10); /* constants across themes */ --red: #E4032E; /* hearts, destructive, brand dot */ --deal: #0C9A5B; /* savings / "good" semantics */ --deal-bg: #E6F6EC; --deal-brd: #CDEBD8; --gold: #D98E00; /* stars, chart-NEW */ --warn: #B7791F; /* stale-price notes */ --info: #2E7CE4; /* preorder */ --coming: #7A5AF5; /* coming-soon, SW2 flavor */ /* discount presentation: yellow rotated sticker by day, green chip by night */ --disc-bg: #FFD400; --disc-ink: #3A3000; --disc-rot: -5deg; --disc-sh: 0 3px 8px rgba(58, 48, 0, 0.18); /* cover overlays */ --sw2-bg: rgba(255, 255, 255, 0.94); --sw2-tx: #6A48E8; --heart-bg: rgba(255, 255, 255, 0.95); /* form */ --lift: 3px; /* thick bottom — CARDS only */ --card-sh: 0 4px 14px -8px rgba(122, 90, 40, 0.25); /* hover shadow */ --frame-sh: 0 16px 40px -24px rgba(122, 90, 40, 0.4); --shelf-sh: 0 8px 16px -14px rgba(122, 90, 40, 0.55); /* mobile nav shelf */ --glow-op: 0; /* ambient cover glow (dark only) */ /* type */ --fd: 'Nunito', system-ui, -apple-system, sans-serif; /* interface + headings */ --fn: 'Manrope', system-ui, sans-serif; /* digits, prices, data */ --fl: 'Unbounded', system-ui, sans-serif; /* logo wordmark only */ } /* The same three stacks with the flag font in FRONT, for the platforms that ship no flag glyphs (Windows). index.html stamps the class before first paint; the @font-face and the whole reason this exists are in fonts.css. **Restating the stacks is the point of putting this HERE.** Prepending a family cannot be done from a variable — CSS has no way to add to an inherited list — so the choice was between an obscure empty-token trick and three copied lines. Copied lines three rows below their originals cannot drift unseen; a trick in another file can. Change a stack above, change it here. Front, not back, and `unicode-range: U+1F1E6-1F1FF` on the face is what makes that safe: the family can only ever be consulted for regional-indicator characters, so it cannot touch a letter, a digit or any other emoji, and no element that prints a flag has to be found and listed. */ html.needs-flag-font { --fd: 'Twemoji Country Flags', 'Nunito', system-ui, -apple-system, sans-serif; --fn: 'Twemoji Country Flags', 'Manrope', system-ui, sans-serif; --fl: 'Twemoji Country Flags', 'Unbounded', system-ui, sans-serif; } /* A native