/* ========================================================================== Poppie — Dark Theme Overrides Activated by [data-theme="dark"] on element. Token values are in tokens.css; this file handles structural overrides. ========================================================================== */ [data-theme="dark"] body { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 107, 107, 0.08), transparent 50%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(167, 139, 250, 0.1), transparent 50%), var(--bg); } [data-theme="dark"] .section--alt { background: var(--bg-alt); } [data-theme="dark"] .hero__eyebrow { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .social-proof { border-color: var(--border); } [data-theme="dark"] .mission { background: var(--surface); } [data-theme="dark"] .footer { background: #0A0715; border-top-color: var(--border); } [data-theme="dark"] .footer__social-link { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .footer__social-link:hover { background: var(--primary); border-color: var(--primary); color: var(--ink); } [data-theme="dark"] .btn--primary { color: var(--ink); } [data-theme="dark"] .btn--ghost { border-color: var(--ink-soft); color: var(--ink); } [data-theme="dark"] .btn--ghost:hover { background: var(--ink); color: var(--bg); } [data-theme="dark"] .btn--badge { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); } [data-theme="dark"] .btn--dark { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--border); } [data-theme="dark"] .cta-block { background: radial-gradient(ellipse at top left, rgba(255, 224, 102, 0.25), transparent 60%), radial-gradient(ellipse at bottom right, rgba(184, 160, 255, 0.3), transparent 55%), linear-gradient(135deg, #FF6B6B, #A78BFA); color: #FFFFFF; } [data-theme="dark"] .app-screen { background: linear-gradient(180deg, #241B38, #1A1428); } [data-theme="dark"] .app-screen__greeting { color: var(--ink); } [data-theme="dark"] .pricing-card--popular { background: var(--surface-raised); border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), var(--shadow-xl); } [data-theme="dark"] .pricing-card--popular .pricing-card__name, [data-theme="dark"] .pricing-card--popular .pricing-card__amount { color: var(--ink); } [data-theme="dark"] .pricing-card--popular .pricing-card__feature { color: var(--ink); } [data-theme="dark"] .pricing-card--popular .pricing-card__features { border-color: var(--border); } [data-theme="dark"] .compare-table { background: var(--surface); } [data-theme="dark"] .compare-table thead th.is-popular { background: var(--primary); color: var(--ink); } [data-theme="dark"] .compare-table tbody th { background: var(--bg-alt); } [data-theme="dark"] .code-block { background: #0A0715; border: 1px solid var(--border); } [data-theme="dark"] ::selection { background: var(--primary); color: var(--ink); } [data-theme="dark"] .error-page__num { color: var(--primary); } [data-theme="dark"] .nav__toggle { background: var(--surface); } [data-theme="dark"] .docs-callout { background: rgba(255, 133, 133, 0.12); }