/* WikiTA design tokens * Based on the Claude Design handoff (WUICCGACDhVsjXtkUGdc2w). * Default = "Paper Lamp" — warm cream + terracotta + serif headings. * Light/dark via [data-theme]; palette/font/density via [data-*] attrs. * All values overridable from JS by setting attributes on . */ :root { /* ── Paper Lamp surfaces (light) ─────────────────────────────────── */ --bg: #f5efe4; /* page paper */ --bg-card: #fbf6ec; /* card / surface */ --bg-soft: #f0e9da; /* between */ --ink: #2a1f15; /* body text — dark brown */ --ink-soft: #6a5641; /* secondary text */ --ink-faint: #9a8770; /* tertiary / muted */ --line: rgba(60, 40, 20, 0.10); --line-soft: rgba(60, 40, 20, 0.06); --chip: #ebe2cf; --feedback-correct-bg: #e6f1d4; --feedback-correct-line: #b6cf8a; --feedback-correct-ink: #4a6322; --feedback-wrong-bg: #fbe6dd; --feedback-wrong-line: #e8b6a0; --feedback-wrong-ink: #92381a; /* Accent: default Terracotta (light variant) */ --accent: #b85a35; --accent-soft: rgba(184, 90, 53, 0.10); --accent-line: rgba(184, 90, 53, 0.30); --accent-ink: #fff; --accent-deep: #8a3f20; --glow: rgba(232, 180, 140, 0.35); /* Typography defaults (Classic font pair) */ --font-serif: "Cormorant Garamond", "Source Serif Pro", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 12px; /* Shadows */ --shadow-1: 0 1px 2px rgba(60, 40, 20, 0.04); --shadow-2: 0 4px 16px rgba(60, 40, 20, 0.08); /* Code surfaces (used by .wiki-rendered, etc.) */ --code-bg: #1f1812; --code-fg: #f0e4d2; } /* ── Dark Paper Lamp — candlelit desk ─────────────────────────────── */ [data-theme="dark"] { --bg: #1f1812; --bg-card: #2a2018; --bg-soft: #352820; --ink: #f0e4d2; --ink-soft: #a89580; --ink-faint: #6b5a47; --line: rgba(240, 228, 210, 0.10); --line-soft: rgba(240, 228, 210, 0.06); --chip: #3a2b21; --feedback-correct-bg: #1a3528; --feedback-correct-line: #2d6745; --feedback-correct-ink: #a8e8c4; --feedback-wrong-bg: #3a2418; --feedback-wrong-line: #6a4022; --feedback-wrong-ink: #f5b8a4; /* Accent: Terracotta dark variant (lighter so it pops on dark) */ --accent: #e89968; --accent-soft: rgba(232, 153, 104, 0.14); --accent-line: rgba(232, 153, 104, 0.30); --accent-ink: #1f1812; --accent-deep: #c97a4a; --glow: rgba(232, 153, 104, 0.18); --code-bg: #0d1614; --code-fg: #ecf7f3; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ── Palette swatches: applied via [data-palette="..."] on ── */ /* Terracotta is the default (already in :root) — listed for parity. */ [data-palette="terracotta"] { --accent: #b85a35; --accent-soft: rgba(184,90,53,0.10); --accent-deep: #8a3f20; --glow: rgba(232,180,140,0.35); } [data-palette="terracotta"][data-theme="dark"] { --accent: #e89968; --accent-soft: rgba(232,153,104,0.14); --accent-deep: #c97a4a; --glow: rgba(232,153,104,0.18); } [data-palette="amber"] { --accent: #c87a2e; --accent-soft: rgba(200,122,46,0.10); --accent-deep: #8a5615; --glow: rgba(245,183,92,0.30); } [data-palette="amber"][data-theme="dark"] { --accent: #f5b75c; --accent-soft: rgba(245,183,92,0.12); --accent-deep: #c89030; --glow: rgba(245,183,92,0.18); } [data-palette="olive"] { --accent: #5a7a38; --accent-soft: rgba(90,122,56,0.10); --accent-deep: #3a5520; --glow: rgba(138,174,106,0.22); } [data-palette="olive"][data-theme="dark"] { --accent: #a8c878; --accent-soft: rgba(168,200,120,0.14); --accent-deep: #7a9a50; --glow: rgba(168,200,120,0.14); } [data-palette="plum"] { --accent: #7a4a8e; --accent-soft: rgba(122,74,142,0.10); --accent-deep: #553068; --glow: rgba(177,134,196,0.22); } [data-palette="plum"][data-theme="dark"] { --accent: #c89adc; --accent-soft: rgba(200,154,220,0.14); --accent-deep: #a072b8; --glow: rgba(200,154,220,0.14); } /* ── Font pair swatches: applied via [data-font="..."] ──────────── */ /* Classic is the default. */ [data-font="editorial"] { --font-serif: "Source Serif Pro", "Iowan Old Style", Georgia, serif; } [data-font="modern"] { --font-serif: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } [data-font="technical"] { --font-serif: "JetBrains Mono", ui-monospace, Menlo, monospace; } /* ── Density: applied via [data-density="..."] on ─────────── */ /* Comfortable (1.0) is default. Compact/spacious scale the whole UI. */ [data-density="compact"] { zoom: 0.88; } [data-density="spacious"] { zoom: 1.10; } /* ───────────────────────────────────────────────────────────────── Templates: applied via [data-template="..."] on . Each one is a (decoration + heading-font + chip-shape) preset. Palette/font are set independently via tweaks panel — picking a template defaults them but the user can override. ───────────────────────────────────────────────────────────────── */ /* A · Paper Lamp 紙燈 — warm cream paper, terracotta accent (default). Soft radial glow at top-left like a desk lamp on parchment. */ [data-template="paper-lamp"] body, body { background-image: radial-gradient(ellipse at 20% 0%, var(--glow), transparent 55%); } /* B · Night Owl 夜讀 — late-night study lamp; amber halo centered top (suggests a single warm lamp above the desk). */ [data-template="night-owl"] body { background-image: radial-gradient(ellipse at 50% -8%, var(--glow), transparent 50%); } [data-template="night-owl"][data-theme="dark"] body { background-image: radial-gradient(ellipse at 50% -10%, rgba(245, 183, 92, 0.20), transparent 55%); } [data-template="night-owl"] .wk-h-serif, [data-template="night-owl"] .wk-brand-name { font-weight: 600; /* a touch heavier for late-night legibility */ } /* C · Atelier 書齋 — editorial / Notion calm. No glow, thinner lines, slightly tighter spacing. Source Serif Pro headings look right here. */ [data-template="atelier"] body { background-image: none; } [data-template="atelier"] { --line: rgba(60, 40, 20, 0.06); --line-soft: rgba(60, 40, 20, 0.03); --shadow-1: none; --shadow-2: 0 2px 8px rgba(60, 40, 20, 0.04); } [data-template="atelier"][data-theme="dark"] { --line: rgba(240, 228, 210, 0.06); --line-soft: rgba(240, 228, 210, 0.03); } /* D · Workshop 工坊 — IDE / terminal aesthetic but in warm orange, not cold cyan. Mono headings, subtle vertical pinstripe at edges. */ [data-template="workshop"] body { background-image: radial-gradient(circle at 100% 0%, var(--glow), transparent 35%), radial-gradient(circle at 0% 100%, var(--glow), transparent 35%); } [data-template="workshop"] { /* Headings (h1/h2) ride --font-serif. Make it mono for the IDE feel. */ --font-serif: var(--font-mono); --r-md: 4px; --r-lg: 6px; } [data-template="workshop"] .wk-h-serif { letter-spacing: 0; text-transform: none; } [data-template="workshop"] .wk-brand-name { font-family: var(--font-mono); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; } [data-template="workshop"] .wk-brand-mark { border-radius: 4px; /* square mark instead of circle */ font-family: var(--font-mono); font-style: normal; } /* ── Common patterns: helpers usable across pages ───────────────── */ /* Brand mark — italic serif W in a terracotta circle */ .wk-brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 18px; line-height: 1; } .wk-brand-name { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.2px; color: var(--ink); } /* Primary button (warm terracotta) */ .wk-btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--r-md); padding: 9px 16px; font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background 0.15s, transform 0.05s; } .wk-btn-primary:hover { background: var(--accent-deep); } .wk-btn-primary:active { transform: translateY(1px); } /* Soft card / surface */ .wk-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } /* Serif heading helper */ .wk-h-serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.3px; } .wk-h-serif em, .wk-h-serif .accent { font-style: italic; color: var(--accent); } /* Subtle uppercase eyebrow */ .wk-eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint); }