/* handbook-variables.css — Native theme */ /* Source project original color values (GitHub-style with lighter callouts) */ /* 2-layer dark mode: :root (light) → .dark (toggle via dark-mode-toggle.js) */ /* dark-mode-toggle.js reads OS preference and localStorage to apply/remove .dark on . No @media block needed — JS handles OS detection. */ /* Structural rules live in handbook-components.css (never overwritten) */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --sidebar-width: 260px; --content-offset: 280px; --max-width: 720px; --wrap-width: 880px; --spacing-unit: 8px; --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', 'Noto Sans JP', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SFMono-Regular', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace; --font-size-body: 15px; --line-height-body: 1.65; /* Typography Scale */ --font-size-compact: 14px; --font-size-small: 13px; --font-size-label: 12px; --font-size-micro: 11px; --line-height-compact: 1.55; --line-height-small: 1.50; --line-height-label: 1.40; --line-height-micro: 1.30; /* Table Spacing */ --table-cell-padding: calc(var(--spacing-unit) * 1.5); --table-cell-padding-compact: calc(var(--spacing-unit) * 1); --badge-green-bg: #e6f9e6; --badge-green-fg: #116329; --badge-green-border: #a8d8a8; --badge-blue-bg: #e0f0ff; --badge-blue-fg: #1a56db; --badge-blue-border: #91bef5; --badge-purple-bg: #f0e0ff; --badge-purple-fg: #6e40c9; --badge-purple-border: #c9b8e8; --badge-amber-bg: #fff3cd; --badge-amber-fg: #7c5200; --badge-amber-border: #ffd666; --badge-orange-bg: #ffe0cc; --badge-orange-fg: #bf4b00; --badge-orange-border: #ffad80; --badge-indigo-bg: #ddecff; --badge-indigo-fg: #0969da; --badge-indigo-border: #8ec8ff; --badge-violet-bg: #ffe0f5; --badge-violet-fg: #8250df; --badge-violet-border: #daa0e0; --badge-red-bg: #ffebe9; --badge-red-fg: #d1242f; --badge-lab-bg: #dff0df; --badge-lab-fg: #116329; --badge-lab-border: #a8d8a8; --bg: #ffffff; --bg2: #f6f8fa; --bg3: #eef1f4; --border: #d0d7de; --text: #1f2328; --text-dim: #636c76; --text-inverse: #fff; --accent: #0969da; --accent-green: #1a7f37; --accent-purple: #6639ba; --accent-dark: #0550ae; --accent-amber: #953800; --accent-red: #cf222e; --bg-info: #f0f7ff; --bg-note: #fff8c5; --bg-warn: #fff8f8; --bg-success: #f0fff4; --bg-error: #ffebe9; --bg-situation: #fffbf0; --bg-video: #f0f6ff; --border-info: #0969da; --border-note: #9a6700; --border-warn: #cf222e; --border-success: #1a7f37; --border-error: #cf222e; --border-situation: #f2c97d; --border-video: #d0e8ff; --code-bg: #f6f8fa; --code-border: #d0d7de; --tag-bg: #ddf4ff; --tag-text: #0550ae; --platform-claude: #d97706; --platform-claudeapp: #f59e0b; --platform-agy: #0550ae; --platform-antigravity: #6639ba; --compare-without-bg: #fff8f8; --compare-without-border: #ffc1bc; --compare-with-bg: #f0fff4; --compare-with-border: #a2d9b1; --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 14px rgba(9,105,218,.10); /* Backward-compatible aliases */ --accent2: var(--accent-green); --accent3: var(--accent-amber); --accent4: var(--accent-purple); --accent5: var(--accent-red); --accent6: var(--accent-dark); } /* ---------- Dark mode via .dark class (JS-managed) ---------- */ .dark { --badge-green-bg: #0a2e14; --badge-green-fg: #2ea44f; --badge-green-border: #1a5c2e; --badge-blue-bg: #0c2d5a; --badge-blue-fg: #58a6ff; --badge-blue-border: #1f6feb; --badge-purple-bg: #2d1045; --badge-purple-fg: #bc8cff; --badge-purple-border: #6e40c9; --badge-amber-bg: #3d2600; --badge-amber-fg: #e3b341; --badge-amber-border: #6e5c1a; --badge-orange-bg: #3d1a00; --badge-orange-fg: #f0883e; --badge-orange-border: #6e3c1a; --badge-indigo-bg: #0c2d5a; --badge-indigo-fg: #58a6ff; --badge-indigo-border: #1f6feb; --badge-violet-bg: #2d1045; --badge-violet-fg: #bc8cff; --badge-violet-border: #6e40c9; --badge-red-bg: #3d0a0a; --badge-red-fg: #f85149; --badge-lab-bg: #0a2e14; --badge-lab-fg: #2ea44f; --badge-lab-border: #1a5c2e; --bg: #0d1117; --bg2: #161b22; --bg3: #21262d; --border: #30363d; --text: #e6edf3; --text-dim: #8b949e; --text-inverse: #fff; --accent: #58a6ff; --accent-green: #3fb950; --accent-purple: #bc8cff; --accent-dark: #1f6feb; --accent-amber: #d29922; --accent-red: #f85149; --bg-info: #0d2240; --bg-note: #3b2e00; --bg-warn: #3b1219; --bg-success: #0f5323; --bg-error: #490202; --bg-situation: #3b2e00; --bg-video: #0d2240; --border-info: #58a6ff; --border-note: #d29922; --border-warn: #f85149; --border-success: #3fb950; --border-error: #f85149; --border-situation: #d29922; --border-video: #58a6ff; --code-bg: #161b22; --code-border: #30363d; --tag-bg: #0d2240; --tag-text: #58a6ff; --platform-claude: #f0883e; --platform-claudeapp: #f59e0b; --platform-agy: #58a6ff; --platform-antigravity: #bc8cff; --compare-without-bg: #3b1219; --compare-without-border: #f85149; --compare-with-bg: #0f5323; --compare-with-border: #3fb950; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 14px rgba(0,0,0,.3); --accent2: var(--accent-green); --accent3: var(--accent-amber); --accent4: var(--accent-purple); --accent5: var(--accent-red); --accent6: var(--accent-dark); }