/* * Purple · CSS design tokens * * Two themes (dark default, light opt-in via [data-theme="light"] on * ). Iframes pull these by importing `tokens.css` themselves so * theme changes propagate without re-rendering them — the host posts * `theme:set` and each iframe just flips the attribute. */ :root, [data-theme="dark"] { --bg: #000000; --s1: rgba(255,255,255,.04); --s2: rgba(255,255,255,.07); --s3: rgba(255,255,255,.1); --s-elev: rgba(28,28,30,.85); --sep: rgba(255,255,255,.08); --sep-strong: rgba(255,255,255,.14); --t1: rgba(255,255,255,.96); --t2: rgba(235,235,245,.6); --t3: rgba(235,235,245,.34); --t4: rgba(235,235,245,.18); --p: #bf99f7; --p-deep: #8b5cf6; --pd: rgba(191,153,247,.13); --pb: rgba(191,153,247,.32); --glow: rgba(191,153,247,.35); --green: #30d158; --gd: rgba(48,209,88,.15); --amber: #ffd60a; --ad: rgba(255,214,10,.14); --red: #ff453a; --rd: rgba(255,69,58,.12); --blue: #0a84ff; --rose: #ff8aa8; --tg: #2aabee; --inv-bg: #f5f5f7; --inv-fg: #1d1d1f; --inv-shadow: 0 2px 8px rgba(0,0,0,.18); --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --f: -apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif; --f-rounded: -apple-system,BlinkMacSystemFont,'SF Pro Rounded',system-ui,sans-serif; --blur: blur(24px) saturate(180%); --spring: cubic-bezier(.34,1.56,.64,1); --ease: cubic-bezier(.22,1,.36,1); --page-bg: #000000; } [data-theme="light"] { --bg: #f4f1fa; --s1: rgba(255,255,255,.85); --s2: #ffffff; --s3: #f0f0f3; --s-elev: rgba(255,255,255,.94); --sep: rgba(60,60,67,.12); --sep-strong: rgba(60,60,67,.2); --t1: #000000; --t2: rgba(60,60,67,.6); --t3: rgba(60,60,67,.34); --t4: rgba(60,60,67,.18); --p: #7c3aed; --p-deep: #6d28d9; --pd: rgba(124,58,237,.08); --pb: rgba(124,58,237,.22); --glow: rgba(124,58,237,.25); --green: #30d158; --gd: rgba(48,209,88,.12); --amber: #ff9500; --ad: rgba(255,149,0,.1); --red: #ff3b30; --rd: rgba(255,59,48,.1); --blue: #007aff; --rose: #7a3dff; --tg: #0088cc; --inv-bg: #1d1d1f; --inv-fg: #ffffff; --page-bg: #f4f1fa; }