/* ─── Snapro themes ──────────────────────────────────────────────────── Switch via `` (default = aurora). Single source of truth for accent color: `--accent-1` / `--accent-2` (gradient ends), `--accent-text` / `--accent-text-2` (visible text/icons), `--accent-soft` (subtle backgrounds), `--accent-strong` (borders), `--accent-glow` (shadow). Add a new theme by copying any [data-theme="..."] block — pick HSL/HEX that keeps WCAG-AA contrast on the dark surface. */ :root, [data-theme="aurora"] { --accent-1: #a855f7; --accent-2: #f43f5e; --accent-text: #c084fc; --accent-text-2: #fb7185; --accent-soft: rgba(168, 85, 247, 0.10); --accent-strong: rgba(168, 85, 247, 0.32); --accent-glow: rgba(168, 85, 247, 0.40); --accent-grad: linear-gradient(135deg, #a855f7 0%, #f43f5e 100%); --accent-grad-text: linear-gradient(135deg, #fafafa 0%, #a855f7 50%, #f43f5e 100%); --accent-button-shadow: rgba(168, 85, 247, 0.35); } [data-theme="ocean"] { --accent-1: #0891b2; --accent-2: #4f46e5; --accent-text: #38bdf8; --accent-text-2: #818cf8; --accent-soft: rgba(56, 189, 248, 0.10); --accent-strong: rgba(56, 189, 248, 0.32); --accent-glow: rgba(8, 145, 178, 0.40); --accent-grad: linear-gradient(135deg, #0891b2 0%, #4f46e5 100%); --accent-grad-text: linear-gradient(135deg, #fafafa 0%, #38bdf8 50%, #818cf8 100%); --accent-button-shadow: rgba(8, 145, 178, 0.35); } [data-theme="sunset"] { --accent-1: #ea580c; --accent-2: #db2777; --accent-text: #fb923c; --accent-text-2: #f472b6; --accent-soft: rgba(251, 146, 60, 0.10); --accent-strong: rgba(251, 146, 60, 0.32); --accent-glow: rgba(234, 88, 12, 0.40); --accent-grad: linear-gradient(135deg, #ea580c 0%, #db2777 100%); --accent-grad-text: linear-gradient(135deg, #fafafa 0%, #fb923c 50%, #f472b6 100%); --accent-button-shadow: rgba(234, 88, 12, 0.40); } [data-theme="forest"] { --accent-1: #059669; --accent-2: #0d9488; --accent-text: #34d399; --accent-text-2: #5eead4; --accent-soft: rgba(52, 211, 153, 0.10); --accent-strong: rgba(52, 211, 153, 0.32); --accent-glow: rgba(5, 150, 105, 0.40); --accent-grad: linear-gradient(135deg, #059669 0%, #0d9488 100%); --accent-grad-text: linear-gradient(135deg, #fafafa 0%, #34d399 50%, #5eead4 100%); --accent-button-shadow: rgba(5, 150, 105, 0.35); } [data-theme="graphite"] { --accent-1: #64748b; --accent-2: #94a3b8; --accent-text: #cbd5e1; --accent-text-2: #cbd5e1; --accent-soft: rgba(148, 163, 184, 0.10); --accent-strong: rgba(148, 163, 184, 0.30); --accent-glow: rgba(148, 163, 184, 0.30); --accent-grad: linear-gradient(135deg, #475569 0%, #94a3b8 100%); --accent-grad-text: linear-gradient(135deg, #fafafa 0%, #cbd5e1 100%); --accent-button-shadow: rgba(100, 116, 139, 0.35); } /* ─── Tailwind utility overrides ─────────────────────────────────────── Tailwind CDN renders fixed hex values (text-grape-400 → #c084fc). We override them so the same utility classes track the active theme. `!important` is needed because Tailwind inserts utilities at full weight. */ .text-grape-400 { color: var(--accent-text) !important; } .text-grape-500 { color: var(--accent-1) !important; } .text-grape-300 { color: var(--accent-text) !important; filter: brightness(1.1); } .bg-grape-500\/20 { background-color: var(--accent-soft) !important; } .bg-grape-500\/14 { background-color: var(--accent-soft) !important; } .border-grape-500\/30 { border-color: var(--accent-strong) !important; } .bg-gradient-text { background-image: var(--accent-grad-text) !important; } .bg-gradient-primary { background-image: var(--accent-grad) !important; } .bg-gradient-secondary{ background-image: var(--accent-grad) !important; filter: hue-rotate(20deg); } /* hover variant for nav */ .hover\:text-grape-300:hover { color: var(--accent-text) !important; filter: brightness(1.15); } .hover\:text-grape-400:hover { color: var(--accent-text) !important; } .hover\:border-accent-500:hover { border-color: var(--accent-1) !important; } /* Theme transition — make recolor smooth */ .btn, .card, .eyebrow, .logo-mark, .nav-link, .pill, .pipeline-step, .admin-nav-link, .skeleton, .compare-handle::after { transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, background-image .25s ease; }