/* ============================================================================= THEME TOKENS — GENERATED FILE, DO NOT EDIT BY HAND ============================================================================= Generated by Blerc.SharedUI.Theming.ThemeCssBuilder from the registered ThemeDefinition records. Editing this file directly will be reverted the next time it is regenerated, and ThemeStylesheetTests will fail in the meantime. To change a colour, change the theme record. 14 themes x 2 modes x 44 tokens. HOW IT WORKS ------------ carries two attributes: data-theme="" which palette (always present) data-mode="light|dark|system" the visitor's choice (absent = none made) Each theme block below declares its raw values as --l- and --d-. The MODE SWITCH section then maps one of those layers onto the plain -- names that components and SharedUI.css consume. Nothing outside this file should ever reference --l-* or --d-*. Precedence, in one place: 1. data-mode="dark" -> dark, whatever the device says 2. data-mode="light" -> light, whatever the device says 3. data-mode="system" + device dark -> dark (the visitor chose Auto) 4. no data-mode -> light (nobody has chosen: D91) ============================================================================= */ /* ============================================================================= TYPOGRAPHY — theme-independent ============================================================================= */ :root { --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ============================================================================= STORE BRANDS — theme-independent ============================================================================= The one exception to "every colour is a theme token" (hard rule 8). A store's colour is its identity: it must not change when someone picks Halloween. Projected from the StoreColor attribute on Enums.Store, which is the same source C# reads — see ThemeCssBuilder.AppendStoreBrandTokens. ============================================================================= */ :root { --store-woolworths: #007A33; --store-coles: #E41E26; --store-aldi: #1B3774; --store-iga: #EC1C24; --store-costco: #005DAA; /* Brand colour at 8%, for the tinted pill behind a store name. Emitted rather than color-mix()'d for the same reason as the other alphas. */ --brandsoft-woolworths: rgba(0,122,51,0.08); --brandsoft-coles: rgba(228,30,38,0.08); --brandsoft-aldi: rgba(27,55,116,0.08); --brandsoft-iga: rgba(236,28,36,0.08); --brandsoft-costco: rgba(0,93,170,0.08); } /* ============================================================================= MODE SWITCH — shared by every theme ============================================================================= */ /* Light is the base. Design rule 1: dark text on a light background reads measurably better for most people, so it is what an unconfigured visit gets. */ :root { color-scheme: light; --bg: var(--l-bg); --surface: var(--l-surface); --border: var(--l-border); --field: var(--l-field); --fieldBorder: var(--l-fieldBorder); --text: var(--l-text); --textMut: var(--l-textMut); --primary: var(--l-primary); --primaryHover: var(--l-primaryHover); --onPrimary: var(--l-onPrimary); --accent: var(--l-accent); --onAccent: var(--l-onAccent); --accentSoft: var(--l-accentSoft); --accentText: var(--l-accentText); --savings: var(--l-savings); --heroA: var(--l-heroA); --heroB: var(--l-heroB); --rowBg: var(--l-rowBg); --bestBg: var(--l-bestBg); --hoverWash: var(--l-hoverWash); --cardShadow: var(--l-cardShadow); --glow: var(--l-glow); --glowSoft: var(--l-glowSoft); --searchGlow1: var(--l-searchGlow1); --searchGlow2: var(--l-searchGlow2); --okSoft: var(--l-okSoft); --okText: var(--l-okText); --rowBg2: var(--l-rowBg2); --shine: var(--l-shine); --surfaceAlpha: var(--l-surfaceAlpha); --glass: var(--l-glass); --logoFilter: var(--l-logoFilter); --accentSoftBorder: var(--l-accentSoftBorder); --warnSoft: var(--l-warnSoft); --warnText: var(--l-warnText); --warnStrong: var(--l-warnStrong); --infoSoft: var(--l-infoSoft); --infoText: var(--l-infoText); --errSoft: var(--l-errSoft); --errText: var(--l-errText); --errStrong: var(--l-errStrong); --logBg: var(--l-logBg); --logText: var(--l-logText); --logMut: var(--l-logMut); --brandtext-woolworths: var(--l-brandtext-woolworths); --brandtext-coles: var(--l-brandtext-coles); --brandtext-aldi: var(--l-brandtext-aldi); --brandtext-iga: var(--l-brandtext-iga); --brandtext-costco: var(--l-brandtext-costco); } /* The visitor asked to follow their device, and the device wants dark. Scoped to data-mode="system" rather than "anything that isn't light": an absent data-mode means nobody has chosen yet, and that resolves to light above. Following the device is a choice, not the fallback (D91). */ @media (prefers-color-scheme: dark) { :root[data-mode="system"] { color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --border: var(--d-border); --field: var(--d-field); --fieldBorder: var(--d-fieldBorder); --text: var(--d-text); --textMut: var(--d-textMut); --primary: var(--d-primary); --primaryHover: var(--d-primaryHover); --onPrimary: var(--d-onPrimary); --accent: var(--d-accent); --onAccent: var(--d-onAccent); --accentSoft: var(--d-accentSoft); --accentText: var(--d-accentText); --savings: var(--d-savings); --heroA: var(--d-heroA); --heroB: var(--d-heroB); --rowBg: var(--d-rowBg); --bestBg: var(--d-bestBg); --hoverWash: var(--d-hoverWash); --cardShadow: var(--d-cardShadow); --glow: var(--d-glow); --glowSoft: var(--d-glowSoft); --searchGlow1: var(--d-searchGlow1); --searchGlow2: var(--d-searchGlow2); --okSoft: var(--d-okSoft); --okText: var(--d-okText); --rowBg2: var(--d-rowBg2); --shine: var(--d-shine); --surfaceAlpha: var(--d-surfaceAlpha); --glass: var(--d-glass); --logoFilter: var(--d-logoFilter); --accentSoftBorder: var(--d-accentSoftBorder); --warnSoft: var(--d-warnSoft); --warnText: var(--d-warnText); --warnStrong: var(--d-warnStrong); --infoSoft: var(--d-infoSoft); --infoText: var(--d-infoText); --errSoft: var(--d-errSoft); --errText: var(--d-errText); --errStrong: var(--d-errStrong); --logBg: var(--d-logBg); --logText: var(--d-logText); --logMut: var(--d-logMut); --brandtext-woolworths: var(--d-brandtext-woolworths); --brandtext-coles: var(--d-brandtext-coles); --brandtext-aldi: var(--d-brandtext-aldi); --brandtext-iga: var(--d-brandtext-iga); --brandtext-costco: var(--d-brandtext-costco); } } /* Explicit dark. Last in source order, so it beats the media query above on an equal-specificity tie and dark wins on a light device. */ :root[data-mode="dark"] { color-scheme: dark; --bg: var(--d-bg); --surface: var(--d-surface); --border: var(--d-border); --field: var(--d-field); --fieldBorder: var(--d-fieldBorder); --text: var(--d-text); --textMut: var(--d-textMut); --primary: var(--d-primary); --primaryHover: var(--d-primaryHover); --onPrimary: var(--d-onPrimary); --accent: var(--d-accent); --onAccent: var(--d-onAccent); --accentSoft: var(--d-accentSoft); --accentText: var(--d-accentText); --savings: var(--d-savings); --heroA: var(--d-heroA); --heroB: var(--d-heroB); --rowBg: var(--d-rowBg); --bestBg: var(--d-bestBg); --hoverWash: var(--d-hoverWash); --cardShadow: var(--d-cardShadow); --glow: var(--d-glow); --glowSoft: var(--d-glowSoft); --searchGlow1: var(--d-searchGlow1); --searchGlow2: var(--d-searchGlow2); --okSoft: var(--d-okSoft); --okText: var(--d-okText); --rowBg2: var(--d-rowBg2); --shine: var(--d-shine); --surfaceAlpha: var(--d-surfaceAlpha); --glass: var(--d-glass); --logoFilter: var(--d-logoFilter); --accentSoftBorder: var(--d-accentSoftBorder); --warnSoft: var(--d-warnSoft); --warnText: var(--d-warnText); --warnStrong: var(--d-warnStrong); --infoSoft: var(--d-infoSoft); --infoText: var(--d-infoText); --errSoft: var(--d-errSoft); --errText: var(--d-errText); --errStrong: var(--d-errStrong); --logBg: var(--d-logBg); --logText: var(--d-logText); --logMut: var(--d-logMut); --brandtext-woolworths: var(--d-brandtext-woolworths); --brandtext-coles: var(--d-brandtext-coles); --brandtext-aldi: var(--d-brandtext-aldi); --brandtext-iga: var(--d-brandtext-iga); --brandtext-costco: var(--d-brandtext-costco); } /* ============================================================================= Default (default) Refreshed brand. The Cuugo green deepened for AA contrast, coral kept as the warm accent, and dark mode moved off the old purple-grey onto a green-tinted charcoal that actually belongs to the brand. ============================================================================= */ :root[data-theme="default"] { --theme-dot: #0B9B76; --theme-dot-on: #10141A; /* light */ --l-bg: #F6FAF8; --l-surface: #FFFFFF; --l-border: #E1EAE5; --l-field: #EFF5F1; --l-fieldBorder: #DCE7E0; --l-text: #182721; --l-textMut: #5B6F66; --l-primary: #07815F; --l-primaryHover: #066A4E; --l-onPrimary: #FFFFFF; --l-accent: #F26461; --l-onAccent: #FFFFFF; --l-accentSoft: #FDEAE9; --l-accentText: #B93A38; --l-savings: #0B8A45; --l-heroA: #EAF6F0; --l-heroB: #F6FAF8; --l-rowBg: #FFFFFF; --l-bestBg: #EDF8F2; --l-hoverWash: rgba(11,155,118,.08); --l-cardShadow: 0 1px 3px rgba(24,39,33,.06); --l-glow: rgba(7,129,95,0.13); --l-glowSoft: rgba(7,129,95,0.12); --l-searchGlow1: rgba(7,129,95,0.1); --l-searchGlow2: rgba(7,129,95,0.13); --l-okSoft: #E2F1E9; --l-okText: #0A7C3E; --l-rowBg2: #F6FAF8; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #EEC3C2; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #101915; --l-logText: #C2C7C5; --l-logMut: #94A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #0E1613; --d-surface: #152019; --d-border: #243329; --d-field: #1B2820; --d-fieldBorder: #2C3E33; --d-text: #E4EFE9; --d-textMut: #9BB1A6; --d-primary: #2ED3A4; --d-primaryHover: #57DFB7; --d-onPrimary: #08211A; --d-accent: #FF8A87; --d-onAccent: #331312; --d-accentSoft: #3A2422; --d-accentText: #FFB3B1; --d-savings: #4ADE80; --d-heroA: #13241C; --d-heroB: #0E1613; --d-rowBg: #152019; --d-bestBg: #1A3327; --d-hoverWash: rgba(46,211,164,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.4); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(46,211,164,0.14); --d-searchGlow1: rgba(46,211,164,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #20462E; --d-okText: #4ADE80; --d-rowBg2: #121B16; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(21,32,25,0.9); --d-glass: rgba(21,32,25,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #654341; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #111A15; --d-logText: #C0C8C4; --d-logMut: #91A199; --d-brandtext-woolworths: #389760; --d-brandtext-coles: #EA5056; --d-brandtext-aldi: #7687AC; --d-brandtext-iga: #F04950; --d-brandtext-costco: #478AC2; } /* ============================================================================= Cuugo Classic (classic) Cuugo Classic — the logo colours. The exact brand coral #FF7675 and green #00B894 worn by buttons and chips (with dark labels, since the true hues can't carry white text), deepened only where colour becomes text. Coral leads, like the logo. Dark mode is a warm charcoal, not green-tinted. ============================================================================= */ :root[data-theme="classic"] { --theme-dot: #FF7675; --theme-dot-on: #10141A; /* light */ --l-bg: #FBF6F5; --l-surface: #FFFFFF; --l-border: #EFE1DF; --l-field: #F7ECEA; --l-fieldBorder: #EBDBD8; --l-text: #2A1D1C; --l-textMut: #75615F; --l-primary: #CE4644; --l-primaryHover: #B33A38; --l-onPrimary: #FFFFFF; --l-accent: #00B894; --l-onAccent: #062E24; --l-accentSoft: #DCF5EC; --l-accentText: #00705D; --l-savings: #00806A; --l-heroA: #FBEAE8; --l-heroB: #FBF6F5; --l-rowBg: #FFFFFF; --l-bestBg: #E9F7F1; --l-hoverWash: rgba(206,70,68,.08); --l-cardShadow: 0 1px 3px rgba(42,29,28,.06); --l-glow: rgba(206,70,68,0.13); --l-glowSoft: rgba(206,70,68,0.12); --l-searchGlow1: rgba(206,70,68,0.1); --l-searchGlow2: rgba(206,70,68,0.13); --l-okSoft: #E0F0ED; --l-okText: #007864; --l-rowBg2: #FBF6F5; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #ACD8CD; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #1B1312; --l-logText: #C4C6C4; --l-logMut: #959F9A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #171211; --d-surface: #201817; --d-border: #362927; --d-field: #2A201E; --d-fieldBorder: #413230; --d-text: #F2E9E7; --d-textMut: #B5A29F; --d-primary: #FF8A88; --d-primaryHover: #FFA3A1; --d-onPrimary: #3A0F0E; --d-accent: #33D1A6; --d-onAccent: #062E24; --d-accentSoft: #123329; --d-accentText: #5FE3BE; --d-savings: #3BD695; --d-heroA: #2A1A18; --d-heroB: #171211; --d-rowBg: #201817; --d-bestBg: #16302A; --d-hoverWash: rgba(255,138,136,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(255,138,136,0.14); --d-searchGlow1: rgba(255,138,136,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #253E30; --d-okText: #3BD695; --d-rowBg2: #1C1514; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(32,24,23,0.9); --d-glass: rgba(32,24,23,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #235A4A; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #1B1413; --d-logText: #C9C4C2; --d-logMut: #A29593; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #4287C0; } /* ============================================================================= Autumn (autumn) Autumn (Mar–May). Burnt orange and harvest gold on warm cream; dark mode is a roasted brown-black. Reads like late-afternoon light without going full pumpkin. ============================================================================= */ :root[data-theme="autumn"] { --theme-dot: #C05621; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #FBF6EE; --l-surface: #FFFFFF; --l-border: #EBDFCE; --l-field: #F5EDDF; --l-fieldBorder: #E6D8C2; --l-text: #33241A; --l-textMut: #7A6A58; --l-primary: #C05621; --l-primaryHover: #A34715; --l-onPrimary: #FFFFFF; --l-accent: #B8860B; --l-onAccent: #FFFFFF; --l-accentSoft: #F7EBD0; --l-accentText: #7D5B07; --l-savings: #3F7D2C; --l-heroA: #F6E9D4; --l-heroB: #FBF6EE; --l-rowBg: #FFFFFF; --l-bestBg: #F3F0E0; --l-hoverWash: rgba(192,86,33,.08); --l-cardShadow: 0 1px 3px rgba(51,36,26,.07); --l-glow: rgba(192,86,33,0.13); --l-glowSoft: rgba(192,86,33,0.12); --l-searchGlow1: rgba(192,86,33,0.1); --l-searchGlow2: rgba(192,86,33,0.13); --l-okSoft: #E8EFE6; --l-okText: #3C782A; --l-rowBg2: #FBF6EE; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #DCCBA4; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #211711; --l-logText: #C4C6C4; --l-logMut: #95A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #191009; --d-surface: #221710; --d-border: #392A1D; --d-field: #2A1E14; --d-fieldBorder: #443221; --d-text: #F0E6DA; --d-textMut: #B3A18C; --d-primary: #E8823E; --d-primaryHover: #F09B5F; --d-onPrimary: #2A1505; --d-accent: #E3B341; --d-onAccent: #2E2205; --d-accentSoft: #3A2E14; --d-accentText: #F0CB74; --d-savings: #7BC65A; --d-heroA: #2A1B0E; --d-heroB: #191009; --d-rowBg: #221710; --d-bestBg: #2E2416; --d-hoverWash: rgba(232,130,62,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(232,130,62,0.14); --d-searchGlow1: rgba(232,130,62,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #343A1F; --d-okText: #7BC65A; --d-rowBg2: #1E140C; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(34,23,16,0.9); --d-glass: rgba(34,23,16,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #625129; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #1D130C; --d-logText: #C7C0B9; --d-logMut: #A09484; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF3C43; --d-brandtext-costco: #4287C0; } /* ============================================================================= Winter (winter) Winter (Jun–Aug). Cool slate blues and frost — crisp, quiet, a touch of ice in the accents. Dark mode is a deep winter-night navy. ============================================================================= */ :root[data-theme="winter"] { --theme-dot: #2B6CB0; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #F3F7FB; --l-surface: #FFFFFF; --l-border: #DDE7F0; --l-field: #EAF1F7; --l-fieldBorder: #D5E2ED; --l-text: #1B2733; --l-textMut: #5D7185; --l-primary: #2B6CB0; --l-primaryHover: #215689; --l-onPrimary: #FFFFFF; --l-accent: #28849B; --l-onAccent: #FFFFFF; --l-accentSoft: #E2F2F6; --l-accentText: #1D6674; --l-savings: #1D8A56; --l-heroA: #E3EEF7; --l-heroB: #F3F7FB; --l-rowBg: #FFFFFF; --l-bestBg: #EAF3EE; --l-hoverWash: rgba(43,108,176,.08); --l-cardShadow: 0 1px 3px rgba(27,39,51,.06); --l-glow: rgba(43,108,176,0.13); --l-glowSoft: rgba(43,108,176,0.12); --l-searchGlow1: rgba(43,108,176,0.1); --l-searchGlow2: rgba(43,108,176,0.13); --l-okSoft: #E4F1EB; --l-okText: #1A794C; --l-rowBg2: #F3F7FB; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #B7D3D9; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #121921; --l-logText: #C2C7C6; --l-logMut: #94A09B; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #0C131C; --d-surface: #121D29; --d-border: #20303F; --d-field: #182533; --d-fieldBorder: #283A4C; --d-text: #E2EBF3; --d-textMut: #93A8BC; --d-primary: #5CA8E8; --d-primaryHover: #7FBCF0; --d-onPrimary: #0A1B2A; --d-accent: #6BD0E4; --d-onAccent: #062A32; --d-accentSoft: #173540; --d-accentText: #96DFEF; --d-savings: #43D68E; --d-heroA: #122031; --d-heroB: #0C131C; --d-rowBg: #121D29; --d-bestBg: #15302A; --d-hoverWash: rgba(92,168,232,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(92,168,232,0.14); --d-searchGlow1: rgba(92,168,232,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #1C423D; --d-okText: #43D68E; --d-rowBg2: #0F1822; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(18,29,41,0.9); --d-glass: rgba(18,29,41,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #335A66; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #0E1721; --d-logText: #BEC5CA; --d-logMut: #8A99A7; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E94B51; --d-brandtext-aldi: #7687AC; --d-brandtext-iga: #EF454B; --d-brandtext-costco: #478AC2; } /* ============================================================================= Spring (spring) Spring (Sep–Nov). New-growth green with wattle-blossom pink. Fresh without being neon; dark mode is a soft moss night. ============================================================================= */ :root[data-theme="spring"] { --theme-dot: #55A630; --theme-dot-on: #10141A; /* light */ --l-bg: #F6FAF3; --l-surface: #FFFFFF; --l-border: #E2EBD9; --l-field: #EEF5E7; --l-fieldBorder: #DDE9D0; --l-text: #1F2B18; --l-textMut: #63735A; --l-primary: #3E7A1F; --l-primaryHover: #336618; --l-onPrimary: #FFFFFF; --l-accent: #D9578E; --l-onAccent: #FFFFFF; --l-accentSoft: #FBE5EF; --l-accentText: #A83368; --l-savings: #2F8F4E; --l-heroA: #EAF5E1; --l-heroB: #F6FAF3; --l-rowBg: #FFFFFF; --l-bestBg: #EDF6E8; --l-hoverWash: rgba(78,150,41,.08); --l-cardShadow: 0 1px 3px rgba(31,43,24,.06); --l-glow: rgba(62,122,31,0.13); --l-glowSoft: rgba(62,122,31,0.12); --l-searchGlow1: rgba(62,122,31,0.1); --l-searchGlow2: rgba(62,122,31,0.13); --l-okSoft: #E6F2EA; --l-okText: #287B43; --l-rowBg2: #F6FAF3; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #E9BED1; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #141C10; --l-logText: #C3C7C4; --l-logMut: #94A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #101609; --d-surface: #182111; --d-border: #2A371F; --d-field: #202B16; --d-fieldBorder: #344226; --d-text: #E9F0E1; --d-textMut: #A6B598; --d-primary: #8FD35E; --d-primaryHover: #A8DE7E; --d-onPrimary: #14260A; --d-accent: #F085B5; --d-onAccent: #3A0F24; --d-accentSoft: #3A2230; --d-accentText: #F7AECD; --d-savings: #6CD68B; --d-heroA: #1A2A10; --d-heroB: #101609; --d-rowBg: #182111; --d-bestBg: #213321; --d-hoverWash: rgba(143,211,94,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(143,211,94,0.14); --d-searchGlow1: rgba(143,211,94,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #294529; --d-okText: #6CD68B; --d-rowBg2: #141C0D; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(24,33,17,0.9); --d-glass: rgba(24,33,17,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #644153; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #131A0C; --d-logText: #C4C8BF; --d-logMut: #9AA590; --d-brandtext-woolworths: #389760; --d-brandtext-coles: #EA5056; --d-brandtext-aldi: #7687AC; --d-brandtext-iga: #F04950; --d-brandtext-costco: #4C8EC4; } /* ============================================================================= Summer (summer) Summer (Dec–Feb). Ocean teal and sun amber — beach-day energy. Dark mode goes deep-sea rather than plain black. ============================================================================= */ :root[data-theme="summer"] { --theme-dot: #0891B2; --theme-dot-on: #10141A; /* light */ --l-bg: #F4FAFB; --l-surface: #FFFFFF; --l-border: #DBEBEF; --l-field: #E9F4F6; --l-fieldBorder: #D2E6EB; --l-text: #12333B; --l-textMut: #527680; --l-primary: #077490; --l-primaryHover: #055D74; --l-onPrimary: #FFFFFF; --l-accent: #F59E0B; --l-onAccent: #3A2600; --l-accentSoft: #FDF0D5; --l-accentText: #8A5A04; --l-savings: #0E8F52; --l-heroA: #E1F3F6; --l-heroB: #F4FAFB; --l-rowBg: #FFFFFF; --l-bestBg: #E9F6EF; --l-hoverWash: rgba(7,132,163,.08); --l-cardShadow: 0 1px 3px rgba(18,51,59,.06); --l-glow: rgba(7,116,144,0.13); --l-glowSoft: rgba(7,116,144,0.12); --l-searchGlow1: rgba(7,116,144,0.1); --l-searchGlow2: rgba(7,116,144,0.13); --l-okSoft: #E2F2EA; --l-okText: #0C7B47; --l-rowBg2: #F4FAFB; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #E4CFA7; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #0C2126; --l-logText: #C2C7C7; --l-logMut: #94A19C; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #07171D; --d-surface: #0E2129; --d-border: #1B3641; --d-field: #132B35; --d-fieldBorder: #224350; --d-text: #DFF0F4; --d-textMut: #8FB0BA; --d-primary: #38C4E3; --d-primaryHover: #63D2EB; --d-onPrimary: #04252E; --d-accent: #FBBF44; --d-onAccent: #332200; --d-accentSoft: #3A2E10; --d-accentText: #FCD683; --d-savings: #3DD68C; --d-heroA: #0C2833; --d-heroB: #07171D; --d-rowBg: #0E2129; --d-bestBg: #123329; --d-hoverWash: rgba(56,196,227,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(56,196,227,0.14); --d-searchGlow1: rgba(56,196,227,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #17453D; --d-okText: #3DD68C; --d-rowBg2: #0A1C23; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(14,33,41,0.9); --d-glass: rgba(14,33,41,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #655329; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #0A1B22; --d-logText: #BDC9CC; --d-logMut: #88A0A7; --d-brandtext-woolworths: #389760; --d-brandtext-coles: #EA5056; --d-brandtext-aldi: #7687AC; --d-brandtext-iga: #F04950; --d-brandtext-costco: #4C8EC4; } /* ============================================================================= Christmas (christmas) Christmas. Pine green with cranberry (not pure red — pure red beside green causes an optical shimmer called chromostereopsis). Green owns structure; cranberry appears only in small badges. Gold marks savings in dark mode. ============================================================================= */ :root[data-theme="christmas"] { --theme-dot: #166534; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #FAF7F1; --l-surface: #FFFFFF; --l-border: #E8E0D2; --l-field: #F3EEE3; --l-fieldBorder: #E3DAC8; --l-text: #22271F; --l-textMut: #68705F; --l-primary: #166534; --l-primaryHover: #0F5129; --l-onPrimary: #FFFFFF; --l-accent: #A61E3C; --l-onAccent: #FFFFFF; --l-accentSoft: #F8E4E8; --l-accentText: #83172F; --l-savings: #1B7A3E; --l-heroA: #EDEADB; --l-heroB: #FAF7F1; --l-rowBg: #FFFFFF; --l-bestBg: #ECF2E8; --l-hoverWash: rgba(22,101,52,.08); --l-cardShadow: 0 1px 3px rgba(34,39,31,.07); --l-glow: rgba(22,101,52,0.13); --l-glowSoft: rgba(22,101,52,0.12); --l-searchGlow1: rgba(22,101,52,0.1); --l-searchGlow2: rgba(22,101,52,0.13); --l-okSoft: #E4EFE8; --l-okText: #1B7A3E; --l-rowBg2: #FAF7F1; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #DEB7BF; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #161914; --l-logText: #C3C7C4; --l-logMut: #94A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #0B120C; --d-surface: #131C13; --d-border: #25321F; --d-field: #1A2618; --d-fieldBorder: #2E3D28; --d-text: #EAEFE4; --d-textMut: #A3B29A; --d-primary: #4CBF70; --d-primaryHover: #6FD08D; --d-onPrimary: #07220F; --d-accent: #E8798F; --d-onAccent: #38091A; --d-accentSoft: #361A22; --d-accentText: #F2A8B8; --d-savings: #D4A017; --d-heroA: #152213; --d-heroB: #0B120C; --d-rowBg: #131C13; --d-bestBg: #1D2E1A; --d-hoverWash: rgba(76,191,112,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(76,191,112,0.14); --d-searchGlow1: rgba(76,191,112,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #3A3614; --d-okText: #D4A017; --d-rowBg2: #0F1710; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(19,28,19,0.9); --d-glass: rgba(19,28,19,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #5F3943; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #0E160F; --d-logText: #C3C7C0; --d-logMut: #96A190; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #4287C0; } /* ============================================================================= Halloween (halloween) Halloween. Pumpkin on twilight purple — the only theme where dark mode is the real star (purple-black with glowing orange). Light mode stays a sensible parchment. ============================================================================= */ :root[data-theme="halloween"] { --theme-dot: #EA7317; --theme-dot-on: #10141A; /* light */ --l-bg: #FAF6F0; --l-surface: #FFFFFF; --l-border: #EADFD2; --l-field: #F4ECE1; --l-fieldBorder: #E5D8C7; --l-text: #2B2036; --l-textMut: #6F627E; --l-primary: #AD4A05; --l-primaryHover: #933E04; --l-onPrimary: #FFFFFF; --l-accent: #6D28D9; --l-onAccent: #FFFFFF; --l-accentSoft: #EDE4FB; --l-accentText: #5320A6; --l-savings: #217A46; --l-heroA: #F1E7F4; --l-heroB: #FAF6F0; --l-rowBg: #FFFFFF; --l-bestBg: #F1EDE2; --l-hoverWash: rgba(212,97,12,.08); --l-cardShadow: 0 1px 3px rgba(43,32,54,.07); --l-glow: rgba(173,74,5,0.13); --l-glowSoft: rgba(173,74,5,0.12); --l-searchGlow1: rgba(173,74,5,0.1); --l-searchGlow2: rgba(173,74,5,0.13); --l-okSoft: #E4EFE9; --l-okText: #217A46; --l-rowBg2: #FAF6F0; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #CBB9E8; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #1C1523; --l-logText: #C4C6C6; --l-logMut: #959F9C; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #110C1B; --d-surface: #191227; --d-border: #2D2342; --d-field: #211838; --d-fieldBorder: #382C52; --d-text: #EDE7F5; --d-textMut: #A99CC0; --d-primary: #F5883B; --d-primaryHover: #F8A363; --d-onPrimary: #2C1503; --d-accent: #A78BFA; --d-onAccent: #221249; --d-accentSoft: #2E2352; --d-accentText: #C9B8FC; --d-savings: #4ADE80; --d-heroA: #1D1430; --d-heroB: #110C1B; --d-rowBg: #191227; --d-bestBg: #1E2A22; --d-hoverWash: rgba(245,136,59,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(245,136,59,0.14); --d-searchGlow1: rgba(245,136,59,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #233B39; --d-okText: #4ADE80; --d-rowBg2: #150F21; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(25,18,39,0.9); --d-glass: rgba(25,18,39,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #504477; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #140E20; --d-logText: #C5C1CB; --d-logMut: #988FA9; --d-brandtext-woolworths: #2E9258; --d-brandtext-coles: #E84249; --d-brandtext-aldi: #6D7FA6; --d-brandtext-iga: #EE373E; --d-brandtext-costco: #3D84BE; } /* ============================================================================= Easter (easter) Easter. Soft lavender with egg-yolk yellow and mint — pastels tuned dark enough to still pass contrast. Dark mode is a dusky violet, not black. ============================================================================= */ :root[data-theme="easter"] { --theme-dot: #7C6BC4; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #FAF8FD; --l-surface: #FFFFFF; --l-border: #E8E2F2; --l-field: #F2EEF9; --l-fieldBorder: #E2DAF0; --l-text: #28223A; --l-textMut: #6E6685; --l-primary: #6D5BBF; --l-primaryHover: #5847A6; --l-onPrimary: #FFFFFF; --l-accent: #C98A04; --l-onAccent: #332600; --l-accentSoft: #FAF0D2; --l-accentText: #8F6203; --l-savings: #2A8F62; --l-heroA: #EFEAF8; --l-heroB: #FAF8FD; --l-rowBg: #FFFFFF; --l-bestBg: #EBF4EE; --l-hoverWash: rgba(109,91,191,.08); --l-cardShadow: 0 1px 3px rgba(40,34,58,.06); --l-glow: rgba(109,91,191,0.13); --l-glowSoft: rgba(109,91,191,0.12); --l-searchGlow1: rgba(109,91,191,0.1); --l-searchGlow2: rgba(109,91,191,0.13); --l-okSoft: #E5F2EC; --l-okText: #247B54; --l-rowBg2: #FAF8FD; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #E2D1A4; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #1A1626; --l-logText: #C4C6C6; --l-logMut: #95A09C; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #141021; --d-surface: #1C172D; --d-border: #302847; --d-field: #251E3B; --d-fieldBorder: #3B3158; --d-text: #ECE8F5; --d-textMut: #A79EC0; --d-primary: #A594F0; --d-primaryHover: #BCAFF5; --d-onPrimary: #1E1440; --d-accent: #F2CE5A; --d-onAccent: #332600; --d-accentSoft: #38301A; --d-accentText: #F7DF8F; --d-savings: #5ED6A2; --d-heroA: #211A38; --d-heroB: #141021; --d-rowBg: #1C172D; --d-bestBg: #1E2F28; --d-hoverWash: rgba(165,148,240,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(165,148,240,0.14); --d-searchGlow1: rgba(165,148,240,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #293D44; --d-okText: #5ED6A2; --d-rowBg2: #181427; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(28,23,45,0.9); --d-glass: rgba(28,23,45,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #625634; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #171326; --d-logText: #C5C3CC; --d-logMut: #9891AA; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #4287C0; } /* ============================================================================= Anzac Day (anzac) Anzac Day (25 Apr). Deliberately muted and respectful — rosemary grey-green, stone, and a single poppy red used only where it matters. No festive energy on purpose. ============================================================================= */ :root[data-theme="anzac"] { --theme-dot: #4A5D4E; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #F5F3EC; --l-surface: #FFFFFF; --l-border: #E2DFD2; --l-field: #EEEBE0; --l-fieldBorder: #DDD9CA; --l-text: #262A24; --l-textMut: #69705F; --l-primary: #4A5D4E; --l-primaryHover: #39493D; --l-onPrimary: #FFFFFF; --l-accent: #A63A3A; --l-onAccent: #FFFFFF; --l-accentSoft: #F3E3E3; --l-accentText: #7E2C2C; --l-savings: #4A6E43; --l-heroA: #EAE7DA; --l-heroB: #F5F3EC; --l-rowBg: #FFFFFF; --l-bestBg: #EDEEE2; --l-hoverWash: rgba(74,93,78,.08); --l-cardShadow: 0 1px 3px rgba(38,42,36,.06); --l-glow: rgba(74,93,78,0.13); --l-glowSoft: rgba(74,93,78,0.12); --l-searchGlow1: rgba(74,93,78,0.1); --l-searchGlow2: rgba(74,93,78,0.13); --l-okSoft: #E9EEE8; --l-okText: #4A6E43; --l-rowBg2: #F5F3EC; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #D9BBBB; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #191B17; --l-logText: #C4C7C5; --l-logMut: #95A09B; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #12140F; --d-surface: #191C15; --d-border: #2B2F25; --d-field: #21251B; --d-fieldBorder: #343A2C; --d-text: #E7E9E0; --d-textMut: #A2A896; --d-primary: #8FA48E; --d-primaryHover: #A8BAA7; --d-onPrimary: #141A13; --d-accent: #D46A6A; --d-onAccent: #330D0D; --d-accentSoft: #382020; --d-accentText: #E59D9D; --d-savings: #8CBB76; --d-heroA: #1B1F16; --d-heroB: #12140F; --d-rowBg: #191C15; --d-bestBg: #232A1D; --d-hoverWash: rgba(143,164,142,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.45); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(143,164,142,0.14); --d-searchGlow1: rgba(143,164,142,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #303C28; --d-okText: #8CBB76; --d-rowBg2: #161812; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(25,28,21,0.9); --d-glass: rgba(25,28,21,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #5E3C3C; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #151711; --d-logText: #C1C3BD; --d-logMut: #95998C; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E94B51; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #478AC2; } /* ============================================================================= Matariki (matariki) Matariki (NZ, Jun–Jul). Midnight sky, star silver, and dawn teal for the Māori new year. Dark mode is the hero — deep midnight blue with starlight accents. ============================================================================= */ :root[data-theme="matariki"] { --theme-dot: #1E3A8A; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #F3F5FA; --l-surface: #FFFFFF; --l-border: #DEE3EF; --l-field: #EAEEF6; --l-fieldBorder: #D7DEEC; --l-text: #171E33; --l-textMut: #5A6480; --l-primary: #2A44A0; --l-primaryHover: #1F3480; --l-onPrimary: #FFFFFF; --l-accent: #12857A; --l-onAccent: #FFFFFF; --l-accentSoft: #DCF0EE; --l-accentText: #0C635B; --l-savings: #12857A; --l-heroA: #E4E8F5; --l-heroB: #F3F5FA; --l-rowBg: #FFFFFF; --l-bestBg: #E7F2F1; --l-hoverWash: rgba(42,68,160,.08); --l-cardShadow: 0 1px 3px rgba(23,30,51,.06); --l-glow: rgba(42,68,160,0.13); --l-glowSoft: rgba(42,68,160,0.12); --l-searchGlow1: rgba(42,68,160,0.1); --l-searchGlow2: rgba(42,68,160,0.13); --l-okSoft: #E3F0EF; --l-okText: #10786E; --l-rowBg2: #F3F5FA; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #AED1CE; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #0F1421; --l-logText: #C2C6C6; --l-logMut: #949F9A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #070D1D; --d-surface: #0D1630; --d-border: #1C2A50; --d-field: #131F40; --d-fieldBorder: #25355E; --d-text: #E3E9F6; --d-textMut: #93A2C4; --d-primary: #7C96F0; --d-primaryHover: #9CB0F5; --d-onPrimary: #0A1233; --d-accent: #2DD4BF; --d-onAccent: #04302A; --d-accentSoft: #123A35; --d-accentText: #7EE7D8; --d-savings: #2DD4BF; --d-heroA: #0D1A3E; --d-heroB: #070D1D; --d-rowBg: #0D1630; --d-bestBg: #0F2B33; --d-hoverWash: rgba(124,150,240,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.55); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(124,150,240,0.14); --d-searchGlow1: rgba(124,150,240,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #133C4D; --d-okText: #2DD4BF; --d-rowBg2: #0A1226; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(13,22,48,0.9); --d-glass: rgba(13,22,48,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #2A6059; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #091125; --d-logText: #BEC2CC; --d-logMut: #8894AC; --d-brandtext-woolworths: #2E9258; --d-brandtext-coles: #E84249; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF3C43; --d-brandtext-costco: #4287C0; } /* ============================================================================= Melbourne Cup (melbcup) Melbourne Cup (first Tue of Nov). Racing green and trophy gold with a rose accent — the race that stops a nation, in flemington colours. ============================================================================= */ :root[data-theme="melbcup"] { --theme-dot: #14532D; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #F8F7F2; --l-surface: #FFFFFF; --l-border: #E6E3D6; --l-field: #F1EFE4; --l-fieldBorder: #E1DDCC; --l-text: #1D2921; --l-textMut: #5F6E64; --l-primary: #14532D; --l-primaryHover: #0E4023; --l-onPrimary: #FFFFFF; --l-accent: #B08D1E; --l-onAccent: #FFFFFF; --l-accentSoft: #F6EDCE; --l-accentText: #7D6310; --l-savings: #1B7A3E; --l-heroA: #ECEBDB; --l-heroB: #F8F7F2; --l-rowBg: #FFFFFF; --l-bestBg: #ECF2E8; --l-hoverWash: rgba(20,83,45,.08); --l-cardShadow: 0 1px 3px rgba(29,41,33,.06); --l-glow: rgba(20,83,45,0.13); --l-glowSoft: rgba(20,83,45,0.12); --l-searchGlow1: rgba(20,83,45,0.1); --l-searchGlow2: rgba(20,83,45,0.13); --l-okSoft: #E4EFE8; --l-okText: #1B7A3E; --l-rowBg2: #F8F7F2; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #DBCFA4; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #131B15; --l-logText: #C3C7C5; --l-logMut: #94A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #0C120D; --d-surface: #131C15; --d-border: #243128; --d-field: #1A261D; --d-fieldBorder: #2D3D31; --d-text: #E8EEE9; --d-textMut: #A0B0A4; --d-primary: #52C17B; --d-primaryHover: #75D096; --d-onPrimary: #08210F; --d-accent: #E0BC4C; --d-onAccent: #332800; --d-accentSoft: #372E13; --d-accentText: #EDD180; --d-savings: #52C17B; --d-heroA: #152215; --d-heroB: #0C120D; --d-rowBg: #131C15; --d-bestBg: #1C2E1E; --d-hoverWash: rgba(82,193,123,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(82,193,123,0.14); --d-searchGlow1: rgba(82,193,123,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #203D29; --d-okText: #52C17B; --d-rowBg2: #101711; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(19,28,21,0.9); --d-glass: rgba(19,28,21,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #5F522B; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #0F1610; --d-logText: #C2C6C3; --d-logMut: #95A097; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #4287C0; } /* ============================================================================= EOFY (eofy) EOFY (Jun). Sale-tag orange-red with ledger teal — end-of-financial-year energy, very on-brand for a savings app. Urgent but not alarming. ============================================================================= */ :root[data-theme="eofy"] { --theme-dot: #C2410C; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #FDFAF5; --l-surface: #FFFFFF; --l-border: #EEE3D6; --l-field: #F7F0E6; --l-fieldBorder: #EBDECD; --l-text: #2B2118; --l-textMut: #75675A; --l-primary: #C2410C; --l-primaryHover: #A33407; --l-onPrimary: #FFFFFF; --l-accent: #0E7490; --l-onAccent: #FFFFFF; --l-accentSoft: #DFF1F5; --l-accentText: #0A5568; --l-savings: #15803D; --l-heroA: #FAEEDD; --l-heroB: #FDFAF5; --l-rowBg: #FFFFFF; --l-bestBg: #EFF6EA; --l-hoverWash: rgba(194,65,12,.08); --l-cardShadow: 0 1px 3px rgba(43,33,24,.06); --l-glow: rgba(194,65,12,0.13); --l-glowSoft: rgba(194,65,12,0.12); --l-searchGlow1: rgba(194,65,12,0.1); --l-searchGlow2: rgba(194,65,12,0.13); --l-okSoft: #E3F0E8; --l-okText: #147B3B; --l-rowBg2: #FDFAF5; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #B0CFD6; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #1C1510; --l-logText: #C4C6C4; --l-logMut: #959F9A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #160F0A; --d-surface: #201711; --d-border: #382A1F; --d-field: #2A1F16; --d-fieldBorder: #443325; --d-text: #F1E9E1; --d-textMut: #B5A493; --d-primary: #F0763A; --d-primaryHover: #F4935F; --d-onPrimary: #2E1204; --d-accent: #3BC3DF; --d-onAccent: #04303A; --d-accentSoft: #123540; --d-accentText: #82DCEE; --d-savings: #4ADE80; --d-heroA: #291A0F; --d-heroB: #160F0A; --d-rowBg: #201711; --d-bestBg: #233020; --d-hoverWash: rgba(240,118,58,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(240,118,58,0.14); --d-searchGlow1: rgba(240,118,58,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #283F27; --d-okText: #4ADE80; --d-rowBg2: #1B130E; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(32,23,17,0.9); --d-glass: rgba(32,23,17,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #2B5A66; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #1A120D; --d-logText: #C8C2BD; --d-logMut: #A2968A; --d-brandtext-woolworths: #2E9258; --d-brandtext-coles: #E9464D; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF3C43; --d-brandtext-costco: #4287C0; } /* ============================================================================= Green & Gold (greengold) Green & Gold. The national sporting colours — works for Australia Day, the Olympics, footy internationals, whatever the calendar throws up. You choose when it shows. ============================================================================= */ :root[data-theme="greengold"] { --theme-dot: #166D3B; --theme-dot-on: #FDFDFC; /* light */ --l-bg: #F7FAF5; --l-surface: #FFFFFF; --l-border: #E2EADB; --l-field: #EEF4E9; --l-fieldBorder: #DEE8D5; --l-text: #1B2A1E; --l-textMut: #5E7060; --l-primary: #166D3B; --l-primaryHover: #0F572E; --l-onPrimary: #FFFFFF; --l-accent: #C7A008; --l-onAccent: #332800; --l-accentSoft: #F8F0CB; --l-accentText: #6E5703; --l-savings: #1B7A3E; --l-heroA: #EAF3E2; --l-heroB: #F7FAF5; --l-rowBg: #FFFFFF; --l-bestBg: #EDF6E8; --l-hoverWash: rgba(22,109,59,.08); --l-cardShadow: 0 1px 3px rgba(27,42,30,.06); --l-glow: rgba(22,109,59,0.13); --l-glowSoft: rgba(22,109,59,0.12); --l-searchGlow1: rgba(22,109,59,0.1); --l-searchGlow2: rgba(22,109,59,0.13); --l-okSoft: #E4EFE8; --l-okText: #1B7A3E; --l-rowBg2: #F7FAF5; --l-shine: rgba(255,255,255,.55); --l-surfaceAlpha: rgba(255,255,255,0.9); --l-glass: rgba(255,255,255,0.75); --l-logoFilter: none; --l-accentSoftBorder: #DACE9F; --l-warnSoft: #FBF1D6; --l-warnText: #8A6203; --l-warnStrong: #C28A05; --l-infoSoft: #E2EEF8; --l-infoText: #2A5E8F; --l-errSoft: #FDE7E7; --l-errText: #A3231F; --l-errStrong: #C62828; --l-logBg: #121B14; --l-logText: #C2C6C4; --l-logMut: #94A09A; --l-brandtext-woolworths: #007A33; --l-brandtext-coles: #E41E26; --l-brandtext-aldi: #1B3774; --l-brandtext-iga: #E71B23; --l-brandtext-costco: #005DAA; /* dark */ --d-bg: #0C120D; --d-surface: #141D15; --d-border: #263528; --d-field: #1B291D; --d-fieldBorder: #304333; --d-text: #E7EFE8; --d-textMut: #9FB3A2; --d-primary: #4BC57A; --d-primaryHover: #70D496; --d-onPrimary: #07220F; --d-accent: #F2D24B; --d-onAccent: #332900; --d-accentSoft: #383012; --d-accentText: #F7E185; --d-savings: #4BC57A; --d-heroA: #16271A; --d-heroB: #0C120D; --d-rowBg: #141D15; --d-bestBg: #1C2F1F; --d-hoverWash: rgba(75,197,122,.1); --d-cardShadow: 0 1px 3px rgba(0,0,0,.5); --d-glow: rgba(0,0,0,.5); --d-glowSoft: rgba(75,197,122,0.14); --d-searchGlow1: rgba(75,197,122,0.09); --d-searchGlow2: rgba(0,0,0,.55); --d-okSoft: #1F3F29; --d-okText: #4BC57A; --d-rowBg2: #101811; --d-shine: rgba(255,255,255,.08); --d-surfaceAlpha: rgba(20,29,21,0.9); --d-glass: rgba(20,29,21,0.75); --d-logoFilter: invert(1) hue-rotate(180deg); --d-accentSoftBorder: #62572B; --d-warnSoft: #33290F; --d-warnText: #F0CB74; --d-warnStrong: #C89A2B; --d-infoSoft: #16293A; --d-infoText: #8FC4EE; --d-errSoft: #3A1B1A; --d-errText: #F5A9A6; --d-errStrong: #EF6A62; --d-logBg: #0F1610; --d-logText: #C2C7C2; --d-logMut: #94A296; --d-brandtext-woolworths: #33955C; --d-brandtext-coles: #E94B51; --d-brandtext-aldi: #7283A9; --d-brandtext-iga: #EF4047; --d-brandtext-costco: #478AC2; }