/* AudienceXAI — light / dark tokens (mode set via data-theme on ) */ :root, html[data-theme="light"] { color-scheme: light; --font-sans: "Space Grotesk", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; --bg: #f4f4f2; --bg-elevated: #ffffff; --bg-muted: #ebeae6; --bg-plan-popular: #f0efeb; --fg: #0a0a0a; --fg-secondary: #2a2a2a; --fg-muted: #4a4a4a; --fg-faint: #6e6e6e; --border: #dddcd6; --border-strong: #c4c2b8; --header-border: #dddcd6; --cta-bg: #0a0a0a; --cta-fg: #ffffff; --cta-hover: #222222; --btn-bg: #efeee9; --btn-fg: #0a0a0a; --btn-border: #d4d2c8; --btn-hover: #e4e2da; --shadow: 0 24px 48px rgba(20, 18, 12, 0.08); --ring: #1a1a1a; --danger-bg: #fde8e8; --danger-fg: #b42318; --success: #15803d; --banner-bg: #f5f2e6; --banner-border: #e0d9c0; --banner-fg: #3d3a2e; --input-bg: #ffffff; --input-border: #d4d2c8; --input-fg: #0a0a0a; --card-shadow: 0 10px 40px rgba(20, 18, 12, 0.08); --logo-ring: rgba(10, 10, 10, 0.12); --logo-glow: 0 2px 8px rgba(20, 18, 12, 0.12); --accent: #6e6e6e; --accent-soft: rgba(20, 20, 20, 0.06); --accent-glow: rgba(20, 20, 20, 0.12); --card-tint: #ffffff; --atmosphere: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 0, 0, 0.04), transparent 55%); } html[data-theme="dark"] { color-scheme: dark; --font-sans: "Space Grotesk", "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace; --bg: #000000; --bg-elevated: #0d0d0d; --bg-muted: #141414; --bg-plan-popular: #111111; --fg: #ffffff; --fg-secondary: #d0d0d0; --fg-muted: #a3a3a3; --fg-faint: #7a7a7a; --border: #1c1c1c; --border-strong: #3a3a3a; --header-border: #161616; --cta-bg: #ffffff; --cta-fg: #000000; --cta-hover: #e5e5e5; --btn-bg: #141414; --btn-fg: #ffffff; --btn-border: #2a2a2a; --btn-hover: #1c1c1c; --shadow: 0 24px 48px rgba(0, 0, 0, 0.45); --ring: #1a1a1a; --danger-bg: #2a1515; --danger-fg: #f87171; --success: #4ade80; --banner-bg: #1a1a12; --banner-border: #333333; --banner-fg: #cccccc; --input-bg: #111111; --input-border: #2a2a2a; --input-fg: #ffffff; --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); --logo-ring: rgba(255, 255, 255, 0.22); --logo-glow: 0 2px 12px rgba(255, 255, 255, 0.08); --accent: #c8c8c8; --accent-soft: rgba(255, 255, 255, 0.06); --accent-glow: rgba(255, 255, 255, 0.12); --card-tint: #111111; --atmosphere: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 255, 255, 0.05), transparent 58%); } body { font-family: var(--font-sans); font-feature-settings: "ss01" 1, "kern" 1; letter-spacing: -0.01em; } /* Compact icon theme control (sun / moon / system) — sits far right */ .theme-switch { display: inline-flex; align-items: center; gap: 1px; margin-left: 0; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); vertical-align: middle; flex-shrink: 0; } .theme-switch button { appearance: none; border: 0; background: transparent; color: var(--fg-muted); font-family: var(--font-mono); width: 28px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .theme-switch button svg { width: 14px; height: 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .theme-switch button:hover { color: var(--fg); } .theme-switch button[aria-pressed="true"] { background: var(--bg-muted); color: var(--fg); } .theme-switch.theme-corner { margin-left: 0; } /* Shared logo mark — original brand asset */ .logo-mark { display: block; object-fit: cover; border-radius: 10px; } @media (max-width: 900px) { .theme-switch button { width: 26px; height: 26px; } .theme-switch button svg { width: 13px; height: 13px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }