/* Light palette. The theme is chosen by a head script in base.html that sets data-theme on (stored choice, else OS preference) before this file loads. color-scheme keeps native widgets (inputs, scrollbars) in step. */ :root { color-scheme: light; --ink: #1a1a1a; --muted: #666; --faint: #6f6f6f; /* WCAG AA: 4.90:1 on --bg, 5.02:1 on --panel (was #8a8a8a, 3.37/3.45:1) */ --rule: #e2e0dc; /* A form control's boundary is NOT a divider. --rule is the hairline divider colour (~1.3:1) and is exactly right for the ~30 dividers, card edges and chips it paints; it was also doing duty as the resting border of every text input, select and textarea, where WCAG 2.1 SC 1.4.11 wants 3:1 for "visual information required to identify user interface components". Inside a panel the control's own --panel fill adds nothing (1.00:1), so that hairline was the ONLY thing saying a field was there. Two variables, not one raised variable: darkening --rule to 3:1 would turn every hairline on the site into a heavy line (it#463). */ --field-border: #8e8980; /* WCAG 1.4.11: 3.39:1 on --bg, 3.48:1 on --panel, 3.22:1 on --panel-hover */ --bg: #fdfcfa; --panel: #fff; --panel-hover: #f7f6f4; --accent: #014f86; --accent-strong: #013b64; /* accent-button hover */ --accent-contrast: #fff; /* text on accent */ --accent-soft: #e6f1f8; --accent-soft-hover: #d8e9f6; --accent-border: #c9def0; /* border on accent-soft chips */ --ok-bg: #eef6ee; --ok-border: #cfe3cf; --ok-ink: #2f6b34; /* verified-open chip/banner (issue #36): a distinct, more-saturated emerald so it does not read as the sage --ok "resolved" green */ --open-bg: #e3f5ec; --open-border: #b3e0c8; --open-ink: #10794e; --warn-bg: #fff4e5; --warn-border: #f0dcc0; --warn-ink: #7a5100; --err-bg: #fdecec; --err-border: #f0c9c9; --err-ink: #8a2020; --info-bg: #eef2f8; --info-border: #d4dded; --info-ink: #33507d; --owner-bg: #f4effa; --owner-border: #ddd0ee; --owner-ink: #5b3d84; --danger: #a12626; --chip-bg: #fafafa; --score-bg: #eceae6; --vote-idle: #8f8a82; /* 3.34:1 on --bg — WCAG 1.4.11 non-text pass (was #c9c4bc, 1.69:1); see #130 */ --avatar-gone-bg: #f0efec; --shadow: 0 3px 10px rgba(0,0,0,.08); /* #113: edge-shadow colour for the display-math scroll cue. A dark shadow reads on the light panel; the dark theme overrides it to a soft light glow, since a black shadow is invisible on the dark panel. */ --math-cue: rgba(0,0,0,.34); /* #113's two `local` mask layers hide the scroll shadow by painting the colour BEHIND the equation, so they must equal that colour or they paint a visible block instead of hiding one. Default to the page background — comments, .note, the detail-page Summary and the live .comment-preview all sit on --bg. Every container that gives an equation a different backdrop re-declares --math-mask NEXT TO its own `background:` line, so the two can never drift apart. */ --math-mask: var(--bg); /* comment avatars: hue is per-user (inline style), theme sets the rest */ --av-s: 42%; --av-l: 90%; --av-fg-s: 45%; --av-fg-l: 32%; --max: 68rem; } html[data-theme="dark"] { color-scheme: dark; --ink: #e6e4e1; --muted: #a39f98; --faint: #9a958c; /* WCAG AA: 5.58:1 on --panel, 5.06:1 on --panel-hover (was #837f78, 4.17/3.78:1) */ --rule: #3b3936; --field-border: #78736a; /* WCAG 1.4.11: 3.84:1 on --bg, 3.53:1 on --panel, 3.20:1 on --panel-hover */ --bg: #171614; --panel: #201e1c; --panel-hover: #282624; --math-cue: rgba(255,255,255,.30); /* #113: light glow reads on dark panel */ --accent: #7db4dd; --accent-strong: #a3c9e7; --accent-contrast: #10202e; --accent-soft: #1c2f42; --accent-soft-hover: #24405a; --accent-border: #2e4d6b; --ok-bg: #1d2a1e; --ok-border: #31502f; --ok-ink: #93c493; --open-bg: #12271d; --open-border: #245a3c; --open-ink: #5fd39b; --warn-bg: #2e2416; --warn-border: #55431f; --warn-ink: #d3a94f; --err-bg: #2e1a1a; --err-border: #55302f; --err-ink: #dd9090; --info-bg: #1c2331; --info-border: #2f405c; --info-ink: #9fb4d8; --owner-bg: #271f31; --owner-border: #443358; --owner-ink: #bda3dd; --danger: #dd8f8f; --chip-bg: #262421; --score-bg: #33302d; --vote-idle: #787369; /* 3.84:1 on dark --bg — WCAG 1.4.11 non-text pass (was #57534d, 2.37:1); see #130 */ --avatar-gone-bg: #2b2926; --shadow: 0 3px 10px rgba(0,0,0,.45); --av-s: 28%; --av-l: 24%; --av-fg-s: 42%; --av-fg-l: 78%; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-shadow: 0.4px 0 0 currentColor; text-decoration: none; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } /* ---- header ---- */ header.site { border-bottom: 1px solid var(--rule); background: var(--panel); --math-mask: var(--panel); } header.site .wrap { display: flex; align-items: baseline; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; /* Wrap at EVERY width, not only below the collapse breakpoint (issue-tracker #273). Flex line-breaking uses each item's max-content size, so when the nav no longer fits beside the brand the whole