/* ============================================================ Architext — Theme Definitions Six themes: 3 app modes × 2 color schemes Applied as a single class on . ============================================================ */ /* ============================================================ 3.1 Developer Dark (current default — matches original :root) ============================================================ */ .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); --border: #2d2d2d; --border2: #404040; --status-success: #43a047; --status-warning: #f9a825; --status-error: #e53935; --shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } /* ============================================================ 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); --border: #d4d4d4; --border2: #b8b8b8; --status-success: #2e7d32; --status-warning: #e65100; --status-error: #c62828; --shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } /* ============================================================ 3.3 Writer Dark ============================================================ */ .theme-writer-dark { --bg: #1c1c1a; --bg2: #242320; --bg3: #2e2c29; --ink: #ddd8cc; --ink2: #8f8a80; --ink3: #5a5650; --accent: #4a8c7a; --accent-hover: #5aa090; --accent-lt: rgba(74, 140, 122, 0.15); --border: rgba(221, 216, 204, 0.1); --border2: rgba(221, 216, 204, 0.18); --status-success: #4fc08a; --status-warning: #d4a843; --status-error: #c0605a; --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Georgia', 'Palatino', 'Book Antiqua', serif; --board-header-bg: #272523; --board-cell-bg: #2a2826; --board-node-bg: #33302d; --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: 'Garamond', 'EB Garamond', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; } /* ============================================================ 3.4 Writer Light ============================================================ */ .theme-writer-light { --bg: #faf8f3; --bg2: #f2ede4; --bg3: #e8e0d4; --ink: #2a2520; --ink2: #6b6258; --ink3: #9e9890; --accent: #2e6b56; --accent-hover: #3a8068; --accent-lt: rgba(46, 107, 86, 0.1); --border: rgba(42, 37, 32, 0.12); --border2: rgba(42, 37, 32, 0.2); --status-success: #217a52; --status-warning: #b05e10; --status-error: #a32d2d; --shadow: 0 1px 3px rgba(42, 37, 32, 0.1), 0 4px 12px rgba(42, 37, 32, 0.05); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Georgia', 'Palatino', 'Book Antiqua', serif; --board-header-bg: #e8e4da; --board-cell-bg: #f0ece4; --board-node-bg: #e6e2d9; --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: 'Garamond', 'EB Garamond', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; } /* ============================================================ 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; --border: rgba(240, 237, 230, 0.1); --border2: rgba(240, 237, 230, 0.18); --status-success: #4FC08A; --status-warning: #E8952A; --status-error: #F09595; --shadow: 0 1px 3px rgba(26, 25, 23, 0.3), 0 4px 12px rgba(26, 25, 23, 0.15); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } /* ============================================================ 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; --border: rgba(26, 25, 23, 0.1); --border2: rgba(26, 25, 23, 0.18); --status-success: #217A52; --status-warning: #B05E10; --status-error: #A32D2D; --shadow: 0 1px 3px rgba(26, 25, 23, 0.08), 0 4px 12px rgba(26, 25, 23, 0.04); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } /* ============================================================ 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); --border: #2d2d2d; --border2: #404040; --status-success: #43a047; --status-warning: #f9a825; --status-error: #e53935; --shadow: 0 2px 8px rgba(0, 0, 0, 0.5); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } .theme-writer { --bg: #1c1c1a; --bg2: #242320; --bg3: #2e2c29; --ink: #ddd8cc; --ink2: #8f8a80; --ink3: #5a5650; --accent: #4a8c7a; --accent-hover: #5aa090; --accent-lt: rgba(74, 140, 122, 0.15); --border: rgba(221, 216, 204, 0.1); --border2: rgba(221, 216, 204, 0.18); --status-success: #4fc08a; --status-warning: #d4a843; --status-error: #c0605a; --shadow: 0 2px 8px rgba(0, 0, 0, 0.45); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Georgia', 'Palatino', 'Book Antiqua', serif; --board-header-bg: #272523; --board-cell-bg: #2a2826; --board-node-bg: #33302d; --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: 'Garamond', 'EB Garamond', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; } .theme-pm { --bg: #1C1B19; --bg2: #242320; --bg3: #2E2C29; --ink: #F0EDE6; --ink2: #A8A49C; --ink3: #6A665E; --accent: #6B95F5; --accent-hover: #85aeff; --accent-lt: #1A2240; --border: rgba(240, 237, 230, 0.1); --border2: rgba(240, 237, 230, 0.18); --status-success: #4FC08A; --status-warning: #E8952A; --status-error: #F09595; --shadow: 0 1px 3px rgba(26, 25, 23, 0.3), 0 4px 12px rgba(26, 25, 23, 0.15); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } } @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); --border: #d4d4d4; --border2: #b8b8b8; --status-success: #2e7d32; --status-warning: #e65100; --status-error: #c62828; --shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --r: 4px; --r-lg: 8px; --font-ui: 'Inter', 'Segoe UI', Roboto, Helvetica, sans-serif; --font-editor: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } .theme-writer { --bg: #faf8f3; --bg2: #f2ede4; --bg3: #e8e0d4; --ink: #2a2520; --ink2: #6b6258; --ink3: #9e9890; --accent: #2e6b56; --accent-hover: #3a8068; --accent-lt: rgba(46, 107, 86, 0.1); --border: rgba(42, 37, 32, 0.12); --border2: rgba(42, 37, 32, 0.2); --status-success: #217a52; --status-warning: #b05e10; --status-error: #a32d2d; --shadow: 0 1px 3px rgba(42, 37, 32, 0.1), 0 4px 12px rgba(42, 37, 32, 0.05); --r: 6px; --r-lg: 12px; --font-ui: 'Inter', 'Segoe UI', sans-serif; --font-editor: 'Georgia', 'Palatino', 'Book Antiqua', serif; --board-header-bg: #e8e4da; --board-cell-bg: #f0ece4; --board-node-bg: #e6e2d9; --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: 'Garamond', 'EB Garamond', 'Georgia', serif; --assembled-line-height: 1.8; --editor-line-height: 1.9; } .theme-pm { --bg: #FAFAF8; --bg2: #F2F0EC; --bg3: #E8E5DF; --ink: #1A1917; --ink2: #5C5A54; --ink3: #9E9B93; --accent: #2B5CE6; --accent-hover: #1A3C9E; --accent-lt: #E8EEFB; --border: rgba(26, 25, 23, 0.1); --border2: rgba(26, 25, 23, 0.18); --status-success: #217A52; --status-warning: #B05E10; --status-error: #A32D2D; --shadow: 0 1px 3px rgba(26, 25, 23, 0.08), 0 4px 12px rgba(26, 25, 23, 0.04); --r: 10px; --r-lg: 14px; --font-ui: 'DM Sans', 'Inter', sans-serif; --font-editor: 'DM Mono', 'Fira Code', monospace; --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: var(--font-ui); --assembled-line-height: 1.5; --editor-line-height: 1.6; } } /* ============================================================ 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); }