/* ===================================================================== kebab-stack · design tokens v1 Light, nerdy, kebab. One skewer, many layers. Two type faces, each with one job: --ks-display mono, headings & brand (terminal warmth) --ks-ui system sans, UI chrome --ks-mono mono, values/ids/code Primary accent: flame (#E85D2F) — the grill. Fresh green for "active/ok" indicators — the salad. Default theme: warm paper. Dark theme: charcoal, opt-in via [data-theme="dark"] on . ===================================================================== */ :root { /* ---- Type faces ------------------------------------------------- */ --ks-display: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Code", Consolas, monospace; --ks-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ks-mono: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Code", Consolas, monospace; /* ---- Type scale ------------------------------------------------- */ --ks-fz-eyebrow: 11px; --ks-fz-body: 16px; --ks-fz-body-sm: 14px; --ks-fz-h3: 20px; --ks-fz-h2: 30px; --ks-fz-h1: clamp(34px, 5.6vw, 64px); --ks-fz-marker: 12px; --ks-lh-tight: 1.05; --ks-lh-display: 1.18; --ks-lh-body: 1.55; --ks-lh-meta: 1.4; --ks-tracking-display: -0.02em; /* mono headings, slightly tightened */ --ks-tracking-h2: -0.015em; --ks-tracking-eyebrow: 0.16em; --ks-tracking-mono: 0.02em; --ks-weight-display: 600; --ks-weight-body: 400; --ks-weight-ui: 400; --ks-weight-ui-strong: 500; /* ---- Spacing ---------------------------------------------------- */ --ks-space-1: 4px; --ks-space-2: 8px; --ks-space-3: 12px; --ks-space-4: 16px; --ks-space-5: 24px; --ks-space-6: 32px; --ks-space-7: 48px; --ks-space-8: 64px; --ks-space-9: 96px; --ks-space-10: 128px; --ks-space-section: 120px; /* ---- Layout ----------------------------------------------------- */ --ks-container: 1280px; --ks-prose: 720px; --ks-gutter: 32px; /* ---- Radii ------------------------------------------------------ */ --ks-radius-inline: 4px; --ks-radius-card: 10px; --ks-radius-input: 8px; --ks-radius-pill: 9999px; /* ---- Border weights --------------------------------------------- */ --ks-rule-w: 1px; --ks-card-stripe-w: 3px; /* ================================================================= LIGHT THEME (default: warm paper) ================================================================= */ /* Backgrounds */ --ks-bg: #fbf8f2; /* warm paper */ --ks-bg-sunk: #f4eee4; /* sunk panels */ --ks-bg-elev: #ffffff; /* raised cards */ --ks-bg-cta-inverse: #211d17; --ks-bg-card: #ffffff; /* Grid paper texture (nerd graph paper) */ --ks-grid-line: rgba(33, 29, 23, 0.05); --ks-grid-tile: 24px; /* Text */ --ks-fg: #211d17; /* warm charcoal ink */ --ks-fg-body: #211d17; --ks-fg-secondary: #5b5345; --ks-fg-muted: #8d8271; --ks-fg-disabled: #bbb0a0; --ks-fg-inverse: #ffffff; /* Rules and borders */ --ks-rule: #e9e1d3; --ks-rule-strong: #5b5345; /* Accent: flame */ --ks-accent: #e85d2f; --ks-accent-strong: #c94a22; --ks-accent-dim: rgba(232, 93, 47, 0.12); /* Section stripes (card top stripes, category coding) */ --ks-section-default: var(--ks-accent); --ks-section-teal: #1f9d6b; /* the salad */ --ks-section-blue: #3d6ed0; /* Indicators (status dots) */ --ks-indicator-teal: #21a06e; /* fresh = active */ --ks-indicator-rust: var(--ks-accent); /* Code surfaces */ --ks-code-bg: #f3ecdf; --ks-code-fg: #211d17; /* Focus */ --ks-focus: #c94a22; } /* =================================================================== DARK THEME (opt-in): charcoal grill, flame glows brighter. Apply on . =================================================================== */ [data-theme="dark"] { --ks-bg: #16130e; --ks-bg-elev: #201b14; --ks-bg-cta-inverse: #ffffff; --ks-bg-card: #201b14; --ks-bg-sunk: #1d1812; --ks-grid-line: rgba(243, 237, 226, 0.05); --ks-fg: #f3ede2; --ks-fg-body: #f3ede2; --ks-fg-secondary: #aba08d; --ks-fg-muted: #7e7465; --ks-fg-disabled: #4c453b; --ks-fg-inverse: #211d17; --ks-rule: #2e2820; --ks-rule-strong: #6a6152; --ks-accent: #ff7a45; --ks-accent-strong: #ff8f60; --ks-accent-dim: rgba(255, 122, 69, 0.16); --ks-section-default: var(--ks-accent); --ks-section-teal: #34b57e; --ks-section-blue: #6f97e8; --ks-indicator-teal: #34b57e; --ks-indicator-rust: var(--ks-accent); --ks-code-bg: #201b14; --ks-code-fg: #f3ede2; --ks-focus: var(--ks-accent); } /* =================================================================== Base element styling =================================================================== */ html { background: var(--ks-bg); color: var(--ks-fg); font-family: var(--ks-ui); font-size: 16px; line-height: var(--ks-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; background: var(--ks-bg); color: var(--ks-fg); } ::selection { background: var(--ks-accent); color: #ffffff; } a { color: inherit; text-decoration-color: var(--ks-rule-strong); text-underline-offset: 3px; } a:hover { color: var(--ks-accent); } :focus-visible { outline: 2px solid var(--ks-focus); outline-offset: 2px; } /* Headings carry the mono display face: the terminal is the brand. */ .ks-prose, .ks-display, h1, h2, h3, h4, h5 { font-family: var(--ks-display); letter-spacing: var(--ks-tracking-display); } /* =================================================================== Surface utilities =================================================================== */ .ks-bg-sunk { background: var(--ks-bg-sunk); } /* Nerd graph paper: two crossed hairline gradients, 24px tile. */ .ks-grid-paper { background-image: linear-gradient(90deg, var(--ks-grid-line) 1px, transparent 1px), linear-gradient(var(--ks-grid-line) 1px, transparent 1px); background-size: var(--ks-grid-tile) var(--ks-grid-tile); background-position: -1px -1px; background-repeat: repeat; } .ks-grid-paper-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0.8; background-image: linear-gradient(90deg, var(--ks-grid-line) 1px, transparent 1px), linear-gradient(var(--ks-grid-line) 1px, transparent 1px); background-size: var(--ks-grid-tile) var(--ks-grid-tile); background-position: -1px -1px; background-repeat: repeat; } /* The skewer divider: a dotted line with layers on it. Decorative. */ .ks-skewer-rule { border: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--ks-rule) 0 12px, transparent 12px 20px); position: relative; }