* { box-sizing: border-box; margin: 0; padding: 0; } /* ═══════════════════════════════════════════════════════════════════════ DESIGN TOKENS — redesign system, three switchable directions. Each .theme-* class redefines the redesign tokens (--surface, --accent, --radius, …) AND bridges the legacy variable names the existing components still read (--blue, --bg-app, --text-muted, …), so toggling one class on re-themes the whole app. Default = Midnight. ═══════════════════════════════════════════════════════════════════════ */ :root { --sidebar-w: 320px; --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace; /* decorative gradients reused across themes */ --tik-cyan: #00f2ea; --tik-pink: #ff0050; --snap-yellow: #FFFC00; --story-ring: linear-gradient(135deg, #f9ed32 0%, #ee2a7b 40%, #6228d7 80%, #00f2ea 100%); --story-ring-alt: linear-gradient(135deg, #ff0050 0%, #ee2a7b 50%, #6228d7 100%); } /* ─── THEME: MIDNIGHT (refined dark) — default ─── */ .theme-midnight { --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; --bg: oklch(0.215 0.013 264); --surface: oklch(0.252 0.015 264); --surface-2: oklch(0.288 0.016 264); --elev: oklch(0.27 0.016 264); --border: oklch(0.34 0.018 264); --border-2: oklch(0.42 0.02 264); --text: oklch(0.96 0.006 264); --text-2: oklch(0.74 0.012 264); --text-3: oklch(0.58 0.014 264); --accent: oklch(0.74 0.12 274); --accent-2: oklch(0.78 0.1 240); --accent-soft: oklch(0.34 0.06 274); --accent-ink: oklch(0.8 0.11 274); --on-accent: oklch(0.2 0.04 274); --presence: oklch(0.74 0.15 158); --radius: 18px; --radius-lg: 26px; --radius-sm: 11px; --bubble: 19px; --bubble-tail: 6px; --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.35); --shadow-pop: 0 20px 60px rgba(0,0,0,0.55); --av-bg: linear-gradient(150deg, oklch(0.4 0.07 274), oklch(0.34 0.05 240)); } /* ─── THEME: AURA (calm light) ─── */ .theme-aura { --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; --bg: oklch(0.984 0.004 95); --surface: oklch(1 0 0); --surface-2: oklch(0.962 0.005 95); --elev: oklch(1 0 0); --border: oklch(0.915 0.005 95); --border-2: oklch(0.86 0.006 95); --text: oklch(0.26 0.012 285); --text-2: oklch(0.52 0.012 285); --text-3: oklch(0.68 0.012 285); --accent: oklch(0.56 0.16 285); --accent-2: oklch(0.62 0.15 320); --accent-soft: oklch(0.95 0.035 285); --accent-ink: oklch(0.48 0.17 285); --on-accent: #fff; --presence: oklch(0.66 0.15 155); --radius: 20px; --radius-lg: 28px; --radius-sm: 12px; --bubble: 21px; --bubble-tail: 7px; --shadow-card: 0 1px 2px oklch(0.4 0.03 285 / 0.05), 0 8px 24px oklch(0.4 0.03 285 / 0.06); --shadow-pop: 0 18px 54px oklch(0.3 0.04 285 / 0.16); --av-bg: linear-gradient(150deg, oklch(0.93 0.04 285), oklch(0.95 0.03 320)); } /* ─── THEME: PAPER (warm editorial) ─── */ .theme-paper { --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; --bg: oklch(0.963 0.013 85); --surface: oklch(0.99 0.008 85); --surface-2: oklch(0.94 0.016 85); --elev: oklch(0.995 0.006 85); --border: oklch(0.89 0.018 80); --border-2: oklch(0.82 0.022 75); --text: oklch(0.28 0.024 60); --text-2: oklch(0.46 0.026 60); --text-3: oklch(0.62 0.026 65); --accent: oklch(0.58 0.13 48); --accent-2: oklch(0.56 0.07 155); --accent-soft: oklch(0.92 0.04 60); --accent-ink: oklch(0.5 0.14 45); --on-accent: oklch(0.99 0.01 85); --presence: oklch(0.58 0.09 150); --radius: 14px; --radius-lg: 18px; --radius-sm: 9px; --bubble: 16px; --bubble-tail: 5px; --shadow-card: 0 1px 2px oklch(0.5 0.05 60 / 0.06), 0 8px 22px oklch(0.5 0.05 60 / 0.08); --shadow-pop: 0 18px 50px oklch(0.4 0.06 60 / 0.18); --av-bg: linear-gradient(150deg, oklch(0.9 0.05 55), oklch(0.92 0.04 120)); } /* ─── Legacy variable bridge — maps the names the current components still read onto the active theme's tokens (applies to all themes). ─── */ .theme-midnight, .theme-aura, .theme-paper { --bg-app: var(--bg); --bg-topbar: var(--bg); --bg-inputbar: var(--bg); --bg-msg-ai: var(--surface); --text-muted: var(--text-3); --blue: var(--accent); --blue-dark: var(--accent-ink); --blue-light: var(--accent-ink); --blue-glow: var(--accent-soft); } html,body { height:100%; } body { font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif); background:var(--bg); color:var(--text); } /* ─── Relationship stage badges ─────────────────────────────────────────── */ .stage-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 1px 6px; border-radius: 20px; vertical-align: middle; margin-left: 5px; line-height: 16px; text-transform: uppercase; } .stage-friend { background: rgba(74,158,255,0.18); color: #4a9eff; } .stage-close { background: rgba(155,89,182,0.18); color: #b47ee8; } .stage-intimate { background: rgba(231,76,60,0.18); color: #ff6b5e; } .stage-soulmate { background: rgba(243,156,18,0.22); color: #f4b942; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; }