/* =============================== Forest — bright, readable greens =============================== */ html[data-theme="forest"] { /* Core palette */ --forest-ink: #0f2a1f; /* deep evergreen text */ --forest-ink-muted: #3b5a4b; /* muted labels */ --forest-face: #ffffff; /* cards/panels */ --forest-elev: #f7fbf8; /* elevated/secondary face */ --forest-border: #cde7d8; /* soft mint border */ --forest-shadow: rgba(9, 30, 22, .06); /* Accents */ --forest-accent: #16a34a; /* green-600 */ --forest-accent-600: #15803d; /* green-700 (hover) */ --forest-accent-200: #bbf7d0; /* light chips / outlines */ /* Status */ --forest-success: #16a34a; --forest-warning: #d97706; --forest-danger: #e11d48; --forest-info: #2563eb; /* Topbar */ --forest-bar: #0b4f38; /* deep forest */ --forest-bar-ink: #ecfdf5; /* Controls */ --btn-radius: 12px; --panel-radius: 14px; } /* Page background & base ink */ html[data-theme="forest"] body { min-height: 100vh; color: var(--forest-ink); background: radial-gradient(1000px 360px at 80% -10%, rgba(22,163,74,.12), transparent 55%), linear-gradient(180deg, #eef8f1 0%, #e9f6ee 40%, #e7f5ed 100%); } /* Subtle selection */ html[data-theme="forest"] ::selection { background: rgba(22,163,74,.28); } /* ---------- Top bar ---------- */ html[data-theme="forest"] .topbar-wrap{ background: linear-gradient(180deg, var(--forest-bar) 0%, #0a3f2d 100%); border-bottom: 1px solid rgba(12, 58, 43, .35); box-shadow: 0 6px 20px rgba(3, 25, 19, .18); } html[data-theme="forest"] .brand-title, html[data-theme="forest"] .brand .tagline, html[data-theme="forest"] .version-link{ color: var(--forest-bar-ink) !important; } html[data-theme="forest"] .version-link:hover{ opacity:.9; text-decoration: underline; } /* ---------- Topbar actions (Find/Create/Insights) ---------- */ /* Keep the same size everywhere (matches your Win95 sizing logic) */ html[data-theme="forest"] .topbar .nav-btn, html[data-theme="forest"] .topbar .btn, html[data-theme="forest"] .topbar .btn-success{ display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important; background: #0f2a1f0a !important; color: #ecfdf5 !important; border: 1px solid rgba(236, 253, 245, .28) !important; border-radius: var(--btn-radius) !important; backdrop-filter: saturate(110%) blur(2px); } html[data-theme="forest"] .topbar .nav-btn:hover, html[data-theme="forest"] .topbar .btn:hover, html[data-theme="forest"] .topbar .btn-success:hover{ background: #0f2a1f1a !important; border-color: rgba(236,253,245,.45) !important; } /* Username chip stands out slightly */ html[data-theme="forest"] .topbar .user-chip{ height: 36px !important; padding: 6px 14px !important; box-sizing: border-box !important; background: #0f2a1f20 !important; color: #eafaf2 !important; border: 1px solid rgba(236,253,245,.35) !important; border-radius: 999px !important; } /* ---------- Cards / panels ---------- */ html[data-theme="forest"] .card, html[data-theme="forest"] .result-card, html[data-theme="forest"] .search-form, html[data-theme="forest"] .form-card, html[data-theme="forest"] .user-menu, html[data-theme="forest"] .mobile-menu-inner{ background: var(--forest-face); border: 1px solid var(--forest-border); color: var(--forest-ink); border-radius: var(--panel-radius); box-shadow: 0 10px 28px var(--forest-shadow); } /* Section headings & muted text */ html[data-theme="forest"] .cc-panel-title, html[data-theme="forest"] .page-title, html[data-theme="forest"] .subject-title{ color: var(--forest-ink); } html[data-theme="forest"] .section-label, html[data-theme="forest"] .meta-label, html[data-theme="forest"] .page-subtitle, html[data-theme="forest"] .muted{ color: var(--forest-ink-muted); } /* ---------- Inputs ---------- */ html[data-theme="forest"] .search-input, html[data-theme="forest"] .form-control, html[data-theme="forest"] .login-input, html[data-theme="forest"] .tool-input, html[data-theme="forest"] textarea{ background: #ffffff; border: 1px solid var(--forest-border); color: var(--forest-ink); border-radius: 12px; box-shadow: 0 2px 0 rgba(16, 24, 40, .02) inset; } html[data-theme="forest"] .search-input::placeholder, html[data-theme="forest"] .form-control::placeholder{ color:#6a8a79; } html[data-theme="forest"] .search-input:focus, html[data-theme="forest"] .form-control:focus, html[data-theme="forest"] .login-input:focus, html[data-theme="forest"] .tool-input:focus{ border-color: var(--forest-accent); box-shadow: 0 0 0 3px rgba(22,163,74,.22); outline: none; } /* Pills / chips */ html[data-theme="forest"] .chip, html[data-theme="forest"] .chip-link{ background: #f0fdf4; border: 1px solid var(--forest-accent-200); color: #0b3b2a; } html[data-theme="forest"] .chip-muted{ background: #ecfdf5; color: #0b3b2a; } /* ---------- Buttons ---------- */ html[data-theme="forest"] .btn{ background: #ffffff; border: 1px solid var(--forest-border); color: var(--forest-ink); border-radius: var(--btn-radius); } html[data-theme="forest"] .btn:hover{ background:#f7fbf8; } html[data-theme="forest"] .btn-primary{ background: var(--forest-accent); border-color: var(--forest-accent); color: #fff; } html[data-theme="forest"] .btn-primary:hover{ background: var(--forest-accent-600); border-color: var(--forest-accent-600); } html[data-theme="forest"] .btn-danger{ background: var(--forest-danger); border-color: var(--forest-danger); color:#fff; } html[data-theme="forest"] .btn-danger:hover{ filter: brightness(.95); } /* ---------- Messages ---------- */ html[data-theme="forest"] .msg{ background:#ffffff; border-color: var(--forest-border); color: var(--forest-ink); } html[data-theme="forest"] .msg.info { border-left:4px solid var(--forest-info); background:#eef4ff; } html[data-theme="forest"] .msg.success { border-left:4px solid var(--forest-success); background:#ecfdf5; } html[data-theme="forest"] .msg.warning { border-left:4px solid var(--forest-warning); background:#fff7ed; } html[data-theme="forest"] .msg.error { border-left:4px solid var(--forest-danger); background:#fff1f3; } /* ---------- Links ---------- */ html[data-theme="forest"] a{ color:#0e7e49; } html[data-theme="forest"] a:hover{ color:#0b5f38; text-decoration: underline; } /* ---------- Command Center accents ---------- */ html[data-theme="forest"] .settings-console .sec-tile{ background: var(--forest-elev); border: 1px solid var(--forest-border); color: var(--forest-ink); border-radius: 12px; } html[data-theme="forest"] .settings-console .sec-tile:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(9,30,22,.10); } html[data-theme="forest"] .settings-console .sec-icon{ background: #e7f7ef; color:#0b3b2a; border: 1px solid var(--forest-border); } /* Theme swatches */ html[data-theme="forest"] .settings-console .swatch{ border:1px solid var(--forest-border); background: linear-gradient(135deg,#e8fbef,#cdeedd); } html[data-theme="forest"] .settings-console .swatch-name{ background: rgba(255,255,255,.85); color: var(--forest-ink); } /* ---------- Highlights & Validation ---------- */ html[data-theme="forest"] .mark-hit{ background: #fff59d; color: #0b2f22; padding: 0 2px; border: 1px solid #f3e27a; } html[data-theme="forest"] .form-control.scripture-valid, html[data-theme="forest"] .search-input.scripture-valid{ border-color: var(--forest-success); background:#f0fff6; box-shadow: 0 0 0 3px rgba(22,163,74,.18); } html[data-theme="forest"] .form-control.scripture-invalid, html[data-theme="forest"] .search-input.scripture-invalid{ border-color: var(--forest-danger); background:#fff1f3; box-shadow: 0 0 0 3px rgba(225,29,72,.18); } /* Scripture/Source state chips if you use them */ html[data-theme="forest"] .scripture-pill-invalid{ background:#ffe6ea; border:1px solid #f3a5b4; color:#7a1d2a; } html[data-theme="forest"] .scripture-pill-wol{ background:#e6fbff; border:1px solid #a8dcf3; color:#0f3d4f; } /* ---------- Menus ---------- */ html[data-theme="forest"] .user-menu, html[data-theme="forest"] .mobile-menu-inner{ background: var(--forest-face); border: 1px solid var(--forest-border); } html[data-theme="forest"] .user-menu .menu-item:hover, html[data-theme="forest"] .mobile-link:hover{ background:#ecfdf5; } /* ---------- Tables ---------- */ html[data-theme="forest"] table{ border-collapse: collapse; } html[data-theme="forest"] th, html[data-theme="forest"] td{ border:1px solid var(--forest-border); background:#ffffff; color: var(--forest-ink); } /* ---------- Misc ---------- */ html[data-theme="forest"] .topbar-wrap.is-scrolled{ box-shadow: 0 6px 24px rgba(3,25,19,.20); border-bottom-color: rgba(12,58,43,.25); }