/* RootTrax — theme variables Applied via data-theme on . Sepia is the default (no attribute needed). */ /* ── Sepia (default) ─────────────────────────────────────────────────────── */ :root { --c-bg: #f4e8d0; --c-header: #2a1205; --c-nav: #5c3015; --c-panel: #fdf6e3; --c-panel-alt: #f9f0d8; --c-border: #d4b896; --c-divider: #ecdfc0; --c-accent: #b8860b; --c-accent-hover: #d4a020; --c-text: #3d1f0a; --c-text-muted: #8a6040; --c-text-dim: #6a4820; --c-header-text: #f4e8d0; --c-nav-text: rgba(244,232,208,0.92); --c-tag-bg: #ecdfc0; --c-cancel-bg: #e4d4a8; --c-cancel-text: #6a4820; } /* ── Midnight ─────────────────────────────────────────────────────────────── */ :root[data-theme="midnight"] { --c-bg: #0d1117; --c-header: #010409; --c-nav: #1c2330; --c-panel: #21262d; --c-panel-alt: #2d333b; --c-border: #30363d; --c-divider: #2d333b; --c-accent: #58a6ff; --c-accent-hover: #79b8ff; --c-text: #e6edf3; --c-text-muted: #8b949e; --c-text-dim: #8b949e; --c-header-text: #e6edf3; --c-nav-text: rgba(230,237,243,0.92); --c-tag-bg: #2d333b; --c-cancel-bg: #2d333b; --c-cancel-text: #8b949e; } :root[data-theme="midnight"] #map { filter: invert(1) hue-rotate(180deg) brightness(0.85); } /* ── Forest ───────────────────────────────────────────────────────────────── */ :root[data-theme="forest"] { --c-bg: #f0f4ef; --c-header: #0d2018; --c-nav: #2d5a3d; --c-panel: #ffffff; --c-panel-alt: #f0f4ef; --c-border: #c8dcc0; --c-divider: #e0edd8; --c-accent: #5a9e45; --c-accent-hover: #72b85a; --c-text: #1a3a2a; --c-text-muted: #4a7a50; --c-text-dim: #3a6040; --c-header-text: #e8f5e0; --c-nav-text: rgba(232,245,224,0.92); --c-tag-bg: #e0edd8; --c-cancel-bg: #d8e8d0; --c-cancel-text: #3a6040; } /* ── Ocean ────────────────────────────────────────────────────────────────── */ :root[data-theme="ocean"] { --c-bg: #eef4f8; --c-header: #0e2340; --c-nav: #234b76; --c-panel: #ffffff; --c-panel-alt: #f0f6fa; --c-border: #b8d4e8; --c-divider: #dceef8; --c-accent: #3a8fd1; --c-accent-hover: #5aaee8; --c-text: #1a3a5c; --c-text-muted: #4a6a8a; --c-text-dim: #3a5a7a; --c-header-text: #e8f2f8; --c-nav-text: rgba(232,242,248,0.92); --c-tag-bg: #dceef8; --c-cancel-bg: #d0e8f4; --c-cancel-text: #3a5a7a; } /* ── Crimson ──────────────────────────────────────────────────────────────── */ :root[data-theme="crimson"] { --c-bg: #f8f0f0; --c-header: #300710; --c-nav: #6b1a2e; --c-panel: #ffffff; --c-panel-alt: #fdf5f5; --c-border: #e8c8c8; --c-divider: #f8e0e0; --c-accent: #c0394f; --c-accent-hover: #d85060; --c-text: #3a0a14; --c-text-muted: #8a4a50; --c-text-dim: #6a3040; --c-header-text: #f8e8e8; --c-nav-text: rgba(248,232,232,0.92); --c-tag-bg: #f8e0e0; --c-cancel-bg: #f0d8d8; --c-cancel-text: #6a3040; } /* ── Slate ────────────────────────────────────────────────────────────────── */ :root[data-theme="slate"] { --c-bg: #f0f2f5; --c-header: #1a2a38; --c-nav: #374f63; --c-panel: #ffffff; --c-panel-alt: #f5f7fa; --c-border: #ccd6e0; --c-divider: #e5eaf0; --c-accent: #2e86c1; --c-accent-hover: #3a9bd6; --c-text: #2c3e50; --c-text-muted: #5a7a9a; --c-text-dim: #4a6a8a; --c-header-text: #ecf0f1; --c-nav-text: rgba(236,240,241,0.92); --c-tag-bg: #e0eaf5; --c-cancel-bg: #d8e5f0; --c-cancel-text: #4a6a8a; } /* ── Shared footer ────────────────────────────────────────────────────────── */ footer { text-align: center; padding: 2rem; color: var(--c-text-muted); font-size: 0.8rem; font-style: italic; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: fit-content; margin: 2rem auto; } footer a { color: var(--c-accent); text-decoration: none; } footer a:hover { color: var(--c-accent-hover); text-decoration: underline; } /* ── Sepia ────────────────────────────────────────────────────────────────── */ :root[data-theme="sepia"] { --c-bg: #f4e8d0; --c-header: #2a1205; --c-nav: #5c3015; --c-panel: #fdf6e3; --c-panel-alt: #f9f0d8; --c-border: #d4b896; --c-divider: #ecdfc0; --c-accent: #b8860b; --c-accent-hover: #d4a020; --c-text: #3d1f0a; --c-text-muted: #8a6040; --c-text-dim: #6a4820; --c-header-text: #f4e8d0; --c-nav-text: rgba(244,232,208,0.92); --c-tag-bg: #ecdfc0; --c-cancel-bg: #e4d4a8; --c-cancel-text: #6a4820; }