/* Theme tokens. * * The 12 themeable colors are scoped to ``:root[data-theme="dark|light"]`` * blocks so the SPA can flip dark/light by toggling a single attribute on * . The default :root block also seeds the dark palette so first paint * never shows an unstyled doc — the inline script in index.html sets * data-theme before this stylesheet is parsed (anti-flash). * * Geometry and typography are global because they don't change with mode. * * Plugins MUST consume tokens via ``var(--name)`` — never hardcode hex/rgba. * See ``docs/theme-tokens.md`` for the canonical reference. */ :root { color-scheme: dark light; /* Set by ui-density.js from site branding + user prefs (default 1). */ --cb-root-px: 18px; --cb-ui-scale: 1; --cb-spacing-scale: 1; /* Rhythm: rem already includes --cb-ui-scale via html font-size; multiply by spacing density. */ --space-1: calc(0.25rem * var(--cb-spacing-scale)); --space-2: calc(0.5rem * var(--cb-spacing-scale)); --space-3: calc(0.75rem * var(--cb-spacing-scale)); --space-4: calc(1rem * var(--cb-spacing-scale)); --space-5: calc(1.25rem * var(--cb-spacing-scale)); --space-6: calc(1.5rem * var(--cb-spacing-scale)); /* Overridden at runtime by ui-density.js from site branding (defaults below). */ --radius: 10px; --radius-sm: 6px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; } /* Default dark palette, mirrored on ``:root`` so a doc that never receives * the data-theme attribute (script disabled, very early paint) still looks * intentional. */ :root { --accent-on: #ffffff; } :root, :root[data-theme="dark"] { --bg: #0f1115; --bg-elev: #202837; --bg-elev-2: #262f40; --border: #2d3547; --border-strong: #3b4863; --text: #e7ecf4; --text-muted: #9aa3b2; --accent: #7aa2f7; --accent-strong: #5b8def; --danger: #ef6f6f; --success: #6dd3a8; --warning: #f5c66c; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); /* Inset fields: derived from palette tokens so every preset stays legible on cards. */ --bg-input: color-mix(in srgb, var(--bg) 36%, var(--bg-elev-2)); --border-input: color-mix(in srgb, var(--border-strong) 58%, var(--border)); } /* Default light palette. */ :root[data-theme="light"] { --bg: #f6f8fc; --bg-elev: #ecf0fd; --bg-elev-2: #dce5f7; --border: #cdd5f0; --border-strong: #aebbdd; --text: #14181f; --text-muted: #5a6477; --accent: #3d6eea; --accent-strong: #2d57c7; --danger: #c83b3b; --success: #2c8a64; --warning: #b78327; --shadow: 0 6px 18px rgba(20, 24, 31, 0.08); --bg-input: color-mix(in srgb, var(--bg) 36%, var(--bg-elev-2)); --border-input: color-mix(in srgb, var(--border-strong) 58%, var(--border)); } * { box-sizing: border-box; } html { font-size: calc(var(--cb-root-px) * var(--cb-ui-scale, 1)); } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-size: 1rem; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent-strong) 72%, var(--border-strong)); background: color-mix(in srgb, var(--accent-strong) 88%, #000); color: var(--accent-on, #fff); padding: 0.375rem 0.875rem; min-height: max(2.125rem, 36px); border-radius: var(--radius-sm); transition: background 0.15s ease, opacity 0.15s ease, transform 0.05s ease; } button:hover { background: color-mix(in srgb, var(--accent-strong) 96%, #000); } button:active { transform: translateY(1px); } button:disabled { opacity: 0.5; cursor: not-allowed; } button.ghost { background: transparent; color: var(--text); border-color: var(--border); } button.ghost:hover { background: var(--bg-elev-2); } button.danger { background: color-mix(in srgb, var(--danger) 88%, #000); border-color: color-mix(in srgb, var(--danger) 65%, var(--border-strong)); color: var(--accent-on, #fff); } button.danger:hover:not([disabled]) { background: color-mix(in srgb, var(--danger) 96%, #000); } button.ghost.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); } button.ghost.danger:hover:not([disabled]) { background: color-mix(in srgb, var(--danger) 14%, transparent); } input, textarea, select { font: inherit; color: var(--text); background: var(--bg-input); border: 1px solid var(--border-input); border-radius: var(--radius-sm); padding: max(var(--space-2), 0.5rem) max(var(--space-2), 0.625rem); min-height: max(2.75rem, 44px); outline: none; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg) 28%, transparent); } /* Fields inside inset panels (--bg-elev-2) need one step more separation. */ :is( .admin-settings-boolean, .multi-admin-item-body, .comment-reply-composer, .status, .account-session-row ) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background: color-mix(in srgb, var(--bg) 48%, var(--bg-elev-2)); } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--bg) 28%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } textarea { min-height: 5rem; } /* Native toggles are not text fields — the shared input padding breaks flex rows (admin + install). */ input[type="checkbox"], input[type="radio"] { padding: 0; width: 1.125rem; height: 1.125rem; min-height: 0; flex-shrink: 0; vertical-align: middle; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* UA ``[hidden]`` uses ``display: none``, but any author ``display`` on the same * node (e.g. ``.foo { display: flex }``) wins at equal specificity — so toggling * ``element.hidden`` in JS would not actually hide the element. */ [hidden] { display: none !important; } .status { padding: var(--space-3) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border); margin-bottom: var(--space-3); } .status.error { border-color: var(--danger); color: var(--danger); } .status.success { border-color: var(--success); color: var(--success); } /* Hide the SPA shell until app.js finishes boot (see index.html inline script). */ html.site-booting body { visibility: hidden; } html.site-booting.site-boot-ready body { visibility: visible; }