/* KrowForge — base tokens * Theme-aware via [data-theme="light" | "dark"] on . * Landing uses paper tokens. Workspace uses term tokens. */ @import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,600&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap"); :root { --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; } /* ---------- LIGHT (paper) ---------- */ html[data-theme="light"] { --paper: #f4efe6; --paper-2: #ebe4d6; --ink: #141210; --ink-soft: #3a342d; --ink-dim: #6b6258; --ink-faint: #a59a8a; --rule: #1a1815; --accent: #b83227; /* ink-stamp red */ --accent-soft: rgba(184, 50, 39, 0.08); --term-bg: #faf7ef; --term-bg-2: #f2ecdd; --term-bg-3: #ebe4d0; --term-fg: #1d1b17; --term-dim: #6b6258; --term-faint: #a69a87; --term-line: #d4ccb8; --term-accent: #a8701f; /* brass, warmer on light */ --term-green: #3c7a3b; --term-red: #b83227; --term-warn: #9c7317; --term-blue: #2f5a87; --term-yellow: #9c7317; /* Legacy aliases — keep every stylesheet resolving to one token system. */ --panel: var(--term-bg-2); --panel-2: var(--term-bg-3); --panel-solid: var(--term-bg); --surface: var(--term-bg-2); --border: var(--term-line); --line: var(--term-line); --muted: var(--term-dim); --text: var(--term-fg); /* Semantic overlay tints — theme-appropriate "neutral washes". */ --overlay-1: rgba(20, 18, 16, 0.04); --overlay-2: rgba(20, 18, 16, 0.08); --overlay-3: rgba(20, 18, 16, 0.12); --overlay-soft: rgba(20, 18, 16, 0.02); /* Unread / info tint derived from accent instead of hardcoded blue. */ --info-soft: rgba(47, 90, 135, 0.08); --shadow: 0 8px 24px rgba(20, 18, 16, 0.08); /* Short aliases used by older stylesheets. */ --fg: var(--term-fg); --bg: var(--term-bg); --input-bg: var(--term-bg); } /* ---------- DARK (terminal) ---------- */ html[data-theme="dark"] { --paper: #0c0d0b; --paper-2: #13140f; --ink: #e8e5dc; --ink-soft: #c3bdaf; --ink-dim: #8a867d; --ink-faint: #5a564e; --rule: #2a2a24; --accent: #d35d52; --accent-soft: rgba(211, 93, 82, 0.12); --term-bg: #0b0c0a; --term-bg-2: #111310; --term-bg-3: #161814; --term-fg: #d6d3cc; --term-dim: #8a867d; --term-faint: #5a564e; --term-line: #23241f; --term-accent: #c6a15b; --term-green: #7cb07b; --term-red: #c86a5b; --term-warn: #d9b166; --term-blue: #7fa7d1; --term-yellow: #d9b166; /* Legacy aliases — keep every stylesheet resolving to one token system. */ --panel: var(--term-bg-2); --panel-2: var(--term-bg-3); --panel-solid: var(--term-bg); --surface: var(--term-bg-2); --border: var(--term-line); --line: var(--term-line); --muted: var(--term-dim); --text: var(--term-fg); /* Semantic overlay tints — theme-appropriate "neutral washes". */ --overlay-1: rgba(255, 253, 247, 0.04); --overlay-2: rgba(255, 253, 247, 0.08); --overlay-3: rgba(255, 253, 247, 0.12); --overlay-soft: rgba(255, 253, 247, 0.02); --info-soft: rgba(127, 167, 209, 0.10); --shadow: 0 8px 24px rgba(0, 0, 0, 0.45); /* Short aliases used by older stylesheets. */ --fg: var(--term-fg); --bg: var(--term-bg); --input-bg: var(--term-bg); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background .18s ease, color .18s ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, textarea, button, select { font-family: inherit; color: inherit; } code, pre, .mono { font-family: var(--mono); } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.005em; } p { margin: 0; } /* ---- scrollbar ---- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.25); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,0.45); } /* ---- inputs ---- */ input[type="text"], textarea, select { background: transparent; border: 1px solid var(--rule); color: var(--ink); border-radius: 0; padding: 9px 12px; outline: none; width: 100%; font-family: var(--mono); font-size: 13px; transition: border-color .12s ease; } input[type="text"]:focus, textarea:focus, select:focus { border-color: var(--accent); } /* ---- buttons ---- */ .btn-ink { display: inline-block; padding: 12px 22px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 14px; letter-spacing: 0.01em; font-weight: 500; border: 1px solid var(--ink); border-radius: 0; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-ink:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-ink-lg { padding: 16px 28px; font-size: 15px; } .btn-ink-sm { padding: 8px 14px; font-size: 13px; } .btn-plain { display: inline-block; padding: 12px 2px; color: var(--ink); font-family: var(--sans); font-size: 14px; border-bottom: 1px solid var(--ink); } .btn-plain:hover { color: var(--accent); border-color: var(--accent); } /* ---------- theme toggle ---------- */ .theme-toggle { width: 34px; height: 34px; background: transparent; border: 1px solid var(--rule); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 0; font-family: var(--mono); font-size: 14px; line-height: 1; transition: border-color .12s ease, color .12s ease, background .12s ease; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } html[data-theme="light"] .theme-toggle::before { content: "☾"; } html[data-theme="dark"] .theme-toggle::before { content: "☀"; } /* ----------------------------------------------------------------- * Launch-freeze: alpha scope * Adding `alpha-full` to reveals everything; default is alpha. * ----------------------------------------------------------------- */ .alpha-hide { display: none !important; } html.alpha-full .alpha-hide { display: revert !important; }