/* ============================================================ Architext — Theme Definitions Six themes: 3 app modes × 2 color schemes Applied as a single class on . ============================================================ */ :root { /* User badges — VIP is true gold across every theme; Founder follows the active brand accent. */ --badge-vip-bg: #c9a455; --badge-vip-fg: #1a1200; --badge-founder-bg: var(--accent); --badge-founder-fg: var(--accent-text); /* Focus mode dimming. Resolve against the active theme's ink at use-time, so a single definition covers every theme. Override per-theme later if a scheme needs a softer fade. */ --focus-dim-ink: var(--ink3); --focus-active-ink: var(--ink); } .theme-developer-dark { --bg: #1e1e1e; --bg2: #181818; --bg3: #252525; --ink: #e0e0e0; --ink2: #9e9e9e; --ink3: #6a6a6a; --accent: #7b2cbf; --accent-hover: #8a2be2; --accent-lt: rgba(123, 44, 191, 0.15); --accent-gold: #c9a455; --accent-gold-lt: rgba(201, 164, 85, 0.15); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #ffffff; --border: #2d2d2d; --border2: #404040; --status-success: #43a047; --status-warning: #f9a825; --status-error: #e53935; --prov-typed-bg: rgba(74, 222, 128, 0.28); --prov-paste-bg: rgba(251, 191, 36, 0.30); --prov-ai-bg: rgba(248, 113, 113, 0.32); --shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.3); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-brand: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --board-header-bg: #1e1e26; --board-cell-bg: #222225; --board-node-bg: #2a2a2f; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } /* ============================================================ 3.2 Developer Light ============================================================ */ .theme-developer-light { --bg: #f5f5f5; --bg2: #ececec; --bg3: #e2e2e2; --ink: #1a1a1a; --ink2: #5a5a5a; --ink3: #8a8a8a; --accent: #6a0dad; --accent-hover: #7b2cbf; --accent-lt: rgba(106, 13, 173, 0.1); --accent-gold: #b08a3a; --accent-gold-lt: rgba(176, 138, 58, 0.15); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #ffffff; --border: #d4d4d4; --border2: #b8b8b8; --status-success: #2e7d32; --status-warning: #e65100; --status-error: #c62828; --prov-typed-bg: rgba(34, 197, 94, 0.20); --prov-paste-bg: rgba(234, 88, 12, 0.20); --prov-ai-bg: rgba(220, 38, 38, 0.20); --shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15), 0 16px 48px rgba(0, 0, 0, 0.1); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-brand: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --board-header-bg: #e8e8f0; --board-cell-bg: #f0f0f5; --board-node-bg: #e6e6ee; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } /* ============================================================ 3.3 Writer Dark (v4 brand — Deep Navy Ink + Cream paper) ============================================================ */ .theme-writer-dark { --bg: #1a1612; --bg2: #2c2820; --bg3: #3a342a; --ink: #f4ede0; --ink2: #89cff1; --ink3: #5293bb; --accent: #6eb1d6; --accent-hover: #89cff1; --accent-lt: rgba(110, 177, 214, 0.18); --accent-gold: #89cff1; --accent-gold-lt: rgba(137, 207, 241, 0.16); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #0b1b2e; --border: rgba(244, 237, 224, 0.10); --border2: rgba(244, 237, 224, 0.20); --status-success: #4fc08a; --status-warning: #d4813a; --status-error: #c0605a; --status-red: #fc8181; --status-orange: #fb923c; --status-amber: #e8933a; --status-yellow: #fbbf24; --status-lime: #a3e635; --status-green: #4fc98a; --status-teal: #5eead4; --status-blue: #5aacf0; --status-indigo: #a5b4fc; --status-purple: #c07fea; --status-pink: #f472b6; --status-slate: #94a3b8; --prov-typed-bg: rgba(79, 192, 138, 0.38); --prov-paste-bg: rgba(210, 148, 38, 0.40); --prov-ai-bg: rgba(208, 80, 48, 0.40); --shadow: 0 2px 8px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.28); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --font-brand: 'Fraunces', 'Source Serif 4', 'Georgia', serif; --board-header-bg: #221f18; --board-cell-bg: #282420; --board-node-bg: #322e24; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: center; --heading-border: 1px solid var(--border); --content-align: justify; --content-indent: 2em; --heading-margin: 2em 0 0.75em; --heading-bottom-margin: 0.4em; --content-paragraph-gap: 1em; --assembled-font: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } /* ============================================================ 3.4 Writer Light (v4 brand — Cream + Monochrome Blue) ============================================================ */ .theme-writer-light { --bg: #f4ede0; --bg2: #ebe1cd; --bg3: #ddcfb2; --ink: #0f1a2a; --ink2: #1b5886; --ink3: #5293bb; --accent: #003a6b; --accent-hover: #1b5886; --accent-lt: rgba(0, 58, 107, 0.12); --accent-gold: #5293bb; --accent-gold-lt: rgba(82, 147, 187, 0.16); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #f4ede0; --border: rgba(0, 58, 107, 0.14); --border2: rgba(0, 58, 107, 0.22); --status-success: #2a7a52; --status-warning: #b05e10; --status-error: #a32d2d; --status-red: #c53030; --status-orange: #c05621; --status-amber: #a85d0a; --status-yellow: #92651a; --status-lime: #4d7c0f; --status-green: #1e7a4a; --status-teal: #0d7377; --status-blue: #1a5fa8; --status-indigo: #4338ca; --status-purple: #7a2aaa; --status-pink: #be185d; --status-slate: #475569; --prov-typed-bg: rgba(42, 122, 82, 0.20); --prov-paste-bg: rgba(176, 94, 16, 0.18); --prov-ai-bg: rgba(163, 45, 45, 0.20); --shadow: 0 1px 3px rgba(0, 58, 107, 0.10), 0 4px 12px rgba(0, 58, 107, 0.06); --shadow-lg: 0 8px 24px rgba(0, 58, 107, 0.14), 0 16px 48px rgba(0, 58, 107, 0.08); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --font-brand: 'Fraunces', 'Source Serif 4', 'Georgia', serif; --board-header-bg: #ddd1b8; --board-cell-bg: #ede5d2; --board-node-bg: #e2d9c2; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: center; --heading-border: 1px solid var(--border); --content-align: justify; --content-indent: 2em; --heading-margin: 2em 0 0.75em; --heading-bottom-margin: 0.4em; --content-paragraph-gap: 1em; --assembled-font: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } /* ============================================================ 3.5 PM Dark ============================================================ */ .theme-pm-dark { --bg: #1C1B19; --bg2: #242320; --bg3: #2E2C29; --ink: #F0EDE6; --ink2: #A8A49C; --ink3: #6A665E; --accent: #6B95F5; --accent-hover: #85aeff; --accent-lt: #1A2240; --accent-gold: #c9a455; --accent-gold-lt: rgba(201, 164, 85, 0.15); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #ffffff; --border: rgba(240, 237, 230, 0.1); --border2: rgba(240, 237, 230, 0.18); --status-success: #4FC08A; --status-warning: #E8952A; --status-error: #F09595; --prov-typed-bg: rgba(74, 222, 128, 0.28); --prov-paste-bg: rgba(251, 191, 36, 0.30); --prov-ai-bg: rgba(248, 113, 113, 0.32); --shadow: 0 1px 3px rgba(26, 25, 23, 0.3), 0 4px 12px rgba(26, 25, 23, 0.15); --shadow-lg: 0 8px 24px rgba(26, 25, 23, 0.4), 0 16px 48px rgba(26, 25, 23, 0.25); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --font-brand: 'DM Sans', 'Inter', sans-serif; --board-header-bg: #242320; --board-cell-bg: #1C1B19; --board-node-bg: #262422; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } /* ============================================================ 3.6 PM Light ============================================================ */ .theme-pm-light { --bg: #FAFAF8; --bg2: #F2F0EC; --bg3: #E8E5DF; --ink: #1A1917; --ink2: #5C5A54; --ink3: #9E9B93; --accent: #2B5CE6; --accent-hover: #1A3C9E; --accent-lt: #E8EEFB; --accent-gold: #b08a3a; --accent-gold-lt: rgba(176, 138, 58, 0.15); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #ffffff; --border: rgba(26, 25, 23, 0.1); --border2: rgba(26, 25, 23, 0.18); --status-success: #217A52; --status-warning: #B05E10; --status-error: #A32D2D; --prov-typed-bg: rgba(33, 122, 82, 0.20); --prov-paste-bg: rgba(176, 94, 16, 0.20); --prov-ai-bg: rgba(163, 45, 45, 0.20); --shadow: 0 1px 3px rgba(26, 25, 23, 0.08), 0 4px 12px rgba(26, 25, 23, 0.04); --shadow-lg: 0 8px 24px rgba(26, 25, 23, 0.12), 0 16px 48px rgba(26, 25, 23, 0.08); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --font-brand: 'DM Sans', 'Inter', sans-serif; --board-header-bg: #EBE8E2; --board-cell-bg: #F4F2EE; --board-node-bg: #E9E7E1; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } /* ============================================================ OS Default Fallback — no explicit scheme stored Apply bare mode class (e.g. "theme-developer") and the media query picks up the correct dark/light variant. ============================================================ */ @media (prefers-color-scheme: dark) { .theme-developer { --bg: #1e1e1e; --bg2: #181818; --bg3: #252525; --ink: #e0e0e0; --ink2: #9e9e9e; --ink3: #6a6a6a; --accent: #7b2cbf; --accent-hover: #8a2be2; --accent-lt: rgba(123, 44, 191, 0.15); --accent-gold: #c9a455; --accent-gold-lt: rgba(201, 164, 85, 0.15); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #ffffff; --border: #2d2d2d; --border2: #404040; --status-success: #43a047; --status-warning: #f9a825; --status-error: #e53935; --prov-typed-bg: rgba(74, 222, 128, 0.28); --prov-paste-bg: rgba(251, 191, 36, 0.30); --prov-ai-bg: rgba(248, 113, 113, 0.32); --shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.3); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-brand: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --board-header-bg: #1e1e26; --board-cell-bg: #222225; --board-node-bg: #2a2a2f; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } .theme-writer { --bg: #1a1612; --bg2: #2c2820; --bg3: #3a342a; --ink: #f4ede0; --ink2: #89cff1; --ink3: #5293bb; --accent: #6eb1d6; --accent-hover: #89cff1; --accent-lt: rgba(110, 177, 214, 0.18); --accent-gold: #89cff1; --accent-gold-lt: rgba(137, 207, 241, 0.16); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #0b1b2e; --border: rgba(244, 237, 224, 0.10); --border2: rgba(244, 237, 224, 0.20); --status-success: #4fc08a; --status-warning: #d4813a; --status-error: #c0605a; --status-red: #fc8181; --status-orange: #fb923c; --status-amber: #e8933a; --status-yellow: #fbbf24; --status-lime: #a3e635; --status-green: #4fc98a; --status-teal: #5eead4; --status-blue: #5aacf0; --status-indigo: #a5b4fc; --status-purple: #c07fea; --status-pink: #f472b6; --status-slate: #94a3b8; --prov-typed-bg: rgba(79, 192, 138, 0.38); --prov-paste-bg: rgba(210, 148, 38, 0.40); --prov-ai-bg: rgba(208, 80, 48, 0.40); --shadow: 0 2px 8px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 16px 48px rgba(0, 0, 0, 0.28); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --font-brand: 'Fraunces', 'Source Serif 4', 'Georgia', serif; --board-header-bg: #221f18; --board-cell-bg: #282420; --board-node-bg: #322e24; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: center; --heading-border: 1px solid var(--border); --content-align: justify; --content-indent: 2em; --heading-margin: 2em 0 0.75em; --heading-bottom-margin: 0.4em; --content-paragraph-gap: 1em; --assembled-font: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } .theme-pm { --bg: #1C1B19; --bg2: #242320; --bg3: #2E2C29; --ink: #F0EDE6; --ink2: #A8A49C; --ink3: #6A665E; --accent: #6B95F5; --accent-hover: #85aeff; --accent-lt: #1A2240; --accent-gold: #c9a455; --accent-gold-lt: rgba(201, 164, 85, 0.15); --color-find-match: rgba(255, 200, 0, 0.25); --color-find-match-active: rgba(255, 175, 0, 0.55); --accent-text: #ffffff; --border: rgba(240, 237, 230, 0.1); --border2: rgba(240, 237, 230, 0.18); --status-success: #4FC08A; --status-warning: #E8952A; --status-error: #F09595; --prov-typed-bg: rgba(74, 222, 128, 0.28); --prov-paste-bg: rgba(251, 191, 36, 0.30); --prov-ai-bg: rgba(248, 113, 113, 0.32); --shadow: 0 1px 3px rgba(26, 25, 23, 0.3), 0 4px 12px rgba(26, 25, 23, 0.15); --shadow-lg: 0 8px 24px rgba(26, 25, 23, 0.4), 0 16px 48px rgba(26, 25, 23, 0.25); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --font-brand: 'DM Sans', 'Inter', sans-serif; --board-header-bg: #242320; --board-cell-bg: #1C1B19; --board-node-bg: #262422; --divider-dot: rgba(255, 255, 255, 0.3); --divider-dot-hover: rgba(255, 255, 255, 0.6); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 35%; } } @media (prefers-color-scheme: light) { .theme-developer { --bg: #f5f5f5; --bg2: #ececec; --bg3: #e2e2e2; --ink: #1a1a1a; --ink2: #5a5a5a; --ink3: #8a8a8a; --accent: #6a0dad; --accent-hover: #7b2cbf; --accent-lt: rgba(106, 13, 173, 0.1); --accent-gold: #b08a3a; --accent-gold-lt: rgba(176, 138, 58, 0.15); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #ffffff; --border: #d4d4d4; --border2: #b8b8b8; --status-success: #2e7d32; --status-warning: #e65100; --status-error: #c62828; --prov-typed-bg: rgba(34, 197, 94, 0.20); --prov-paste-bg: rgba(234, 88, 12, 0.20); --prov-ai-bg: rgba(220, 38, 38, 0.20); --shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15), 0 16px 48px rgba(0, 0, 0, 0.1); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --font-brand: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --board-header-bg: #e8e8f0; --board-cell-bg: #f0f0f5; --board-node-bg: #e6e6ee; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } .theme-writer { --bg: #f4ede0; --bg2: #ebe1cd; --bg3: #ddcfb2; --ink: #0f1a2a; --ink2: #1b5886; --ink3: #5293bb; --accent: #003a6b; --accent-hover: #1b5886; --accent-lt: rgba(0, 58, 107, 0.12); --accent-gold: #5293bb; --accent-gold-lt: rgba(82, 147, 187, 0.16); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #f4ede0; --border: rgba(0, 58, 107, 0.14); --border2: rgba(0, 58, 107, 0.22); --status-success: #2a7a52; --status-warning: #b05e10; --status-error: #a32d2d; --status-red: #c53030; --status-orange: #c05621; --status-amber: #a85d0a; --status-yellow: #92651a; --status-lime: #4d7c0f; --status-green: #1e7a4a; --status-teal: #0d7377; --status-blue: #1a5fa8; --status-indigo: #4338ca; --status-purple: #7a2aaa; --status-pink: #be185d; --status-slate: #475569; --prov-typed-bg: rgba(42, 122, 82, 0.20); --prov-paste-bg: rgba(176, 94, 16, 0.18); --prov-ai-bg: rgba(163, 45, 45, 0.20); --shadow: 0 1px 3px rgba(0, 58, 107, 0.10), 0 4px 12px rgba(0, 58, 107, 0.06); --shadow-lg: 0 8px 24px rgba(0, 58, 107, 0.14), 0 16px 48px rgba(0, 58, 107, 0.08); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --font-brand: 'Fraunces', 'Source Serif 4', 'Georgia', serif; --board-header-bg: #ddd1b8; --board-cell-bg: #ede5d2; --board-node-bg: #e2d9c2; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: center; --heading-border: 1px solid var(--border); --content-align: justify; --content-indent: 2em; --heading-margin: 2em 0 0.75em; --heading-bottom-margin: 0.4em; --content-paragraph-gap: 1em; --assembled-font: 'Source Serif 4', 'Source Serif Pro', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } .theme-pm { --bg: #FAFAF8; --bg2: #F2F0EC; --bg3: #E8E5DF; --ink: #1A1917; --ink2: #5C5A54; --ink3: #9E9B93; --accent: #2B5CE6; --accent-hover: #1A3C9E; --accent-lt: #E8EEFB; --accent-gold: #b08a3a; --accent-gold-lt: rgba(176, 138, 58, 0.15); --color-find-match: rgba(255, 200, 0, 0.40); --color-find-match-active: rgba(255, 175, 0, 0.70); --accent-text: #ffffff; --border: rgba(26, 25, 23, 0.1); --border2: rgba(26, 25, 23, 0.18); --status-success: #217A52; --status-warning: #B05E10; --status-error: #A32D2D; --prov-typed-bg: rgba(33, 122, 82, 0.20); --prov-paste-bg: rgba(176, 94, 16, 0.20); --prov-ai-bg: rgba(163, 45, 45, 0.20); --shadow: 0 1px 3px rgba(26, 25, 23, 0.08), 0 4px 12px rgba(26, 25, 23, 0.04); --shadow-lg: 0 8px 24px rgba(26, 25, 23, 0.12), 0 16px 48px rgba(26, 25, 23, 0.08); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --font-brand: 'DM Sans', 'Inter', sans-serif; --board-header-bg: #EBE8E2; --board-cell-bg: #F4F2EE; --board-node-bg: #E9E7E1; --divider-dot: rgba(0, 0, 0, 0.2); --divider-dot-hover: rgba(0, 0, 0, 0.4); --heading-align: left; --heading-border: none; --content-align: left; --content-indent: 0; --heading-margin: 1.2em 0 0.3em; --heading-bottom-margin: 0.2em; --content-paragraph-gap: 0.1em; --assembled-font: 'IBM Plex Sans', 'Inter', 'Segoe UI', sans-serif; --assembled-line-height: 1.5; --editor-line-height: 1.6; --mention-subtle-underline: var(--ink3); --mention-vivid-lightness: 40%; } } /* ============================================================ Body transition for theme switching ============================================================ */ body { transition: opacity 200ms ease-in-out; } @media (prefers-reduced-motion: reduce) { body { transition: none !important; } } /* ============================================================ Compatibility shim — old variable names forward to new names. Allows existing component CSS to keep working during migration. Remove after all components are updated to new token names. ============================================================ */ :root { --primary-accent: var(--accent); --secondary-accent: var(--accent-hover); --surface-bg: var(--bg); --pane-bg: var(--bg2); --border-color: var(--border); --text-primary: var(--ink); --text-dimmed: var(--ink2); --text-code: var(--ink3); --gutter-bg: var(--bg3); }