/* TheWhitesOnTheRoad.ca — themes. Every theme defines the same token set, so nothing else in the CSS needs to know which one is active. Switch by setting data-theme on . --map-filter is applied to the tile layer so the basemap matches the theme. */ :root, [data-theme="campfire"] { --name: "Campfire"; --bg: #f7f1e8; --bg-alt: #efe5d7; --surface: #fffdf9; --surface-2: #f3ebe0; --ink: #2f2925; --ink-soft: #6b5f54; --ink-faint: #9a8b7d; --accent: #d2691e; --accent-ink: #ffffff; --accent-soft: #fbe6d3; --line: #e2d5c4; --route: #d2691e; --shadow: 0 1px 2px rgba(60,45,30,.06), 0 8px 24px rgba(60,45,30,.08); --radius: 14px; --map-filter: saturate(.85) contrast(1.02); --font-display: "Georgia", "Iowan Old Style", serif; } [data-theme="pinegreen"] { --name: "Pine"; --bg: #f2f5f0; --bg-alt: #e5ebe1; --surface: #ffffff; --surface-2: #eef2ec; --ink: #222c24; --ink-soft: #566056; --ink-faint: #8b968b; --accent: #2f6b46; --accent-ink: #ffffff; --accent-soft: #dcece2; --line: #d4ddd2; --route: #2f6b46; --shadow: 0 1px 2px rgba(20,40,25,.06), 0 8px 24px rgba(20,40,25,.08); --radius: 14px; --map-filter: saturate(.9) hue-rotate(-6deg); --font-display: "Georgia", "Iowan Old Style", serif; } [data-theme="prairie"] { --name: "Prairie"; --bg: #fdf8ec; --bg-alt: #f6eed9; --surface: #ffffff; --surface-2: #fbf4e4; --ink: #2c2a22; --ink-soft: #635e4c; --ink-faint: #9c9483; --accent: #1d6fa5; --accent-ink: #ffffff; --accent-soft: #ddeefa; --line: #e6dcc4; --route: #c9812a; --shadow: 0 1px 2px rgba(70,60,25,.06), 0 8px 24px rgba(70,60,25,.08); --radius: 14px; --map-filter: saturate(1.05) brightness(1.02); --font-display: "Georgia", "Iowan Old Style", serif; } [data-theme="maritime"] { --name: "Maritime"; --bg: #eef4f6; --bg-alt: #dfe9ee; --surface: #ffffff; --surface-2: #e9f1f4; --ink: #1e2a30; --ink-soft: #52626a; --ink-faint: #8a9aa2; --accent: #0f6d80; --accent-ink: #ffffff; --accent-soft: #d6ecf1; --line: #cddce2; --route: #b5453a; --shadow: 0 1px 2px rgba(20,45,55,.06), 0 8px 24px rgba(20,45,55,.09); --radius: 14px; --map-filter: saturate(.95) hue-rotate(4deg); --font-display: "Georgia", "Iowan Old Style", serif; } [data-theme="midnight"] { --name: "Midnight"; --bg: #14171c; --bg-alt: #1b1f26; --surface: #1e232b; --surface-2: #262c36; --ink: #e8e6e1; --ink-soft: #a6adb8; --ink-faint: #6f7883; --accent: #f0a04b; --accent-ink: #1a1d22; --accent-soft: #33291d; --line: #313945; --route: #f0a04b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45); --radius: 14px; --map-filter: invert(1) hue-rotate(180deg) saturate(.65) brightness(.92); --font-display: "Georgia", "Iowan Old Style", serif; } /* Respect the reader's own preference when the site is left on "auto". */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: #14171c; --bg-alt: #1b1f26; --surface: #1e232b; --surface-2: #262c36; --ink: #e8e6e1; --ink-soft: #a6adb8; --ink-faint: #6f7883; --accent: #f0a04b; --accent-ink: #1a1d22; --accent-soft: #33291d; --line: #313945; --route: #f0a04b; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45); --map-filter: invert(1) hue-rotate(180deg) saturate(.65) brightness(.92); } }