/* ========================================================================== CivNode — Theme Definitions 14 themes applied via [data-theme="name"] on ========================================================================== */ /* ========================================================================== 1. Midnight (Default) Deep black, warm white, gold accents — a midnight library ========================================================================== */ [data-theme="midnight"] { --bg-primary: #08080a; --bg-rgb: 8, 8, 10; --bg-secondary: #0f0f14; --bg-surface: #16161e; --bg-elevated: #1e1e28; --text-primary: #d4d0c8; --text-secondary: #8a8680; --text-muted: #5a5650; --accent: #c9a84c; --accent-hover: #dab85c; --accent-subtle: rgba(201, 168, 76, 0.08); --border: #1e1e28; --border-subtle: #14141c; --shadow: rgba(0, 0, 0, 0.4); --resonance: #d4a574; --patron-gold: #c9a84c; --error: #cc4444; --success: #4a8a5a; } /* ========================================================================== 2. Daylight White background, dark text, warm gray, blue accents — clean morning light ========================================================================== */ [data-theme="daylight"] { --bg-primary: #fafaf8; --bg-rgb: 250, 250, 248; --bg-secondary: #f0efeb; --bg-surface: #ffffff; --bg-elevated: #f5f4f0; --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; --accent: #2563a8; --accent-hover: #1d4f8a; --accent-subtle: rgba(37, 99, 168, 0.06); --border: #e7e5e0; --border-subtle: #f0efeb; --shadow: rgba(0, 0, 0, 0.06); --resonance: #b45309; --patron-gold: #a16207; --error: #b91c1c; --success: #15803d; } /* ========================================================================== 3. Soft Cream background, brown text, low contrast — aged paper, gentle reading ========================================================================== */ [data-theme="soft"] { --bg-primary: #f5f0e8; --bg-rgb: 245, 240, 232; --bg-secondary: #ede7db; --bg-surface: #faf7f2; --bg-elevated: #f0ead9; --text-primary: #3d3229; --text-secondary: #6b5d50; --text-muted: #a89888; --accent: #8b6914; --accent-hover: #a07a18; --accent-subtle: rgba(139, 105, 20, 0.06); --border: #ddd4c4; --border-subtle: #e8e0d0; --shadow: rgba(60, 40, 10, 0.06); --resonance: #9a6b2e; --patron-gold: #8b6914; --error: #a0392b; --success: #3d7a4a; } /* ========================================================================== 4. Retro Dark background, amber/green text, terminal aesthetic — override to mono ========================================================================== */ [data-theme="retro"] { --bg-primary: #1a1a10; --bg-rgb: 26, 26, 16; --bg-secondary: #22221a; --bg-surface: #2a2a1e; --bg-elevated: #333326; --text-primary: #d4c064; --text-secondary: #8a9a50; --text-muted: #5a6a30; --accent: #4ae04a; --accent-hover: #6aff6a; --accent-subtle: rgba(74, 224, 74, 0.06); --border: #333326; --border-subtle: #28281c; --shadow: rgba(0, 0, 0, 0.5); --resonance: #d4c064; --patron-gold: #d4c064; --error: #e05050; --success: #4ae04a; /* Override fonts to monospace for terminal vibe */ --font-serif: 'JetBrains Mono', 'Fira Code', monospace; --font-sans: 'JetBrains Mono', 'Fira Code', monospace; } /* Retro-specific overrides */ [data-theme="retro"] body { text-shadow: 0 0 8px rgba(74, 224, 74, 0.15); } [data-theme="retro"] h1, [data-theme="retro"] h2, [data-theme="retro"] h3, [data-theme="retro"] h4 { text-transform: uppercase; letter-spacing: 0.08em; } [data-theme="retro"] a { text-decoration: underline; } /* ========================================================================== 5. Japanese (Washi) Washi paper texture feel, deep black text, minimal red accents — serene ========================================================================== */ [data-theme="japanese"] { --bg-primary: #f8f5ef; --bg-rgb: 248, 245, 239; --bg-secondary: #f0ece4; --bg-surface: #fcfaf6; --bg-elevated: #ede8de; --text-primary: #1a1a1a; --text-secondary: #5c5c5c; --text-muted: #a0a0a0; --accent: #b8292f; --accent-hover: #9a1f24; --accent-subtle: rgba(184, 41, 47, 0.04); --border: #ddd8ce; --border-subtle: #e8e3d9; --shadow: rgba(0, 0, 0, 0.04); --resonance: #b8292f; --patron-gold: #8b6914; --error: #b8292f; --success: #2d6a4f; } /* Japanese-specific: extra letter-spacing for elegance */ [data-theme="japanese"] h1, [data-theme="japanese"] h2, [data-theme="japanese"] h3 { letter-spacing: 0.04em; font-weight: 400; } /* ========================================================================== 6. Abstract Charcoal background, vibrant red accent, high energy — bold and alive ========================================================================== */ [data-theme="abstract"] { --bg-primary: #1a1a1e; --bg-rgb: 26, 26, 30; --bg-secondary: #222228; --bg-surface: #2a2a32; --bg-elevated: #33333c; --text-primary: #e8e6e2; --text-secondary: #9a9890; --text-muted: #666460; --accent: #ff4444; --accent-hover: #ff6666; --accent-subtle: rgba(255, 68, 68, 0.08); --border: #33333c; --border-subtle: #28282e; --shadow: rgba(0, 0, 0, 0.4); --resonance: #ff6b35; --patron-gold: #ffb700; --error: #ff4444; --success: #22c55e; } /* ========================================================================== 7. Night True OLED black, pure white text, maximum contrast — no compromise ========================================================================== */ [data-theme="night"] { --bg-primary: #000000; --bg-rgb: 0, 0, 0; --bg-secondary: #0a0a0a; --bg-surface: #111111; --bg-elevated: #1a1a1a; --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #666666; --accent: #ffffff; --accent-hover: #cccccc; --accent-subtle: rgba(255, 255, 255, 0.05); --border: #1a1a1a; --border-subtle: #111111; --shadow: rgba(0, 0, 0, 0.8); --resonance: #ffffff; --patron-gold: #d4af37; --error: #ff4444; --success: #44ff44; } /* Night-specific: thin font for high contrast */ [data-theme="night"] .reading, [data-theme="night"] .reading p { font-weight: 400; letter-spacing: 0.01em; } /* ========================================================================== 8. Party Dark purple, neon pink and cyan accents — playful, electric ========================================================================== */ [data-theme="party"] { --bg-primary: #1a0a2e; --bg-rgb: 26, 10, 46; --bg-secondary: #220e3a; --bg-surface: #2a1248; --bg-elevated: #341858; --text-primary: #e8e0f0; --text-secondary: #a090b8; --text-muted: #6a5a80; --accent: #ff2d95; --accent-hover: #ff5caf; --accent-subtle: rgba(255, 45, 149, 0.08); --border: #341858; --border-subtle: #2a1248; --shadow: rgba(10, 0, 30, 0.6); --resonance: #2dd4bf; --patron-gold: #fbbf24; --error: #ff4444; --success: #2dd4bf; } /* Party-specific: neon glow on headings */ [data-theme="party"] h1 { text-shadow: 0 0 20px rgba(255, 45, 149, 0.3); } [data-theme="party"] a:hover { text-shadow: 0 0 10px rgba(255, 45, 149, 0.4); } /* ========================================================================== 9. Forest Deep green-black, sage green text, earthy accents — deep woods ========================================================================== */ [data-theme="forest"] { --bg-primary: #0a1208; --bg-rgb: 10, 18, 8; --bg-secondary: #0e180c; --bg-surface: #141f12; --bg-elevated: #1c2a18; --text-primary: #b8c8a8; --text-secondary: #7a8a6a; --text-muted: #4a5a3a; --accent: #8ab860; --accent-hover: #9aca72; --accent-subtle: rgba(138, 184, 96, 0.06); --border: #1c2a18; --border-subtle: #141f12; --shadow: rgba(0, 10, 0, 0.5); --resonance: #d4a574; --patron-gold: #c9a84c; --error: #cc6644; --success: #8ab860; } /* ========================================================================== 10. Ocean Navy blue, teal accents — deep water, calm and expansive ========================================================================== */ [data-theme="ocean"] { --bg-primary: #0a0e1a; --bg-rgb: 10, 14, 26; --bg-secondary: #0e1424; --bg-surface: #141c30; --bg-elevated: #1a243c; --text-primary: #c0cee0; --text-secondary: #7888a0; --text-muted: #4a5a70; --accent: #2dd4bf; --accent-hover: #5eead4; --accent-subtle: rgba(45, 212, 191, 0.06); --border: #1a243c; --border-subtle: #141c30; --shadow: rgba(0, 0, 20, 0.5); --resonance: #f0b060; --patron-gold: #c9a84c; --error: #f87171; --success: #2dd4bf; } /* ========================================================================== 11. Ink Pure white, pure black text, zero color — stark editorial ========================================================================== */ [data-theme="ink"] { --bg-primary: #ffffff; --bg-rgb: 255, 255, 255; --bg-secondary: #f8f8f8; --bg-surface: #ffffff; --bg-elevated: #f0f0f0; --text-primary: #000000; --text-secondary: #444444; --text-muted: #999999; --accent: #000000; --accent-hover: #333333; --accent-subtle: rgba(0, 0, 0, 0.03); --border: #e0e0e0; --border-subtle: #f0f0f0; --shadow: rgba(0, 0, 0, 0.06); --resonance: #000000; --patron-gold: #666666; --error: #cc0000; --success: #008800; } /* Ink-specific: crisp, editorial style */ [data-theme="ink"] h1, [data-theme="ink"] h2, [data-theme="ink"] h3 { font-weight: 700; letter-spacing: -0.03em; } [data-theme="ink"] a { text-decoration: underline; } [data-theme="ink"] blockquote { border-left-color: #000000; } /* ========================================================================== 12. Sunset Dark warm tones, golden-orange, deep purple accents — evening glow ========================================================================== */ [data-theme="sunset"] { --bg-primary: #1a0e08; --bg-rgb: 26, 14, 8; --bg-secondary: #221410; --bg-surface: #2a1a14; --bg-elevated: #34221a; --text-primary: #e0ccc0; --text-secondary: #a08878; --text-muted: #6a5448; --accent: #e8922c; --accent-hover: #f0a84c; --accent-subtle: rgba(232, 146, 44, 0.08); --border: #34221a; --border-subtle: #2a1a14; --shadow: rgba(10, 4, 0, 0.5); --resonance: #e8922c; --patron-gold: #c9a84c; --error: #e05555; --success: #5aaa5a; } /* Sunset-specific: warm glow on headings */ [data-theme="sunset"] h1 { color: #f0c890; } /* ========================================================================== 13. Arctic Cool blue-white, dark blue-gray text, ice-blue accents — crisp and clear ========================================================================== */ [data-theme="arctic"] { --bg-primary: #f0f4f8; --bg-rgb: 240, 244, 248; --bg-secondary: #e4eaf0; --bg-surface: #f8fafc; --bg-elevated: #dce4ec; --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --accent: #0ea5e9; --accent-hover: #0284c7; --accent-subtle: rgba(14, 165, 233, 0.06); --border: #cbd5e1; --border-subtle: #e2e8f0; --shadow: rgba(0, 20, 50, 0.06); --resonance: #0ea5e9; --patron-gold: #a16207; --error: #dc2626; --success: #16a34a; } /* ========================================================================== 14. Sepia Yellowed paper, dark brown text, antique feel — old library ========================================================================== */ [data-theme="sepia"] { --bg-primary: #f4ecd8; --bg-rgb: 244, 236, 216; --bg-secondary: #ebe3cc; --bg-surface: #f9f3e4; --bg-elevated: #e2d8be; --text-primary: #3a2e1e; --text-secondary: #6b5840; --text-muted: #9a8668; --accent: #7a5828; --accent-hover: #8a6432; --accent-subtle: rgba(122, 88, 40, 0.06); --border: #d4c8a8; --border-subtle: #e0d6ba; --shadow: rgba(40, 30, 10, 0.08); --resonance: #7a5828; --patron-gold: #7a5828; --error: #943030; --success: #3a7040; } /* Sepia-specific: slightly tighter letter-spacing for antique feel */ [data-theme="sepia"] .reading, [data-theme="sepia"] .reading p { letter-spacing: 0.01em; } /* ========================================================================== 15. Rose Soft blush pink, rosewood accents — warm and romantic ========================================================================== */ [data-theme="rose"] { --bg-primary: #fcf4f4; --bg-rgb: 252, 244, 244; --bg-secondary: #f5eaec; --bg-surface: #fff8f8; --bg-elevated: #ede0e3; --text-primary: #2d1f24; --text-secondary: #6b4f58; --text-muted: #a08890; --accent: #b83a58; --accent-hover: #9a2e48; --accent-subtle: rgba(184, 58, 88, 0.06); --border: #e8d8dc; --border-subtle: #f0e4e8; --shadow: rgba(40, 10, 20, 0.06); --resonance: #b83a58; --patron-gold: #a0604a; --error: #b83a3a; --success: #3a7a50; } /* ========================================================================== 16. Mint Fresh mint green, verdant accents — spring morning ========================================================================== */ [data-theme="mint"] { --bg-primary: #f0faf5; --bg-rgb: 240, 250, 245; --bg-secondary: #e2f2eb; --bg-surface: #f5fcf8; --bg-elevated: #d4eadf; --text-primary: #1a2e22; --text-secondary: #3d6050; --text-muted: #7aa090; --accent: #1a8a5a; --accent-hover: #147048; --accent-subtle: rgba(26, 138, 90, 0.06); --border: #c8e0d4; --border-subtle: #d8ecdf; --shadow: rgba(0, 20, 10, 0.06); --resonance: #1a8a5a; --patron-gold: #8b7a14; --error: #b83a3a; --success: #1a8a5a; } /* ========================================================================== 17. Peach Warm apricot tones, terracotta accents — Mediterranean afternoon ========================================================================== */ [data-theme="peach"] { --bg-primary: #fdf5ee; --bg-rgb: 253, 245, 238; --bg-secondary: #f5ebe0; --bg-surface: #fff9f4; --bg-elevated: #ecdfd0; --text-primary: #2c1e14; --text-secondary: #6b5040; --text-muted: #a08870; --accent: #c06030; --accent-hover: #a04820; --accent-subtle: rgba(192, 96, 48, 0.06); --border: #e0d0c0; --border-subtle: #ecddd0; --shadow: rgba(40, 20, 0, 0.06); --resonance: #c06030; --patron-gold: #a07020; --error: #b83a3a; --success: #4a7a3a; } /* ========================================================================== 18. Cloud Cool blue-gray, electric indigo accents — clear sky ========================================================================== */ [data-theme="cloud"] { --bg-primary: #f2f5f9; --bg-rgb: 242, 245, 249; --bg-secondary: #e6ebf2; --bg-surface: #f8fafc; --bg-elevated: #dde3ec; --text-primary: #1a2030; --text-secondary: #4a5568; --text-muted: #8898b0; --accent: #4a6cf7; --accent-hover: #3a5ce0; --accent-subtle: rgba(74, 108, 247, 0.06); --border: #cdd5e0; --border-subtle: #dde3ec; --shadow: rgba(10, 20, 40, 0.06); --resonance: #4a6cf7; --patron-gold: #a07020; --error: #dc2626; --success: #16a34a; } /* ========================================================================== Peaceful Palettes Collection Inspired by paperheartdesign.com/blog/color-palette-peaceful-palettes ========================================================================== */ /* ========================================================================== 19. Into the Woods Mossy greens and mysterious grays — deep forest floor ========================================================================== */ [data-theme="into-the-woods"] { --bg-primary: #1a1f0e; --bg-rgb: 26, 31, 14; --bg-secondary: #262b15; --bg-surface: #2e331d; --bg-elevated: #3a3f2c; --text-primary: #afb4ad; --text-secondary: #848871; --text-muted: #5e6350; --accent: #96a07a; --accent-hover: #a8b28c; --accent-subtle: rgba(150, 160, 122, 0.08); --border: #3a3f2c; --border-subtle: #2e331d; --shadow: rgba(0, 5, 0, 0.5); --resonance: #afb4ad; --patron-gold: #96a07a; --error: #cc6644; --success: #6a8a50; } /* ========================================================================== 20. Purple Sunset Deep indigo to lavender pink — twilight horizon ========================================================================== */ [data-theme="purple-sunset"] { --bg-primary: #0d0b33; --bg-rgb: 13, 11, 51; --bg-secondary: #15123e; --bg-surface: #1e1a4a; --bg-elevated: #2a2558; --text-primary: #e7c8e7; --text-secondary: #b888b8; --text-muted: #7a5088; --accent: #c266a7; --accent-hover: #d47ab8; --accent-subtle: rgba(194, 102, 167, 0.08); --border: #2a2558; --border-subtle: #1e1a4a; --shadow: rgba(5, 0, 20, 0.6); --resonance: #c266a7; --patron-gold: #c9a84c; --error: #e05555; --success: #52489f; } /* ========================================================================== 21. Wave Midnight navy to sky blue — deep ocean light ========================================================================== */ [data-theme="wave"] { --bg-primary: #00022b; --bg-rgb: 0, 2, 43; --bg-secondary: #010838; --bg-surface: #010e54; --bg-elevated: #061860; --text-primary: #daeaf7; --text-secondary: #4fa5d8; --text-muted: #2870a0; --accent: #4fa5d8; --accent-hover: #6ab8e5; --accent-subtle: rgba(79, 165, 216, 0.08); --border: #061860; --border-subtle: #010e54; --shadow: rgba(0, 0, 20, 0.6); --resonance: #4fa5d8; --patron-gold: #c9a84c; --error: #e06060; --success: #0855b1; } /* ========================================================================== 22. Wildflower Warm cream, golden yellow, dusty rose — sunlit meadow ========================================================================== */ [data-theme="wildflower"] { --bg-primary: #fdefc0; --bg-rgb: 253, 239, 192; --bg-secondary: #f8e8ae; --bg-surface: #fff5d0; --bg-elevated: #f0dfa0; --text-primary: #243127; --text-secondary: #6b5040; --text-muted: #a09070; --accent: #a46379; --accent-hover: #8a4f64; --accent-subtle: rgba(164, 99, 121, 0.06); --border: #e8d8a0; --border-subtle: #f0e0b0; --shadow: rgba(30, 20, 0, 0.08); --resonance: #feb640; --patron-gold: #feb640; --error: #b83a3a; --success: #3a7050; } /* ========================================================================== 23. Blueberry Inky blue-black, steel blue, ice — cold berry tones ========================================================================== */ [data-theme="blueberry"] { --bg-primary: #1c2127; --bg-rgb: 28, 33, 39; --bg-secondary: #1a2a3c; --bg-surface: #1e3248; --bg-elevated: #233a52; --text-primary: #e7f1fb; --text-secondary: #bed4e9; --text-muted: #6090b8; --accent: #3373b0; --accent-hover: #4888c4; --accent-subtle: rgba(51, 115, 176, 0.08); --border: #233a52; --border-subtle: #1e3248; --shadow: rgba(0, 5, 20, 0.5); --resonance: #bed4e9; --patron-gold: #c9a84c; --error: #e05555; --success: #3373b0; } /* ========================================================================== 24. Ceiling Blues Dark navy, steel teal, sage — library ceiling ========================================================================== */ [data-theme="ceiling-blues"] { --bg-primary: #051827; --bg-rgb: 5, 24, 39; --bg-secondary: #0c2030; --bg-surface: #152a3c; --bg-elevated: #1e3648; --text-primary: #bdd9cd; --text-secondary: #8eaebb; --text-muted: #5a7a90; --accent: #386994; --accent-hover: #4a80aa; --accent-subtle: rgba(56, 105, 148, 0.08); --border: #1e3648; --border-subtle: #152a3c; --shadow: rgba(0, 5, 15, 0.5); --resonance: #8eaebb; --patron-gold: #c9a84c; --error: #cc5555; --success: #5aaa7a; } /* ========================================================================== 25. Seashore Pale stone, driftwood, warm gray — coastal neutrals ========================================================================== */ [data-theme="seashore"] { --bg-primary: #ebebeb; --bg-rgb: 235, 235, 235; --bg-secondary: #e1e2e6; --bg-surface: #f2f2f2; --bg-elevated: #d8d9dc; --text-primary: #3a3a38; --text-secondary: #787775; --text-muted: #97978f; --accent: #9a8a7e; --accent-hover: #847468; --accent-subtle: rgba(154, 138, 126, 0.06); --border: #d0d0cc; --border-subtle: #dcdcda; --shadow: rgba(0, 0, 0, 0.06); --resonance: #9a8a7e; --patron-gold: #8a7a60; --error: #b83a3a; --success: #4a7a5a; } /* ========================================================================== 26. Peachy Fog Charcoal, mauve, warm peach — smoky dawn ========================================================================== */ [data-theme="peachy-fog"] { --bg-primary: #232220; --bg-rgb: 35, 34, 32; --bg-secondary: #2a2928; --bg-surface: #333230; --bg-elevated: #3e3d3a; --text-primary: #ffddba; --text-secondary: #d9ae8e; --text-muted: #9f8d8d; --accent: #d9ae8e; --accent-hover: #e8c0a0; --accent-subtle: rgba(217, 174, 142, 0.08); --border: #3e3d3a; --border-subtle: #333230; --shadow: rgba(0, 0, 0, 0.4); --resonance: #d9ae8e; --patron-gold: #d9ae8e; --error: #cc5544; --success: #7a9a6a; } /* ========================================================================== 27. Lotus Dark teal, jade, soft pink — temple garden pool ========================================================================== */ [data-theme="lotus"] { --bg-primary: #0c2520; --bg-rgb: 12, 37, 32; --bg-secondary: #11302a; --bg-surface: #1a3c34; --bg-elevated: #224a40; --text-primary: #dac4d0; --text-secondary: #b8a0b0; --text-muted: #7a6a70; --accent: #e0829d; --accent-hover: #ea9ab0; --accent-subtle: rgba(224, 130, 157, 0.08); --border: #224a40; --border-subtle: #1a3c34; --shadow: rgba(0, 10, 8, 0.5); --resonance: #e0829d; --patron-gold: #c9a84c; --error: #cc5544; --success: #036264; } /* ========================================================================== 28. Teal Lightning Abyssal dark, deep teal, seafoam — underwater storm ========================================================================== */ [data-theme="teal"] { --bg-primary: #041421; --bg-rgb: 4, 20, 33; --bg-secondary: #041c2a; --bg-surface: #042630; --bg-elevated: #0a3240; --text-primary: #d0d6d6; --text-secondary: #86b9b0; --text-muted: #4c7273; --accent: #86b9b0; --accent-hover: #9accc4; --accent-subtle: rgba(134, 185, 176, 0.08); --border: #0a3240; --border-subtle: #042630; --shadow: rgba(0, 5, 10, 0.6); --resonance: #86b9b0; --patron-gold: #c9a84c; --error: #cc5555; --success: #4c7273; } /* ========================================================================== 29. Forest Mist Midnight navy to silver blue — fog between the trees ========================================================================== */ [data-theme="forest-mist"] { --bg-primary: #001b2e; --bg-rgb: 0, 27, 46; --bg-secondary: #0a2538; --bg-surface: #133044; --bg-elevated: #1d3f58; --text-primary: #eef3f9; --text-secondary: #b3cde4; --text-muted: #537692; --accent: #537692; --accent-hover: #6a8aaa; --accent-subtle: rgba(83, 118, 146, 0.08); --border: #1d3f58; --border-subtle: #133044; --shadow: rgba(0, 5, 15, 0.5); --resonance: #b3cde4; --patron-gold: #c9a84c; --error: #e06060; --success: #537692; } /* ========================================================================== 30. Crocus Dark plum, periwinkle, lavender — spring twilight ========================================================================== */ [data-theme="crocus"] { --bg-primary: #24222e; --bg-rgb: 36, 34, 46; --bg-secondary: #2f2d3b; --bg-surface: #383648; --bg-elevated: #434055; --text-primary: #cfcad1; --text-secondary: #9389bd; --text-muted: #6a6480; --accent: #6768ab; --accent-hover: #7a7bbe; --accent-subtle: rgba(103, 104, 171, 0.08); --border: #434055; --border-subtle: #383648; --shadow: rgba(10, 5, 20, 0.5); --resonance: #9389bd; --patron-gold: #c9a84c; --error: #cc5555; --success: #6a8a6a; } /* ========================================================================== 31. Peonies Blush, coral, pale green — garden bouquet ========================================================================== */ [data-theme="peonies"] { --bg-primary: #fceeed; --bg-rgb: 252, 238, 237; --bg-secondary: #f5e4e3; --bg-surface: #fff4f3; --bg-elevated: #ecdada; --text-primary: #3a322a; --text-secondary: #6b5e4e; --text-muted: #948d71; --accent: #f7a49e; --accent-hover: #e8908a; --accent-subtle: rgba(247, 164, 158, 0.06); --border: #e8d4d2; --border-subtle: #f0dedd; --shadow: rgba(30, 10, 10, 0.06); --resonance: #f7a49e; --patron-gold: #948d71; --error: #c43a3a; --success: #5a8a5a; } /* ========================================================================== 32. Wilder Deep teal, emerald, sage — overgrown garden ========================================================================== */ [data-theme="wilder"] { --bg-primary: #121820; --bg-rgb: 18, 24, 32; --bg-secondary: #161d23; --bg-surface: #1c2830; --bg-elevated: #24343c; --text-primary: #d2e1cc; --text-secondary: #5e8d83; --text-muted: #3a6058; --accent: #5e8d83; --accent-hover: #72a498; --accent-subtle: rgba(94, 141, 131, 0.08); --border: #24343c; --border-subtle: #1c2830; --shadow: rgba(0, 5, 5, 0.5); --resonance: #d2e1cc; --patron-gold: #c9a84c; --error: #cc6644; --success: #5e8d83; } /* ========================================================================== 33. Champagne Warm ivory, gold, burnished bronze — evening reception ========================================================================== */ [data-theme="champagne"] { --bg-primary: #e8e2d6; --bg-rgb: 232, 226, 214; --bg-secondary: #d6cfbf; --bg-surface: #ede8de; --bg-elevated: #cdc5b2; --text-primary: #2e2d28; --text-secondary: #4e4d49; --text-muted: #8a7e6a; --accent: #b7946a; --accent-hover: #a07e54; --accent-subtle: rgba(183, 148, 106, 0.06); --border: #bab2a0; --border-subtle: #c8c0b0; --shadow: rgba(30, 20, 5, 0.08); --resonance: #b7946a; --patron-gold: #b7946a; --error: #b83a3a; --success: #4a7a4a; } /* ========================================================================== 34. Dusk Dark olive, dusty purple, muted rose — twilight wildflowers ========================================================================== */ [data-theme="dusk"] { --bg-primary: #161f10; --bg-rgb: 22, 31, 16; --bg-secondary: #1c2e14; --bg-surface: #243420; --bg-elevated: #2e3e2a; --text-primary: #ccb0be; --text-secondary: #707978; --text-muted: #505a52; --accent: #72668a; --accent-hover: #887ca0; --accent-subtle: rgba(114, 102, 138, 0.08); --border: #2e3e2a; --border-subtle: #243420; --shadow: rgba(0, 5, 0, 0.5); --resonance: #ccb0be; --patron-gold: #c9a84c; --error: #cc5555; --success: #5a8a5a; } /* ========================================================================== Mid-tone Themes True mid-range backgrounds — neither light nor dark ========================================================================== */ /* ========================================================================== 35. Slate Cool gray, blue-steel accents — industrial elegance ========================================================================== */ [data-theme="slate"] { --bg-primary: #6b7280; --bg-rgb: 107, 114, 128; --bg-secondary: #5f6672; --bg-surface: #747b88; --bg-elevated: #545b66; --text-primary: #f0f1f3; --text-secondary: #c8ccd2; --text-muted: #9aa0aa; --accent: #60a5fa; --accent-hover: #7bb8ff; --accent-subtle: rgba(96, 165, 250, 0.10); --border: #545b66; --border-subtle: #5f6672; --shadow: rgba(0, 0, 0, 0.20); --resonance: #93c5fd; --patron-gold: #fbbf24; --error: #f87171; --success: #4ade80; } /* ========================================================================== 36. Driftwood Warm taupe, copper accents — seaside cabin ========================================================================== */ [data-theme="driftwood"] { --bg-primary: #8a7e6f; --bg-rgb: 138, 126, 111; --bg-secondary: #7e7264; --bg-surface: #948879; --bg-elevated: #74685a; --text-primary: #f5f0e8; --text-secondary: #d8cfc2; --text-muted: #b0a594; --accent: #d4885a; --accent-hover: #e09a6e; --accent-subtle: rgba(212, 136, 90, 0.10); --border: #74685a; --border-subtle: #7e7264; --shadow: rgba(30, 20, 10, 0.20); --resonance: #e8a876; --patron-gold: #d4a04c; --error: #ef7070; --success: #6ab870; } /* ========================================================================== 37. Overcast Blue-gray, muted sky-blue accents — clouded afternoon ========================================================================== */ [data-theme="overcast"] { --bg-primary: #7a8590; --bg-rgb: 122, 133, 144; --bg-secondary: #6e7882; --bg-surface: #848f9a; --bg-elevated: #646e78; --text-primary: #eef1f5; --text-secondary: #c8d0d8; --text-muted: #9aa4b0; --accent: #7cb8d4; --accent-hover: #92cbe4; --accent-subtle: rgba(124, 184, 212, 0.10); --border: #646e78; --border-subtle: #6e7882; --shadow: rgba(0, 10, 20, 0.20); --resonance: #a8d4e8; --patron-gold: #e0b850; --error: #f07070; --success: #5ec08a; } /* ========================================================================== 38. Graphite Neutral gray, warm white text, amber accents — pencil on stone ========================================================================== */ [data-theme="graphite"] { --bg-primary: #5a5a62; --bg-rgb: 90, 90, 98; --bg-secondary: #505058; --bg-surface: #64646c; --bg-elevated: #48484e; --text-primary: #f2efe8; --text-secondary: #ccc8be; --text-muted: #9a968e; --accent: #e8a840; --accent-hover: #f0b850; --accent-subtle: rgba(232, 168, 64, 0.10); --border: #48484e; --border-subtle: #505058; --shadow: rgba(0, 0, 0, 0.25); --resonance: #f0c060; --patron-gold: #e8a840; --error: #ef6b6b; --success: #6aba6a; } /* ========================================================================== 39. VT220 — Green phosphor terminal ========================================================================== */ [data-theme="vt220"] { --bg-primary: #0a0a0a; --bg-rgb: 10, 10, 10; --bg-secondary: #111111; --bg-surface: #141414; --bg-elevated: #060606; --text-primary: #20c20e; --text-secondary: #1a9e0b; --text-muted: #147a08; --accent: #20c20e; --accent-hover: #28e818; --accent-subtle: rgba(32, 194, 14, 0.10); --border: #1a3a18; --border-subtle: #142e12; --shadow: rgba(0, 0, 0, 0.50); --resonance: #20c20e; --patron-gold: #20c20e; --error: #ff3333; --success: #20c20e; --font-serif: 'Courier New', 'Courier', monospace; --font-sans: 'Courier New', 'Courier', monospace; } [data-theme="vt220"] * { text-shadow: 0 0 4px rgba(32, 194, 14, 0.4); } /* ========================================================================== 40. Amber — Amber phosphor CRT ========================================================================== */ [data-theme="amber"] { --bg-primary: #0a0800; --bg-rgb: 10, 8, 0; --bg-secondary: #121000; --bg-surface: #161400; --bg-elevated: #060400; --text-primary: #ffb000; --text-secondary: #cc8c00; --text-muted: #996800; --accent: #ffb000; --accent-hover: #ffc030; --accent-subtle: rgba(255, 176, 0, 0.10); --border: #3a2e00; --border-subtle: #2e2400; --shadow: rgba(0, 0, 0, 0.50); --resonance: #ffb000; --patron-gold: #ffb000; --error: #ff4444; --success: #ffb000; --font-serif: 'Courier New', 'Courier', monospace; --font-sans: 'Courier New', 'Courier', monospace; } [data-theme="amber"] * { text-shadow: 0 0 4px rgba(255, 176, 0, 0.4); } /* ========================================================================== 41. IBM PC — CGA text mode ========================================================================== */ [data-theme="ibm-pc"] { --bg-primary: #000000; --bg-rgb: 0, 0, 0; --bg-secondary: #0a0a0a; --bg-surface: #111111; --bg-elevated: #050505; --text-primary: #aaaaaa; --text-secondary: #888888; --text-muted: #555555; --accent: #55ffff; --accent-hover: #77ffff; --accent-subtle: rgba(85, 255, 255, 0.10); --border: #333333; --border-subtle: #222222; --shadow: rgba(0, 0, 0, 0.50); --resonance: #55ffff; --patron-gold: #ffff55; --error: #ff5555; --success: #55ff55; --font-serif: 'Courier New', 'Courier', monospace; --font-sans: 'Courier New', 'Courier', monospace; } /* ========================================================================== 42. C64 — Commodore 64 ========================================================================== */ [data-theme="c64"] { --bg-primary: #3f3f74; --bg-rgb: 63, 63, 116; --bg-secondary: #35356a; --bg-surface: #4a4a80; --bg-elevated: #2e2e5e; --text-primary: #7b71d5; --text-secondary: #6a60c0; --text-muted: #5850a8; --accent: #7b71d5; --accent-hover: #8e85e0; --accent-subtle: rgba(123, 113, 213, 0.15); --border: #5050a0; --border-subtle: #454590; --shadow: rgba(20, 20, 50, 0.40); --resonance: #7b71d5; --patron-gold: #7b71d5; --error: #ff5555; --success: #55ff55; --font-serif: 'Courier New', 'Courier', monospace; --font-sans: 'Courier New', 'Courier', monospace; } /* ========================================================================== 43. Apple II — Bright green on black ========================================================================== */ [data-theme="apple-ii"] { --bg-primary: #000000; --bg-rgb: 0, 0, 0; --bg-secondary: #0a0a0a; --bg-surface: #111111; --bg-elevated: #050505; --text-primary: #33ff33; --text-secondary: #28cc28; --text-muted: #1e991e; --accent: #33ff33; --accent-hover: #55ff55; --accent-subtle: rgba(51, 255, 51, 0.10); --border: #1a3a1a; --border-subtle: #142e14; --shadow: rgba(0, 0, 0, 0.50); --resonance: #33ff33; --patron-gold: #33ff33; --error: #ff3333; --success: #33ff33; --font-serif: 'Courier New', 'Courier', monospace; --font-sans: 'Courier New', 'Courier', monospace; } [data-theme="apple-ii"] * { text-shadow: 0 0 4px rgba(51, 255, 51, 0.4); } /* ========================================================================== 44. Solarized Dark ========================================================================== */ [data-theme="solarized"] { --bg-primary: #002b36; --bg-rgb: 0, 43, 54; --bg-secondary: #073642; --bg-surface: #073642; --bg-elevated: #002028; --text-primary: #839496; --text-secondary: #657b83; --text-muted: #586e75; --accent: #268bd2; --accent-hover: #2e9ee8; --accent-subtle: rgba(38, 139, 210, 0.12); --border: #073642; --border-subtle: #0a3f4e; --shadow: rgba(0, 20, 30, 0.30); --resonance: #2aa198; --patron-gold: #b58900; --error: #dc322f; --success: #859900; } /* ========================================================================== 45. Dracula ========================================================================== */ [data-theme="dracula"] { --bg-primary: #282a36; --bg-rgb: 40, 42, 54; --bg-secondary: #21222c; --bg-surface: #303244; --bg-elevated: #1e1f29; --text-primary: #f8f8f2; --text-secondary: #c0c0ba; --text-muted: #6272a4; --accent: #bd93f9; --accent-hover: #caa4ff; --accent-subtle: rgba(189, 147, 249, 0.12); --border: #44475a; --border-subtle: #383a4c; --shadow: rgba(0, 0, 0, 0.30); --resonance: #8be9fd; --patron-gold: #f1fa8c; --error: #ff5555; --success: #50fa7b; } /* ========================================================================== 46. Monokai ========================================================================== */ [data-theme="monokai"] { --bg-primary: #272822; --bg-rgb: 39, 40, 34; --bg-secondary: #1e1f1a; --bg-surface: #2e2f28; --bg-elevated: #1a1b16; --text-primary: #f8f8f2; --text-secondary: #c0c0ba; --text-muted: #75715e; --accent: #a6e22e; --accent-hover: #b8f040; --accent-subtle: rgba(166, 226, 46, 0.12); --border: #3e3d32; --border-subtle: #333328; --shadow: rgba(0, 0, 0, 0.30); --resonance: #66d9ef; --patron-gold: #e6db74; --error: #f92672; --success: #a6e22e; } /* ========================================================================== 47. Gruvbox ========================================================================== */ [data-theme="gruvbox"] { --bg-primary: #282828; --bg-rgb: 40, 40, 40; --bg-secondary: #1d2021; --bg-surface: #3c3836; --bg-elevated: #1d2021; --text-primary: #ebdbb2; --text-secondary: #bdae93; --text-muted: #928374; --accent: #fabd2f; --accent-hover: #fcd44f; --accent-subtle: rgba(250, 189, 47, 0.12); --border: #3c3836; --border-subtle: #32302f; --shadow: rgba(0, 0, 0, 0.30); --resonance: #83a598; --patron-gold: #fabd2f; --error: #fb4934; --success: #b8bb26; } /* ========================================================================== 48. Nord ========================================================================== */ [data-theme="nord"] { --bg-primary: #2e3440; --bg-rgb: 46, 52, 64; --bg-secondary: #272c36; --bg-surface: #3b4252; --bg-elevated: #242933; --text-primary: #d8dee9; --text-secondary: #b0b8c8; --text-muted: #7b88a0; --accent: #88c0d0; --accent-hover: #9cd0de; --accent-subtle: rgba(136, 192, 208, 0.12); --border: #3b4252; --border-subtle: #343c4c; --shadow: rgba(0, 0, 0, 0.25); --resonance: #8fbcbb; --patron-gold: #ebcb8b; --error: #bf616a; --success: #a3be8c; } /* ========================================================================== 49. Catppuccin Mocha ========================================================================== */ [data-theme="catppuccin"] { --bg-primary: #1e1e2e; --bg-rgb: 30, 30, 46; --bg-secondary: #181825; --bg-surface: #28283c; --bg-elevated: #14141f; --text-primary: #cdd6f4; --text-secondary: #a6adc8; --text-muted: #6c7086; --accent: #cba6f7; --accent-hover: #d8b8ff; --accent-subtle: rgba(203, 166, 247, 0.12); --border: #313244; --border-subtle: #2a2a3c; --shadow: rgba(0, 0, 0, 0.30); --resonance: #94e2d5; --patron-gold: #f9e2af; --error: #f38ba8; --success: #a6e3a1; } /* ========================================================================== 50. Tokyo Night ========================================================================== */ [data-theme="tokyo-night"] { --bg-primary: #1a1b26; --bg-rgb: 26, 27, 38; --bg-secondary: #16161e; --bg-surface: #24283b; --bg-elevated: #12121a; --text-primary: #c0caf5; --text-secondary: #9aa5ce; --text-muted: #565f89; --accent: #7aa2f7; --accent-hover: #8cb4ff; --accent-subtle: rgba(122, 162, 247, 0.12); --border: #292e42; --border-subtle: #232538; --shadow: rgba(0, 0, 0, 0.30); --resonance: #7dcfff; --patron-gold: #e0af68; --error: #f7768e; --success: #9ece6a; } /* ========================================================================== Theme Transition Smooth transition when switching themes ========================================================================== */ [data-theme] { --coach-underline: #e8922e; --coach-pulse-bg: rgba(232, 146, 46, 0.12); transition: background-color 400ms ease, color 400ms ease; } /* Light & mid-tone themes need a darker coach underline for contrast */ [data-theme="daylight"], [data-theme="soft"], [data-theme="japanese"], [data-theme="ink"], [data-theme="arctic"], [data-theme="sepia"], [data-theme="rose"], [data-theme="mint"], [data-theme="peach"], [data-theme="cloud"], [data-theme="seashore"], [data-theme="wildflower"], [data-theme="peonies"], [data-theme="champagne"] { --coach-underline: #b86e0a; --coach-pulse-bg: rgba(184, 110, 10, 0.10); } [data-theme] .card, [data-theme] .btn, [data-theme] input, [data-theme] textarea, [data-theme] .tab, [data-theme] .toast, [data-theme] .modal { transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease; }