/* ───────────────────────────────────────────── BondhuBot — design tokens + shared body chrome Theme resolution order: 1. data-theme="dark" / "light" on (user-chosen, persisted) 2. prefers-color-scheme (system) 3. light (default fallback) ───────────────────────────────────────────── */ :root { --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', monospace; /* ─── Light palette (default) ─── */ --bg-deep: #f7f8f6; --bg-mid: #eef1ed; --bg-gradient-mid: #eef1ed; --bg-surface: rgba(10, 22, 18, 0.02); --bg-glass: rgba(10, 22, 18, 0.04); --bg-glass-hover: rgba(10, 22, 18, 0.07); --bg-chat-bot: rgba(10, 22, 18, 0.05); --nav-bg: rgba(247, 248, 246, 0.7); --footer-bg: rgba(247, 248, 246, 0.5); --border-subtle: rgba(10, 22, 18, 0.08); --border-glass: rgba(10, 22, 18, 0.12); --text-primary: #0a1612; --text-secondary: #4a5552; --text-muted: #8a9491; --accent: #2f8f6b; --accent-dim: #1f6b50; --accent-glow: rgba(47, 143, 107, 0.15); --accent-grad-1: #2f8f6b; --accent-grad-2: #1f6b50; --accent-border: rgba(47, 143, 107, 0.3); --accent-shadow-soft: rgba(47, 143, 107, 0.2); --accent-shadow-strong: rgba(47, 143, 107, 0.3); --accent-link-underline: rgba(47, 143, 107, 0.35); --accent-box-bg: rgba(47, 143, 107, 0.05); --accent-box-border: rgba(47, 143, 107, 0.18); --on-accent: #ffffff; --gold: #a8884a; --grid-dot: rgba(10, 22, 18, 0.035); --orb-a: rgba(47, 143, 107, 0.08); --orb-b: rgba(168, 136, 74, 0.05); --orb-c: rgba(31, 107, 80, 0.04); --orb-float-a: rgba(47, 143, 107, 0.22); --orb-float-b: rgba(168, 136, 74, 0.14); --card-shadow: 0 20px 60px rgba(10, 22, 18, 0.08); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); color-scheme: light; } /* ─── Dark palette — explicit override ─── */ :root[data-theme="dark"] { --bg-deep: #0a1612; --bg-mid: #0f1f1a; --bg-gradient-mid: #0c1a15; --bg-surface: rgba(255, 255, 255, 0.03); --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-hover: rgba(255, 255, 255, 0.07); --bg-chat-bot: rgba(255, 255, 255, 0.06); --nav-bg: rgba(10, 22, 18, 0.4); --footer-bg: rgba(10, 22, 18, 0.4); --border-subtle: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.12); --text-primary: #e8ebe7; --text-secondary: #8a9491; --text-muted: #5a6561; --accent: #7dd4b6; --accent-dim: #4a9d7f; --accent-glow: rgba(125, 212, 182, 0.15); --accent-grad-1: #7dd4b6; --accent-grad-2: #5eb894; --accent-border: rgba(125, 212, 182, 0.3); --accent-shadow-soft: rgba(125, 212, 182, 0.2); --accent-shadow-strong: rgba(125, 212, 182, 0.3); --accent-link-underline: rgba(125, 212, 182, 0.3); --accent-box-bg: rgba(125, 212, 182, 0.04); --accent-box-border: rgba(125, 212, 182, 0.15); --on-accent: #0a1612; --gold: #d4b87d; --grid-dot: rgba(255, 255, 255, 0.015); --orb-a: rgba(125, 212, 182, 0.08); --orb-b: rgba(212, 184, 125, 0.05); --orb-c: rgba(74, 157, 127, 0.04); --orb-float-a: rgba(125, 212, 182, 0.4); --orb-float-b: rgba(212, 184, 125, 0.25); --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); color-scheme: dark; } /* ─── System preference — applied only when user has NOT chosen ─── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg-deep: #0a1612; --bg-mid: #0f1f1a; --bg-gradient-mid: #0c1a15; --bg-surface: rgba(255, 255, 255, 0.03); --bg-glass: rgba(255, 255, 255, 0.04); --bg-glass-hover: rgba(255, 255, 255, 0.07); --bg-chat-bot: rgba(255, 255, 255, 0.06); --nav-bg: rgba(10, 22, 18, 0.4); --footer-bg: rgba(10, 22, 18, 0.4); --border-subtle: rgba(255, 255, 255, 0.08); --border-glass: rgba(255, 255, 255, 0.12); --text-primary: #e8ebe7; --text-secondary: #8a9491; --text-muted: #5a6561; --accent: #7dd4b6; --accent-dim: #4a9d7f; --accent-glow: rgba(125, 212, 182, 0.15); --accent-grad-1: #7dd4b6; --accent-grad-2: #5eb894; --accent-border: rgba(125, 212, 182, 0.3); --accent-shadow-soft: rgba(125, 212, 182, 0.2); --accent-shadow-strong: rgba(125, 212, 182, 0.3); --accent-link-underline: rgba(125, 212, 182, 0.3); --accent-box-bg: rgba(125, 212, 182, 0.04); --accent-box-border: rgba(125, 212, 182, 0.15); --on-accent: #0a1612; --gold: #d4b87d; --grid-dot: rgba(255, 255, 255, 0.015); --orb-a: rgba(125, 212, 182, 0.08); --orb-b: rgba(212, 184, 125, 0.05); --orb-c: rgba(74, 157, 127, 0.04); --orb-float-a: rgba(125, 212, 182, 0.4); --orb-float-b: rgba(212, 184, 125, 0.25); --card-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); --card-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); color-scheme: dark; } } /* ───────────────────────────────────────────── Shared body chrome — background, grid, orbs ───────────────────────────────────────────── */ body { background: var(--bg-deep); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 1200px 800px at 20% -10%, var(--orb-a), transparent 60%), radial-gradient(ellipse 800px 600px at 90% 110%, var(--orb-b), transparent 60%), radial-gradient(ellipse 600px 400px at 50% 50%, var(--orb-c), transparent 70%), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-gradient-mid) 50%, var(--bg-deep) 100%); z-index: -2; pointer-events: none; } body::after { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0); background-size: 40px 40px; z-index: -1; pointer-events: none; } .orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: 0.6; pointer-events: none; z-index: -1; animation: bb-float 20s ease-in-out infinite; } .orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, var(--orb-float-a), transparent); top: -10%; left: -10%; } .orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, var(--orb-float-b), transparent); bottom: -10%; right: -10%; animation-delay: -10s; } @keyframes bb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.1); } } /* ───────────────────────────────────────────── Theme toggle button (nav) ───────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; background: var(--bg-glass); border: 1px solid var(--border-glass); border-radius: 100px; color: var(--text-primary); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; font-family: inherit; } .theme-toggle:hover { background: var(--bg-glass-hover); border-color: var(--accent-dim); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle [data-icon] { display: none; } .theme-toggle[data-state="system"] [data-icon="system"], .theme-toggle[data-state="light"] [data-icon="light"], .theme-toggle[data-state="dark"] [data-icon="dark"] { display: block; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .orb { animation: none; } body, .theme-toggle { transition: none; } }