/* FusionLayer — shared marketing site styles. One palette, light + dark, switched via [data-theme] on . */ :root, :root[data-theme="dark"] { --bg: #0a0a0a; --bg-elev: #141414; --bg-card: #1a1a1a; --text: #f0f0ec; --text-dim: #b0b0a8; --text-faint: #8a8a85; --accent: #818cf8; --accent-strong:#a5b4fc; --accent-fg: #0a0a0a; --line: #2a2a2a; --line-bright: #404040; --shadow-card: 0 8px 24px rgba(0,0,0,0.35); color-scheme: dark; } :root[data-theme="light"] { --bg: #fafaf8; --bg-elev: #f1f1ee; --bg-card: #ebebe6; --text: #0a0a0a; --text-dim: #4a4a45; --text-faint: #6a6a65; --accent: #4f46e5; --accent-strong:#3730a3; --accent-fg: #ffffff; --line: #e0e0d8; --line-bright: #c0c0bb; --shadow-card: 0 8px 24px rgba(20,20,20,0.08); color-scheme: light; } /* Paper grain overlay */ @media (prefers-reduced-motion: no-preference) { body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 300px 300px; } } /* Theme toggle button — added by theme.js into [data-theme-slot] elements. */ .theme-toggle { background: transparent; color: var(--text-dim); border: 1px solid var(--line-bright); border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font: inherit; transition: color .15s, border-color .15s, background .15s; } .theme-toggle:hover { color: var(--text); border-color: var(--text); background: var(--bg-elev); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }