/* ═══════════════════════════════════════════════════════════ COLORFUL THEME Default theme — no attribute needed on . Also activated explicitly via data-style="colorful". ═══════════════════════════════════════════════════════════ */ /* ── Status tokens ── semantic, so alerts never borrow an accent slot ── */ :root { --p-info: #3b8ef0; --p-success: #84cc16; --p-warn: #f0c000; --p-danger: #ef4444; --p-on-accent: #0a0a0a; } /* ── Vivid palette (theme-independent accent colours) ── */ :root { --p-accent-1: #06d6c8; --p-accent-2: #e8178a; --p-accent-3: #f0c000; --p-accent-4: #8b5cf6; --p-accent-5: #3b8ef0; --p-accent-6: #ef4444; --p-accent-7: #84cc16; --p-accent-8: #f97316; } /* ── Colorful light (default + explicit) ── */ :root, html[data-style='colorful'] { --c-bg: #f8f7f5; --c-surface: #ffffff; --c-border: #ebebea; --c-muted: #70706c; --c-text: #1a1918; --c-text-sub: #6b6966; --c-dot: #e8e6e3; --c-nav-bg: rgba(248, 247, 245, 0.88); --c-accent: #06d6c8; --c-accent-2: #e8178a; --c-accent-3: #f0c000; /* Text/icons sitting ON a --c-accent fill. Never reuse --c-bg here: this accent is a bright cyan, so near-white on it is only 1.7:1. */ --c-on-accent: #04302c; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } /* ── Colorful dark ── */ :root[data-theme='dark'], html[data-style='colorful'][data-theme='dark'] { --c-bg: #0c0c0b; --c-surface: #161614; --c-border: #252422; --c-muted: #81817f; --c-text: #f0eeeb; --c-text-sub: #8a8884; --c-dot: #252422; --c-nav-bg: rgba(12, 12, 11, 0.88); --c-accent: #06d6c8; --c-accent-2: #e8178a; --c-accent-3: #f0c000; --c-on-accent: #04302c; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } /* ── Colorful dark (system preference) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]), html[data-style='colorful']:not([data-theme]) { --c-bg: #0c0c0b; --c-surface: #161614; --c-border: #252422; --c-muted: #81817f; --c-text: #f0eeeb; --c-text-sub: #8a8884; --c-dot: #252422; --c-nav-bg: rgba(12, 12, 11, 0.88); --c-accent: #06d6c8; --c-accent-2: #e8178a; --c-accent-3: #f0c000; --c-on-accent: #04302c; --c-grad-h1-from: var(--c-text); --c-grad-h1-mid: var(--c-accent); --c-grad-h1-to: var(--c-accent-2); } } /* ── Halo drift animations (colorful theme only) ── */ @keyframes halo-drift-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, -45px) scale(1.1); } 66% { transform: translate(-45px, 35px) scale(0.92); } } @keyframes halo-drift-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-55px, 48px) scale(1.09); } 72% { transform: translate(40px, -36px) scale(0.91); } } @keyframes halo-drift-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(50px, 52px) scale(1.08); } 65% { transform: translate(-42px, -30px) scale(0.93); } } @keyframes halo-drift-4 { 0%, 100% { transform: translate(0, 0) scale(1); } 45% { transform: translate(-48px, -50px) scale(1.1); } 78% { transform: translate(44px, 32px) scale(0.92); } } .halo-drift-1 { animation: halo-drift-1 9s ease-in-out infinite; } .halo-drift-2 { animation: halo-drift-2 11s ease-in-out infinite; } .halo-drift-3 { animation: halo-drift-3 10s ease-in-out infinite; } .halo-drift-4 { animation: halo-drift-4 12s ease-in-out infinite; } /* Reduced motion: hold the halos still. They're purely ambient, and their untransformed position is the intended resting layout, so stopping the animation leaves the composition intact rather than blank. */ @media (prefers-reduced-motion: reduce) { .halo-drift-1, .halo-drift-2, .halo-drift-3, .halo-drift-4 { animation: none; } }