/* ----------------------------------------------------------------------- Design tokens - Light / Dark theming Usage: var(--token-name) Toggle: data-theme="light" or data-theme="dark" on Default: follows prefers-color-scheme ----------------------------------------------------------------------- */ :root, [data-theme="light"] { --text-primary: #1a1a1a; --text-secondary: #555; --text-tertiary: #888; --text-faint: #aaa; --text-heading: #111; --text-heading-secondary: #222; --text-strong: #000; --bg-primary: #ffffff; --bg-secondary: #f7f7f7; --bg-tertiary: #f0f0f0; --bg-hover: rgba(0, 0, 0, 0.03); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-tooltip: #ffffff; --bg-surface: #ffffff; --bg-code: rgba(0, 0, 0, 0.04); --bg-code-block: #fafafa; --border: #e0e0e0; --border-light: #eeeeee; --border-focus: rgba(124, 58, 237, 0.5); --accent: #7c3aed; --accent-light: #958DF1; --accent-bg: rgba(124, 58, 237, 0.08); --accent-bg-hover: rgba(124, 58, 237, 0.15); --accent-text: #6d28d9; --code-text: #d63384; --code-comment: #6a737d; --code-keyword: #8250df; --code-string: #0a6640; --code-number: #b35900; --code-variable: #d63384; --code-type: #b35900; --code-function: #0550ae; --code-tag: #d63384; --code-attr: #b35900; --code-symbol: #0a6640; --code-meta: #0550ae; --code-deletion: #d63384; --danger: #dc2626; --danger-color: #dc2626; --danger-bg: rgba(220, 38, 38, 0.08); --danger-bg-hover: rgba(220, 38, 38, 0.15); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --katex-color: #1a1a1a; } [data-theme="dark"] { --text-primary: rgba(255, 255, 255, 0.85); --text-secondary: rgba(255, 255, 255, 0.5); --text-tertiary: rgba(255, 255, 255, 0.4); --text-faint: rgba(255, 255, 255, 0.25); --text-heading: #fff; --text-heading-secondary: rgba(255, 255, 255, 0.9); --text-strong: rgba(255, 255, 255, 0.95); --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --bg-tertiary: #1e1e1e; --bg-hover: rgba(255, 255, 255, 0.03); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-tooltip: #1e1e2e; --bg-surface: #1a1a1a; --bg-code: rgba(255, 255, 255, 0.06); --bg-code-block: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.1); --border-light: rgba(255, 255, 255, 0.06); --border-focus: rgba(149, 141, 241, 0.5); --accent: #7c3aed; --accent-light: #958DF1; --accent-bg: rgba(149, 141, 241, 0.15); --accent-bg-hover: rgba(149, 141, 241, 0.25); --accent-text: #b4aef7; --code-text: #e06c75; --code-comment: #5c6370; --code-keyword: #c678dd; --code-string: #98c379; --code-number: #d19a66; --code-variable: #e06c75; --code-type: #e5c07b; --code-function: #61afef; --code-tag: #e06c75; --code-attr: #d19a66; --code-symbol: #56b6c2; --code-meta: #61afef; --code-deletion: #e06c75; --danger: #e06c75; --danger-color: #e06c75; --danger-bg: rgba(224, 108, 117, 0.12); --danger-bg-hover: rgba(224, 108, 117, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --katex-color: rgba(255, 255, 255, 0.85); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text-primary: rgba(255, 255, 255, 0.85); --text-secondary: rgba(255, 255, 255, 0.5); --text-tertiary: rgba(255, 255, 255, 0.4); --text-faint: rgba(255, 255, 255, 0.25); --text-heading: #fff; --text-heading-secondary: rgba(255, 255, 255, 0.9); --text-strong: rgba(255, 255, 255, 0.95); --bg-primary: #0a0a0a; --bg-secondary: #1a1a1a; --bg-tertiary: #1e1e1e; --bg-hover: rgba(255, 255, 255, 0.03); --bg-overlay: rgba(0, 0, 0, 0.5); --bg-tooltip: #1e1e2e; --bg-surface: #1a1a1a; --bg-code: rgba(255, 255, 255, 0.06); --bg-code-block: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.1); --border-light: rgba(255, 255, 255, 0.06); --border-focus: rgba(149, 141, 241, 0.5); --accent: #7c3aed; --accent-light: #958DF1; --accent-bg: rgba(149, 141, 241, 0.15); --accent-bg-hover: rgba(149, 141, 241, 0.25); --accent-text: #b4aef7; --code-text: #e06c75; --code-comment: #5c6370; --code-keyword: #c678dd; --code-string: #98c379; --code-number: #d19a66; --code-variable: #e06c75; --code-type: #e5c07b; --code-function: #61afef; --code-tag: #e06c75; --code-attr: #d19a66; --code-symbol: #56b6c2; --code-meta: #61afef; --code-deletion: #e06c75; --danger: #e06c75; --danger-color: #e06c75; --danger-bg: rgba(224, 108, 117, 0.12); --danger-bg-hover: rgba(224, 108, 117, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); --katex-color: rgba(255, 255, 255, 0.85); } }