/* ═══════════════════════════════════════════════════════════════════════════ kasm docs — design system ═══════════════════════════════════════════════════════════════════════════ All colors, spacing, and typography go through CSS custom properties. Switch themes by changing [data-theme] on . ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Design Tokens ────────────────────────────────────────────────────────── */ :root { /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Typography */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.8125rem; --font-size-base: 0.9375rem; --font-size-lg: 1.125rem; --font-size-xl: 1.375rem; --font-size-2xl: 1.75rem; --font-size-3xl: 2.25rem; --line-height: 1.7; /* Sidebar */ --sidebar-w: 260px; /* Borders */ --radius: 6px; --radius-lg: 10px; } /* ─── Light theme ──────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #fafafa; --bg-sidebar: #f0f0f0; --bg-surface: #ffffff; --bg-code: #f4f4f5; --bg-code-block: #1e1e2e; --bg-accent: #e8e8ec; --bg-highlight: #dbeafe; --fg: #1a1a2e; --fg-muted: #6b7280; --fg-sidebar: #374151; --fg-heading: #111827; --fg-code: #c9d1d9; --fg-code-inline: #d946ef; --fg-link: #2563eb; --fg-link-hover: #1d4ed8; --border: #e5e7eb; --border-active: #2563eb; --shadow: 0 1px 3px rgba(0,0,0,0.06); --shadow-lg: 0 4px 12px rgba(0,0,0,0.08); } /* ─── Dark theme ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0f0f17; --bg-sidebar: #161622; --bg-surface: #1a1a2e; --bg-code: #1e1e2e; --bg-code-block: #11111b; --bg-accent: #2a2a3e; --bg-highlight: #1e3a5f; --fg: #cdd6f4; --fg-muted: #6c7086; --fg-sidebar: #a6adc8; --fg-heading: #f0f0f8; --fg-code: #cdd6f4; --fg-code-inline: #f5c2e7; --fg-link: #89b4fa; --fg-link-hover: #b4d0fb; --border: #2a2a3e; --border-active: #89b4fa; --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-lg: 0 4px 12px rgba(0,0,0,0.4); } /* ─── Reset ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height); color: var(--fg); background: var(--bg); display: flex; min-height: 100vh; } /* ─── Sidebar ──────────────────────────────────────────────────────────────── */ #sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; z-index: 100; transition: transform 0.25s ease; } .sidebar-header { padding: var(--sp-6) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--border); } .logo { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--fg-heading); font-family: var(--font-mono); } .logo-badge { display: inline-block; background: var(--fg-heading); color: #fff; padding: 0 4px; border-radius: 0; font-size: inherit; font-weight: inherit; font-family: inherit; letter-spacing: inherit; vertical-align: baseline; margin-left: 3px; line-height: 1.2; } .logo-sub { display: block; font-size: var(--font-size-xs); color: var(--fg-muted); letter-spacing: 0.05em; text-transform: uppercase; margin-top: var(--sp-1); } /* ─── Navigation ───────────────────────────────────────────────────────────── */ #nav { flex: 1; padding: var(--sp-4) 0; } .nav-section { margin-bottom: var(--sp-4); } .nav-section-title { padding: var(--sp-2) var(--sp-6); font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); } .nav-link { display: block; padding: var(--sp-2) var(--sp-6); font-size: var(--font-size-sm); color: var(--fg-sidebar); text-decoration: none; border-left: 3px solid transparent; transition: all 0.15s ease; } .nav-link:hover { color: var(--fg-heading); background: var(--bg-accent); } .nav-link.active { color: var(--fg-heading); font-weight: 600; border-left-color: var(--border-active); background: var(--bg-accent); } /* ─── Sidebar subsections (auto-generated from h2 headings) ───────────────── */ .nav-subsections { display: none; padding: var(--sp-1) 0; } .nav-subsections.open { display: block; } .nav-sublink { display: block; padding: var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-10); font-size: var(--font-size-xs); color: var(--fg-muted); text-decoration: none; transition: all 0.15s ease; line-height: 1.5; border-left: 3px solid transparent; } .nav-sublink:hover { color: var(--fg-heading); background: var(--bg-accent); border-left-color: var(--border); } /* ─── Sidebar footer ──────────────────────────────────────────────────────── */ .sidebar-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); } #theme-toggle { background: var(--bg-accent); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); cursor: pointer; font-size: var(--font-size-base); color: var(--fg); transition: all 0.15s ease; } #theme-toggle:hover { background: var(--bg-highlight); } [data-theme="light"] .icon-dark { display: none; } [data-theme="dark"] .icon-light { display: none; } /* ─── Main content ─────────────────────────────────────────────────────────── */ #main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; } #content { max-width: 820px; margin: 0 auto; padding: var(--sp-10) var(--sp-8) var(--sp-16); } #menu-toggle { display: none; position: fixed; top: var(--sp-4); left: var(--sp-4); z-index: 200; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); font-size: var(--font-size-lg); color: var(--fg); cursor: pointer; box-shadow: var(--shadow); } /* ─── Typography ───────────────────────────────────────────────────────────── */ #content h1 { font-size: var(--font-size-3xl); font-weight: 700; color: var(--fg-heading); letter-spacing: -0.02em; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 2px solid var(--border); } #content h2 { font-size: var(--font-size-xl); font-weight: 600; color: var(--fg-heading); margin-top: var(--sp-12); margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); } #content h3 { font-size: var(--font-size-lg); font-weight: 600; color: var(--fg-heading); margin-top: var(--sp-8); margin-bottom: var(--sp-3); } #content h4 { font-size: var(--font-size-base); font-weight: 600; color: var(--fg-heading); margin-top: var(--sp-6); margin-bottom: var(--sp-2); } #content p { margin-bottom: var(--sp-4); } #content a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } #content a:hover { color: var(--fg-link-hover); border-bottom-color: var(--fg-link-hover); } #content strong { font-weight: 600; color: var(--fg-heading); } /* ─── Lists ────────────────────────────────────────────────────────────────── */ #content ul, #content ol { margin-bottom: var(--sp-4); padding-left: var(--sp-6); } #content li { margin-bottom: var(--sp-2); } #content li > ul, #content li > ol { margin-top: var(--sp-2); margin-bottom: 0; } /* ─── Code ─────────────────────────────────────────────────────────────────── */ #content code { font-family: var(--font-mono); font-size: 0.85em; } #content :not(pre) > code { background: var(--bg-code); color: var(--fg-code-inline); padding: 2px 6px; border-radius: 4px; } #content pre { background: var(--bg-code-block); color: var(--fg-code); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); overflow-x: auto; font-size: var(--font-size-sm); line-height: 1.6; border: 1px solid var(--border); } #content pre code { background: none; color: inherit; padding: 0; font-size: inherit; } /* ─── Blockquotes ──────────────────────────────────────────────────────────── */ #content blockquote { border-left: 4px solid var(--border-active); background: var(--bg-highlight); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0; color: var(--fg); } #content blockquote p:last-child { margin-bottom: 0; } /* ─── Tables ───────────────────────────────────────────────────────────────── */ #content table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-5); font-size: var(--font-size-sm); } #content th { text-align: left; font-weight: 600; color: var(--fg-heading); padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid var(--border); background: var(--bg-accent); } #content td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); } #content tr:hover td { background: var(--bg-accent); } /* ─── Horizontal rule ──────────────────────────────────────────────────────── */ #content hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-10) 0; } /* ─── Interactive diagrams ─────────────────────────────────────────────────── */ /* Break out of the 820px content column so the SVG has room to breathe. Uses negative-margin full-bleed: pulls left to the sidebar edge and stretches right to the viewport edge. Falls back to horizontal scroll on narrow screens. */ .diagram-mount { margin-left: calc(-1 * var(--sp-8)); margin-right: calc(-1 * var(--sp-8)); overflow-x: auto; margin-bottom: var(--sp-6); } /* ─── Mermaid diagrams ─────────────────────────────────────────────────────── */ .mermaid-container { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); overflow-x: auto; text-align: center; } .mermaid-container svg { max-width: 100%; height: auto; } /* ─── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { #sidebar { transform: translateX(-100%); } #sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); } #main { margin-left: 0; } #menu-toggle { display: block; } #content { padding: var(--sp-16) var(--sp-5) var(--sp-12); } }