/* Structural overrides (theme-independent) */ html { font-size: 100%; } body { grid-template-columns: 1fr min(90rem, 90%) 1fr; } /* Theme variables are applied via inline styles by the JS in . The blocks below are kept as fallback/documentation only. */ :root { --nav-text: #555; --success: #2e7d32; --danger: #c62828; --warning: #f9a825; --muted: #888888; --cancelled: #e65100; --success-bg: #d4edda; --success-border: #c3e6cb; --success-text: #155724; } /* Dark theme — system preference */ @media (prefers-color-scheme: dark) { :root { --bg: #151515; --accent-bg: #1c1c1c; --text: #e8e8d3; --text-light: #888888; --border: #404040; --accent: #2e3138; --accent-hover: #3d4148; --accent-text: #e8e8d3; --code: #99ad6a; --preformatted: #e8e8d3; --marked: #fad07a; --disabled: #535d66; --nav-text: #b0b0b0; --link: #8fbfdc; --link-hover: #b0d0f0; --success: #afd787; --danger: #d74545; --warning: #fad07a; --muted: #888888; --cancelled: #d78a45; --success-bg: #1a3a1a; --success-border: #2d5a2d; --success-text: #afd787; color-scheme: dark; } } /* Dark theme — explicit (overrides system preference) */ html[data-theme="dark"] { --bg: #151515; --accent-bg: #1c1c1c; --text: #e8e8d3; --text-light: #888888; --border: #404040; --accent: #2e3138; --accent-hover: #3d4148; --accent-text: #e8e8d3; --code: #99ad6a; --preformatted: #e8e8d3; --marked: #fad07a; --disabled: #535d66; --nav-text: #b0b0b0; --link: #8fbfdc; --link-hover: #b0d0f0; --success: #afd787; --danger: #d74545; --warning: #fad07a; --muted: #888888; --cancelled: #d78a45; --success-bg: #1a3a1a; --success-border: #2d5a2d; --success-text: #afd787; color-scheme: dark; } /* Light theme — explicit (overrides system dark preference) */ html[data-theme="light"] { --bg: #fff; --accent-bg: #f5f7ff; --text: #212121; --text-light: #585858; --border: #898EA4; --accent: #8b919a; --accent-hover: #6b7280; --accent-text: #fff; --code: #d81b60; --preformatted: #444; --marked: #ffdd33; --disabled: #efefef; --nav-text: #555; --link: #1565c0; --link-hover: #1976d2; --success: #2e7d32; --danger: #c62828; --warning: #f9a825; --muted: #888888; --cancelled: #e65100; --success-bg: #d4edda; --success-border: #c3e6cb; --success-text: #155724; color-scheme: light; } .alert-success { background: var(--success-bg); color: var(--success-text); border: 1px solid var(--success-border); padding: 1rem; border-radius: 4px; margin-bottom: 1rem; } .alert-success code { color: var(--text); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-muted { color: var(--muted); } .text-cancelled { color: var(--cancelled); } .alert-warning { color: var(--warning); border: 1px solid var(--warning); padding: 0.75rem; border-radius: 4px; } button.danger { --accent: var(--danger); --accent-hover: #902020; --accent-text: #e8e8d3; } header { padding: 0.4rem 0; display: flex; align-items: center; } header nav { font-size: 1.4rem; align-items: center; padding: 0 2rem; } header nav a, header nav a:link, header nav a:visited, header nav button { border: none; margin: 0; padding: 0; border-radius: 0; background: none; color: var(--nav-text); font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; cursor: pointer; } header nav a:hover, header nav button:hover { color: var(--text); background: none !important; text-decoration: none; } header nav form button:hover { color: var(--danger); } /* Theme toggle icons */ .icon-sun { display: none; } .icon-moon { display: inline; } html[data-theme="dark"] .icon-sun { display: inline; } html[data-theme="dark"] .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .icon-sun { display: inline; } html:not([data-theme="light"]) .icon-moon { display: none; } } main a, main a:link, main a:visited { color: var(--link); } main a:hover { color: var(--link-hover); } dialog { background: var(--accent-bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px; } dialog::backdrop { background: rgba(0, 0, 0, 0.6); } table { width: 100%; } .tag-pill { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; background: var(--accent-bg); border: 1px solid var(--border); border-radius: 9999px; font-size: inherit; white-space: nowrap; color: var(--text); cursor: pointer; } .tag-pill:hover { background: var(--accent-bg) !important; border-color: var(--border) !important; color: var(--danger); text-decoration: line-through; } .template-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2rem; align-items: start; }