/* MileMind colour system — mirrors the `MM` enum in Theme.swift. Every colour is a light/dark dynamic pair. Light values live on :root; dark overrides apply under [data-theme="dark"] and prefers-color-scheme:dark. Brand greens (green300–green700) and destructive are theme-independent. Use the semantic aliases in UI; reach for the raw greens only for gradients / illustration. */ :root { /* Brand greens — theme-independent ------------------------------------ */ --mm-green-700: #1C6B47; --mm-green-600: #1F7A52; --mm-green-500: #2EAE6E; --mm-green-400: #34B877; --mm-green-350: #3ABF7E; --mm-green-300: #52D89A; /* Surfaces ------------------------------------------------------------- */ --mm-page-background: #F3F1EA; /* base behind every tab/scroll (warm off-white) */ --mm-surface: #FFFFFF; /* card & field fills */ --mm-surface-raised: #FFFFFF; /* a surface above another surface (rare) */ --mm-surface-alt: #F0EDE4; /* segmented tracks, icon tiles, chips off */ --mm-muted-fill: #ECE9E1; /* unfilled gauge track (pace ring) */ --mm-modal-background: #F6F5F0; /* bottom sheets / modals root */ --mm-tab-bar-fill: #F5F3ED; /* floating tab-bar material */ /* Text ----------------------------------------------------------------- */ --mm-ink: #17191C; /* PRIMARY text only — the number that matters */ --mm-near-ink: #3C3F44; /* softened primary — dense-list row titles, glyphs */ --mm-secondary: #71757C; /* subtitles, body copy, metadata */ --mm-tertiary: #9A968B; /* hints, captions, units, placeholder-level */ --mm-overline: #A6A296; /* uppercased tracked labels (via OverlineText only) */ /* Lines / borders ------------------------------------------------------ */ --mm-divider: #F0EDE4; --mm-border: #EAE7DE; --mm-border-strong: #D2CEC4; /* Accent & state ------------------------------------------------------- */ --mm-accent-text: #1F7A52; /* green text/icons, links, CTAs-as-text */ --mm-accent-tint: rgba(46, 174, 110, 0.12); /* translucent green fill */ --mm-warning: #C23A2E; /* OVER state — over-allowance/budget. Red */ --mm-destructive: #E0483B; /* destructive actions only */ /* Gradients ------------------------------------------------------------ */ --mm-brand-gradient: linear-gradient(135deg, var(--mm-green-700), var(--mm-green-400)); --mm-wordmark-gradient: linear-gradient(135deg, #15824F, var(--mm-green-500), var(--mm-green-300)); --mm-account-card-gradient: linear-gradient(135deg, var(--mm-green-700), #2E9E63); --mm-pace-gradient: linear-gradient(135deg, var(--mm-green-700), var(--mm-green-350)); color-scheme: light; } /* Dark mode ------------------------------------------------------------- */ :root[data-theme="dark"] { --mm-page-background: #14161A; --mm-surface: #1E2127; --mm-surface-raised: #23262C; --mm-surface-alt: #2A2D33; --mm-muted-fill: #23262C; --mm-modal-background: #14161A; --mm-tab-bar-fill: #15171C; --mm-ink: #F4F4F6; --mm-near-ink: #F4F4F6; --mm-secondary: rgba(255, 255, 255, 0.62); --mm-tertiary: rgba(255, 255, 255, 0.50); --mm-overline: rgba(255, 255, 255, 0.45); --mm-divider: rgba(255, 255, 255, 0.08); --mm-border: rgba(255, 255, 255, 0.10); --mm-border-strong: rgba(255, 255, 255, 0.18); --mm-accent-text: #5BD79A; --mm-accent-tint: rgba(52, 184, 119, 0.18); --mm-warning: #F07167; color-scheme: dark; } /* Dark mode is opt-in via [data-theme="dark"] on . Toggle it from your page (or mirror prefers-color-scheme into the attribute) — the app itself follows the system setting, defaulting to System. */