/* ── Theme tokens — all themes share this file ────────── */ /* Active theme picked at runtime via + persisted to localStorage. */ /* ── GREEN THEME (Primary / Default) ──────────────────── */ :root[data-theme="green"][data-mode="light"], :root[data-theme="green"]:not([data-mode="dark"]) { --color-bg: #fafaf7; --color-bg-secondary: #f2f6ee; --color-bg-tertiary: #e4ebdb; --color-sidebar: #f5f4ef; --color-border: #e8e3d8; --color-border-accent: #c8d9b7; --color-primary: #0C7F72; --color-primary-rgb: 12 127 114; --color-primary-hover: #0A6C61; --color-primary-subtle: #E6F4F2; --color-primary-fg: #ffffff; --color-text-primary: #1a1917; --color-text-secondary: #5b5752; --color-text-muted: #78716b; --color-fg: #1a1917; --color-fg-secondary: #5b5752; --color-fg-tertiary: #8a857e; --color-overlay: rgba(20,16,10,0.42); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 4px 20px -6px rgb(var(--color-primary-rgb) / 0.10), 0 1px 2px rgb(0 0 0 / 0.04); --noise: url("data:image/svg+xml;utf8,"); } :root[data-theme="green"][data-mode="dark"] { --color-bg: #0f0d0b; --color-bg-secondary: #17150f; --color-bg-tertiary: #1f1c15; --color-sidebar: #110f0a; --color-border: #2a2720; --color-border-accent: #355a3d; --color-primary: #6DB2AA; --color-primary-rgb: 109 178 170; --color-primary-hover: #86BFB9; --color-primary-subtle: #0D2422; --color-primary-fg: #0f0d0b; --color-text-primary: #f4efe4; --color-text-secondary: #C1C5CD; --color-text-muted: #9c968e; --color-fg: #F5F0E8; --color-fg-secondary: #C1C5CD; --color-fg-tertiary: #7E8491; --color-overlay: rgba(0,0,0,0.62); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 6px 24px -8px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.02) inset; --noise: url("data:image/svg+xml;utf8,"); } /* ── MONO THEME (ChatGPT-like — warmed) ───────────────── */ :root[data-theme="mono"][data-mode="light"], :root[data-theme="mono"]:not([data-mode="dark"]) { --color-bg: #fbfaf7; --color-bg-secondary: #f4f2ec; --color-bg-tertiary: #ebe8e0; --color-sidebar: #f5f3ed; --color-border: #e4e0d6; --color-border-accent: #cdc7b9; --color-primary: #1a1917; --color-primary-rgb: 26 25 23; --color-primary-hover: #2d2b26; --color-primary-subtle: #ede9dd; --color-primary-fg: #ffffff; --color-text-primary: #1a1917; --color-text-secondary: #5b5752; --color-text-muted: #78716b; --color-fg: #1a1917; --color-fg-secondary: #5b5752; --color-fg-tertiary: #8a857e; --color-overlay: rgba(20,16,10,0.42); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 4px 20px -6px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04); --noise: url("data:image/svg+xml;utf8,"); } :root[data-theme="mono"][data-mode="dark"] { --color-bg: #1f1d1a; --color-bg-secondary: #2a2824; --color-bg-tertiary: #35322c; --color-sidebar: #171512; --color-border: #3a3630; --color-border-accent: #4d4840; --color-primary: #f4efe4; --color-primary-rgb: 244 239 228; --color-primary-hover: #e8e2d4; --color-primary-subtle: #332f28; --color-primary-fg: #1a1917; --color-text-primary: #f4efe4; --color-text-secondary: #C1C5CD; --color-text-muted: #9c968e; --color-fg: #f4efe4; --color-fg-secondary: #C1C5CD; --color-fg-tertiary: #7E8491; --color-overlay: rgba(0,0,0,0.62); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 6px 24px -8px rgb(0 0 0 / 0.55); --noise: url("data:image/svg+xml;utf8,"); } /* ── PURPLE THEME (warmed violet + cream) ─────────────── */ :root[data-theme="purple"][data-mode="light"], :root[data-theme="purple"]:not([data-mode="dark"]) { --color-bg: #fcfaf6; --color-bg-secondary: #f5efff; --color-bg-tertiary: #ebe0ff; --color-sidebar: #f7f3ec; --color-border: #e8e0d5; --color-border-accent: #c9b5f0; --color-primary: #6b3bd4; --color-primary-rgb: 107 59 212; --color-primary-hover: #5728b8; --color-primary-subtle: #f3ecff; --color-primary-fg: #ffffff; --color-text-primary: #1a1626; --color-text-secondary: #5b5752; --color-text-muted: #7a7085; --color-fg: #1a1626; --color-fg-secondary: #5b5458; --color-fg-tertiary: #8a8090; --color-overlay: rgba(20,16,30,0.42); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 4px 20px -6px rgb(var(--color-primary-rgb) / 0.14), 0 1px 2px rgb(0 0 0 / 0.04); --noise: url("data:image/svg+xml;utf8,"); } :root[data-theme="purple"][data-mode="dark"] { --color-bg: #120b1e; --color-bg-secondary: #1d1230; --color-bg-tertiary: #2a1b42; --color-sidebar: #0c0714; --color-border: #32234f; --color-border-accent: #7a4ed6; --color-primary: #b89cf7; --color-primary-rgb: 184 156 247; --color-primary-hover: #9e7ff0; --color-primary-subtle: #221341; --color-primary-fg: #1a1626; --color-text-primary: #f4eff8; --color-text-secondary: #C1C5CD; --color-text-muted: #9e98ad; --color-fg: #F5F2FA; --color-fg-secondary: #C1C5CD; --color-fg-tertiary: #7E8491; --color-overlay: rgba(0,0,0,0.7); --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-soft: 0 6px 28px -8px rgb(var(--color-primary-rgb) / 0.32); --noise: url("data:image/svg+xml;utf8,"); } /* Mode-only semantic tokens (theme-independent) */ :root[data-mode="light"], :root:not([data-mode="dark"]) { --color-error: #dc2626; --color-error-subtle: #fef2f2; --color-error-border: #fee2e2; } :root[data-mode="dark"] { --color-error: #f87171; --color-error-subtle: rgba(127, 29, 29, 0.25); --color-error-border: rgba(127, 29, 29, 0.4); } /* ── Z-index token scale ─────────────────────────────── */ :root { --z-sidebar-backdrop: 30; --z-sidebar: 40; --z-popover: 50; --z-dropdown: 50; --z-dev-tools: 50; --z-modal-backdrop: 60; --z-modal: 61; --z-toast: 70; --z-skip-link: 100; } /* ── Motif cursor (auth brand panel) ─────────────────── */ @keyframes motif-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .motif-cursor { display: inline-block; width: 6px; height: 11px; border-radius: 1px; vertical-align: middle; margin-left: 2px; animation: motif-blink 1s step-end infinite; }