/* =========================================================== NEXHAUL — THEME VARIABLES (Light & Dark) Loaded BEFORE style.css. Default: LIGHT. [data-theme="dark"] on switches to dark. No hardcoded theme shades anywhere else — everything flows through these variables (zero cross-theme bleed). =========================================================== */ :root, [data-theme="light"] { color-scheme: light; /* === LAYOUT / TYPOGRAPHY TOKENS (theme-independent) === */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 16px; --radius-sm: 10px; --radius-xs: 8px; --radius-full: 9999px; --bar-h: 56px; --tab-h: 68px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* === SURFACES === */ --bg: #f3f6f4; /* main app background */ --bg-deep: #e9efec; /* body / deep sections / hero base */ --bg-card: #ffffff; /* cards */ --bg-elevated: #edf2ef; /* elevated chips, inputs, wells */ --bg-alt: #e6ede9; /* alternate section band */ /* === TINTED SURFACES (hero gradients / section washes) === */ --bg-tint: #dcece4; /* emerald-tinted gradient stop */ --bg-tint-warm: #f2e9e4; /* warm gradient stop */ --bg-tint-gold: #f2ecd8; /* gold-tinted wash */ --bg-navy: #e7ebf3; /* cool-tinted panels */ /* === TEXT === */ --text: #10201a; --text-2: #43544c; --text-3: #64756d; --text-inv: #ffffff; /* text that is ALWAYS white (on accent) */ --on-accent: #ffffff; /* === BORDERS / GLASS === */ --border: rgba(16, 42, 33, 0.14); --border-soft: rgba(16, 42, 33, 0.08); --glass-1: rgba(255, 255, 255, 0.55); --glass-2: rgba(255, 255, 255, 0.72); --glass-3: rgba(255, 255, 255, 0.92); --bar-glass: rgba(255, 255, 255, 0.78); --veil: rgba(238, 243, 240, 0.88); /* === ACCENT: EMERALD === */ --accent: #059669; /* primary accent (text/icons on light) */ --accent-2: #10b981; /* gradients / buttons */ --accent-3: #34d399; /* soft accent */ --accent-deep: #047857; --accent-deep2: #065f46; --accent-glow: rgba(16, 185, 129, 0.16); --accent-soft-bg: rgba(16, 185, 129, 0.10); --on-accent-soft: #065f46; /* legacy aliases (kept so every existing var() reference works) */ --purple: var(--accent); --purple-light: var(--accent-3); --purple-dark: var(--accent-deep); --purple-deep: var(--accent-deep2); --purple-glow: var(--accent-glow); --shadow-purple: 0 4px 20px rgba(16, 185, 129, 0.25); /* === GOLD (tertiary) === */ --gold: #a8861a; --gold-light: #b8960f; --gold-dark: #8a6d1a; --gold-text: #8a6d1a; --gold-glow: rgba(212, 175, 55, 0.14); --shadow-gold: 0 4px 20px rgba(184, 150, 15, 0.18); /* === UTILITY === */ --blue: #2563eb; --green: #16a34a; --amber: #d97706; --cyan: #0e7490; --link: #1d4ed8; --ok: #15803d; --err: #dc2626; /* === BLACK ALIAS (legacy) === */ --black: #10201a; --black-light: #1c2b25; --black-mid: #2a3a33; --black-glow: rgba(16, 32, 26, 0.18); --shadow-black: 0 4px 20px rgba(16, 42, 33, 0.16); /* === SHADOWS (softer for light) === */ --shadow-sm: 0 1px 3px rgba(23, 46, 37, 0.10); --shadow: 0 2px 12px rgba(23, 46, 37, 0.10); --shadow-lg: 0 8px 30px rgba(23, 46, 37, 0.14); } [data-theme="dark"] { color-scheme: dark; /* === SURFACES === */ --bg: #181818; --bg-deep: #0f0f0f; --bg-card: #1e1e1e; --bg-elevated: #2a2a2a; --bg-alt: #151515; /* === TINTED SURFACES === */ --bg-tint: #0c1913; --bg-tint-warm: #190e0e; --bg-tint-gold: #181204; --bg-navy: #171928; /* === TEXT === */ --text: #f0f0f0; --text-2: #b0b0b8; --text-3: #84848c; --text-inv: #ffffff; --on-accent: #ffffff; /* === BORDERS / GLASS === */ --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.07); --glass-1: rgba(255, 255, 255, 0.04); --glass-2: rgba(255, 255, 255, 0.07); --glass-3: rgba(255, 255, 255, 0.13); --bar-glass: rgba(18, 18, 18, 0.55); --veil: rgba(8, 8, 8, 0.82); /* === ACCENT: EMERALD === */ --accent: #34d399; --accent-2: #10b981; --accent-3: #6ee7b7; --accent-deep: #059669; --accent-deep2: #047857; --accent-glow: rgba(52, 211, 153, 0.18); --accent-soft-bg: rgba(52, 211, 153, 0.12); --on-accent-soft: #a7f3d0; /* legacy aliases */ --purple: var(--accent); --purple-light: var(--accent-3); --purple-dark: var(--accent-deep); --purple-deep: var(--accent-deep2); --purple-glow: var(--accent-glow); --shadow-purple: 0 4px 20px rgba(16, 185, 129, 0.3); /* === GOLD === */ --gold: #d4af37; --gold-light: #e8c547; --gold-dark: #b8960f; --gold-text: #e8c547; --gold-glow: rgba(212, 175, 55, 0.12); --shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.15); /* === UTILITY === */ --blue: #3b82f6; --green: #22c55e; --amber: #f59e0b; --cyan: #06b6d4; --link: #60a5fa; --ok: #4ade80; --err: #fca5a5; /* === BLACK ALIAS === */ --black: #0a0a0a; --black-light: #1a1a1a; --black-mid: #2a2a2a; --black-glow: rgba(10, 10, 10, 0.25); --shadow-black: 0 4px 20px rgba(0, 0, 0, 0.5); /* === SHADOWS === */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow: 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5); } /* ===== THEME TRANSITION SMOOTHING ===== */ html.theme-anim, html.theme-anim body, html.theme-anim .app-shell, html.theme-anim .app-bar, html.theme-anim .tab-bar, html.theme-anim .side-nav, html.theme-anim .desktop-nav, html.theme-anim .desktop-footer, html.theme-anim .card, html.theme-anim section, html.theme-anim input, html.theme-anim textarea, html.theme-anim select, html.theme-anim button { transition: background-color 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important; } /* ===== BASE TARGETS (safe defaults formerly hardcoded) ===== */ body { background: var(--bg-deep); color: var(--text); } /* Form autofill theme fix */ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--bg-elevated) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 9999s ease-in-out 0s; } /* Selection */ ::selection { background: var(--accent-2); color: #fff; } /* Scrollbars follow theme */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }