:root { --background: #bf975c; --background-dark: #1C1C1E; --color-primary: #2C7D3D; --color-primary-hover: #25692f; --color-primary-foreground: #ffffff; --text-color: #111111; --color-secondary-text: #4D4D4D; --color-card-bg: rgba(255,255,255,0.15); --color-overlay-rgb: 255,255,255; --color-searchbar-bg: rgba(255,255,255,0.2); --color-link: #243F8B; --color-rule: #bfae91; --color-stroke: #000000; --card-border: 2px solid #000000; --card-border-radius: 0px; --background-image: url("/assets/texture.jpg"); --divider-image: url("/assets/divider.png"); --divider-vert-image: url("/assets/divider-vert.png"); --color-icon-muted: #61503a; --map-blend-mode: normal; --divider-bg: transparent; /* Static brand colors — always these values regardless of theme. */ --color-bl-green: #2C7D3D; --color-bl-red: #A71F25; --color-bl-blue: #243F8B; --color-bl-yellow: #C5972F; --color-app-bg: #F2EBD9; --color-modal-dark: #333333; --color-tabbar: #151515; --small_menu_icons: 22px; --small_menu_tall_icons: 30px; /* "Liked" heart red — was hardcoded as #b32146 independently in 7 files (HighlightsView.js, HomeHighlightsSection.js, and friends); deliberately its own token rather than reusing --color-bl-red, since it's a distinct hex value from that one, not a duplicate of it. */ --color-like: #b32146; --corner-radius: 20px; } /* ThemeManager.js sets data-theme-mode on ; --color-icon-muted isn't part of the per-theme JS-applied variable set (ThemeDefinitions.js), so a plain attribute-selector override here is safe from inline-style clobber. */ :root[data-theme-mode="dark"] { --color-icon-muted: #9A9A9E; /* "multiply" against the light paper-texture backdrop gave the map a subtle scrapbook tint; against the dark backdrop the same blend crushes it to near-black instead, so drop the blend entirely in dark mode. */ --map-blend-mode: normal; /* --divider-image is "none" in every theme's dark mode (the torn-paper asset is light-mode only), so this is the fallback line color for when there's no image — scoped to dark mode only, since light mode already has the real image and doesn't need a color to show behind it. */ --divider-bg: var(--color-rule); }