/* ═══════════════════════════════════════════════════════════ COLORFUL THEME Default theme — no attribute needed on . Also activated explicitly via data-style="colorful". The status tokens (--p-info/success/warn/danger/on-accent), the eight --p-accent-* slots, and the .halo-drift-* animations used to live in this file — they were never colorful-specific, every theme redefines the tokens under its own selector and shares the same keyframes, so they now live in base.css. This file only carries colorful's own :root colour defaults (light/dark/system) and Colorful-specific styling for shaped classes. ── */ /* ── 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); /* Elevation tokens: Colorful's voice is soft modern shadows, which base.css's neutral defaults already express correctly — inherit them rather than duplicate. */ /* Border width: inherit from base.css (1px/1px/2px/3px scale fits Colorful's refined aesthetic). */ /* Motion: inherit from base.css (0.15s fast/0.25s base/0.7s slow timing matches Colorful's smooth, interactive feel). */ } /* ── 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); } } /* ══════════════════════════════════════════════════════════ COLORFUL — shaped element classes ══════════════════════════════════════════════════════════ */ /* ── Media / image frame ── Colorful uses soft shadow + hairline ring: the --r-md radius, a gentle elevation shadow, and a subtle accent-tinted border to frame photos. ── */ html[data-style='colorful'] .media, html[data-style='colorful'] img.media { border: var(--bw-hair) solid var(--c-border); box-shadow: var(--e-surface); } /* ── Divider ── Colorful uses the accent gradient (as appears in .gradient-text) to create a vivid, directional separator that feels alive rather than structural. Soft fade at the edges so it never dominates. ── */ html[data-style='colorful'] .divider { height: 1px; margin: var(--sp-6) 0; border: none; background: linear-gradient( 90deg, transparent 0%, var(--c-accent) 20%, var(--c-accent) 80%, transparent 100% ); } html[data-style='colorful'] .divider-soft { background: linear-gradient( 90deg, transparent 0%, color-mix(in srgb, var(--c-accent) 50%, transparent) 20%, color-mix(in srgb, var(--c-accent) 50%, transparent) 80%, transparent 100% ); } /* ── Segmented control ── The .segmented container and .segment buttons are shaped in base.css; Colorful inherits the default voice (surface background, accent fill on pressed, smooth transitions) — no overrides needed. The accent fill on pressed already reads as Colorful's signature vivid accent. ── */ /* ── Pull quote ── Base.css defines the structure (left border at --bw-thick, mark and author styling). Colorful inherits the default voice — the accent-tinted left edge and quote mark already express Colorful's palette. ── */ /* ── Card (compact variant) ── Base.css defines .card-compact with padding override (sp-4 sp-6). Colorful inherits the default styling — no overrides needed; the padding and inherited border/shadow voice are already correct. ── */