/* clashtml design tokens — single source of truth for both themes.
Light is the :root default; [data-theme="dark"] overrides. theme-boot.js
always sets the attribute pre-paint, so pages never flash the wrong mode. */
/* Light is the default for the whole page AND the permanent baseline for the
document canvas. Listing `.clashtml-canvas` here pins the document to the
light tokens directly; the dark override below targets only `` (`:root`),
so the viewer's theme toggle restyles app chrome and the source panes but
never the rendered document. Authors opt their document into dark via
`@media (prefers-color-scheme: dark)` or `html[data-theme="dark"]` in the
document CSS channel (the latter matches because the toggle's data-theme is
mirrored onto the canvas element). */
:root,
.clashtml-canvas {
color-scheme: light;
--ct-font-mono: 'Consolas', 'SF Mono', 'Cascadia Code', ui-monospace, Menlo, monospace;
--ct-font-prose: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
/* surfaces */
--ct-bg: #ffffff;
--ct-bg-raised: #f6f8fa;
--ct-overlay-bg: #ffffff;
--ct-border-dim: #d0d7de;
/* text */
--ct-text: #1f2328;
--ct-text-dim: #57606a;
/* the green */
--ct-accent: #1a7f37;
--ct-accent-mid: #116329;
--ct-accent-deep: #aceebb;
--ct-accent-soft: rgba(26, 127, 55, 0.12);
--ct-accent-contrast: #ffffff;
/* status */
--ct-alert: #cf222e;
--ct-warning: #9a6700;
/* document canvas (readable prose surface) */
--ct-canvas-bg: #ffffff;
--ct-canvas-text: #1f2328;
--ct-code-bg: #f6f8fa;
--ct-pre-bg: #f6f8fa;
--ct-pre-text: #1f2328;
/* review marks */
--ct-ins-bg: rgba(26, 127, 55, 0.15);
--ct-ins-border: #1a7f37;
--ct-del-bg: rgba(207, 34, 46, 0.12);
--ct-compose-bg: rgba(154, 103, 0, 0.15);
--ct-compose-border: #9a6700;
/* syntax highlighting */
--ct-syn-comment: #6e7781;
--ct-syn-punct: #24292f;
--ct-syn-tag: #116329;
--ct-syn-keyword: #cf222e;
--ct-syn-string: #0a3069;
--ct-syn-number: #0550ae;
--ct-syn-function: #8250df;
--ct-syn-entity: #953800;
}
:root[data-theme="dark"] {
color-scheme: dark;
--ct-bg: #0d1117;
--ct-bg-raised: #161b22;
--ct-overlay-bg: #161b22;
--ct-border-dim: #30363d;
--ct-text: #e6edf3;
--ct-text-dim: #8b949e;
--ct-accent: #7ee787;
--ct-accent-mid: #2ea043;
--ct-accent-deep: #1f6f3f;
--ct-accent-soft: rgba(126, 231, 135, 0.14);
--ct-accent-contrast: #0d1117;
--ct-alert: #ff7b72;
--ct-warning: #d29922;
--ct-canvas-bg: #0d1117;
--ct-canvas-text: #e6edf3;
--ct-code-bg: #161b22;
--ct-pre-bg: #161b22;
--ct-pre-text: #e6edf3;
--ct-ins-bg: rgba(63, 185, 80, 0.25);
--ct-ins-border: #3fb950;
--ct-del-bg: rgba(248, 81, 73, 0.18);
--ct-compose-bg: rgba(210, 153, 34, 0.2);
--ct-compose-border: #d29922;
--ct-syn-comment: #8b949e;
--ct-syn-punct: #c9d1d9;
--ct-syn-tag: #7ee787;
--ct-syn-keyword: #ff7b72;
--ct-syn-string: #a5d6ff;
--ct-syn-number: #79c0ff;
--ct-syn-function: #d2a8ff;
--ct-syn-entity: #ffa657;
}
/* The terminal-flag theme toggle, shared by landing, signup, and the editor. */
.ct-theme-toggle {
background: var(--ct-bg);
color: var(--ct-text-dim);
border: 2px solid var(--ct-border-dim);
box-shadow: 3px 3px 0 var(--ct-border-dim);
font-family: var(--ct-font-mono);
font-size: 12px;
padding: 6px 12px;
cursor: pointer;
white-space: nowrap;
}
.ct-theme-toggle:hover {
color: var(--ct-accent);
border-color: var(--ct-accent);
box-shadow: 3px 3px 0 var(--ct-accent);
}
.ct-theme-toggle:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 var(--ct-accent);
}
/* Icon variant (editor toolbar): compact + roughly square, glyph centered.
Inherits the brutalist frame (border + hard offset shadow + hover accent)
from .ct-theme-toggle above. */
.ct-theme-toggle[data-theme-icon] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 7px;
}
.ct-theme-toggle[data-theme-icon] svg {
display: block;
}