/* ============================================================ THEMES — Dark mode + four color palettes ============================================================ Color modes are applied via [data-theme] on . Dark mode is applied via [data-mode="dark"] on . Both can combine: data-theme="ocean" data-mode="dark". ============================================================ */ /* ---------------------------------------------------------- DEFAULT DARK MODE Inverts the base theme when data-mode="dark" is set or when the user's OS prefers dark and no explicit preference has been saved. ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) { --color-ink: #e8e6e1; --color-paper: #121518; --color-muted: #9099a4; --color-border: rgba(255, 255, 255, 0.1); --color-surface: #1a1d22; --color-accent-soft: rgba(31, 90, 77, 0.2); --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.25); } } html[data-mode="dark"] { --color-ink: #e8e6e1; --color-paper: #121518; --color-muted: #9099a4; --color-border: rgba(255, 255, 255, 0.1); --color-surface: #1a1d22; --color-accent-soft: rgba(31, 90, 77, 0.2); --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.25); } /* Dark mode overrides for elements with hardcoded light colors */ @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) body { background: radial-gradient(circle at top right, rgba(184, 106, 61, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(36, 87, 214, 0.06), transparent 25%), linear-gradient(180deg, #161921 0%, var(--color-paper) 100%); } html:not([data-mode="light"]) .site-header { background: rgba(18, 21, 24, 0.82); border-bottom-color: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .surface-card, html:not([data-mode="light"]) .card { background: rgba(26, 29, 34, 0.85); } html:not([data-mode="light"]) .surface-card-accent { background: linear-gradient(180deg, rgba(31, 90, 77, 0.12), rgba(31, 90, 77, 0.04)); } html:not([data-mode="light"]) .button-secondary, html:not([data-mode="light"]) .topic-pills a { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .status-pill { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .signup-form input { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .site-footer { background: rgba(18, 21, 24, 0.45); } html:not([data-mode="light"]) .post-card-featured { background: linear-gradient(180deg, rgba(26, 29, 34, 0.92), rgba(26, 29, 34, 0.85)); } html:not([data-mode="light"]) .hero-home::before { background: radial-gradient(circle at top right, rgba(36, 87, 214, 0.08), transparent 30%), radial-gradient(circle at left center, rgba(31, 90, 77, 0.08), transparent 32%); } } html[data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(184, 106, 61, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(36, 87, 214, 0.06), transparent 25%), linear-gradient(180deg, #161921 0%, var(--color-paper) 100%); } html[data-mode="dark"] .site-header { background: rgba(18, 21, 24, 0.82); border-bottom-color: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .surface-card, html[data-mode="dark"] .card { background: rgba(26, 29, 34, 0.85); } html[data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(31, 90, 77, 0.12), rgba(31, 90, 77, 0.04)); } html[data-mode="dark"] .button-secondary, html[data-mode="dark"] .topic-pills a { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .status-pill { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .signup-form input { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .site-footer { background: rgba(18, 21, 24, 0.45); } html[data-mode="dark"] .post-card-featured { background: linear-gradient(180deg, rgba(26, 29, 34, 0.92), rgba(26, 29, 34, 0.85)); } html[data-mode="dark"] .hero-home::before { background: radial-gradient(circle at top right, rgba(36, 87, 214, 0.08), transparent 30%), radial-gradient(circle at left center, rgba(31, 90, 77, 0.08), transparent 32%); } /* =========================================================== THEME: SUMMER OCEAN BREEZE Palette: coral red, pale mint, light teal, slate blue, navy =========================================================== */ html[data-theme="ocean"] { --color-accent: #1a3a54; --color-accent-contrast: #f0f5f3; --color-accent-soft: rgba(26, 58, 84, 0.1); --color-highlight: #ef3e4a; --color-surface: #dce8d0; --color-paper: #f0f5f3; --color-ink: #1a3a54; --color-muted: #4e86a4; --color-border: rgba(26, 58, 84, 0.12); } html[data-theme="ocean"][data-mode="dark"] { --color-accent: #b0d4ce; --color-accent-contrast: #0e1e2e; --color-accent-soft: rgba(176, 212, 206, 0.12); --color-highlight: #ef3e4a; --color-surface: #162a3c; --color-paper: #0e1e2e; --color-ink: #dce8d0; --color-muted: #7caabb; --color-border: rgba(176, 212, 206, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="ocean"]:not([data-mode="light"]) { --color-accent: #b0d4ce; --color-accent-contrast: #0e1e2e; --color-accent-soft: rgba(176, 212, 206, 0.12); --color-highlight: #ef3e4a; --color-surface: #162a3c; --color-paper: #0e1e2e; --color-ink: #dce8d0; --color-muted: #7caabb; --color-border: rgba(176, 212, 206, 0.1); } } /* Ocean body gradients */ html[data-theme="ocean"]:not([data-mode="dark"]) body, html[data-theme="ocean"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(239, 62, 74, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(78, 134, 164, 0.08), transparent 25%), linear-gradient(180deg, #f4f8f5 0%, var(--color-paper) 100%); } html[data-theme="ocean"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(239, 62, 74, 0.05), transparent 22%), radial-gradient(circle at left 20%, rgba(78, 134, 164, 0.06), transparent 25%), linear-gradient(180deg, #121e2c 0%, var(--color-paper) 100%); } html[data-theme="ocean"] .surface-card-accent { background: linear-gradient(180deg, rgba(26, 58, 84, 0.08), rgba(26, 58, 84, 0.02)); } html[data-theme="ocean"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(176, 212, 206, 0.08), rgba(176, 212, 206, 0.02)); } html[data-theme="ocean"] .status-pill-live { background: rgba(26, 58, 84, 0.1); border-color: rgba(26, 58, 84, 0.2); } html[data-theme="ocean"] .hero-home::before { background: radial-gradient(circle at top right, rgba(239, 62, 74, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(78, 134, 164, 0.12), transparent 32%); } html[data-theme="ocean"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="ocean"] .experiment-card::before { background: linear-gradient(90deg, rgba(78, 134, 164, 0.35), rgba(78, 134, 164, 0)); } html[data-theme="ocean"] .product-card::before { background: linear-gradient(90deg, rgba(26, 58, 84, 0.35), rgba(26, 58, 84, 0)); } /* =========================================================== THEME: GOLDEN SUMMER FIELDS Palette: sage, light sage, cream, tan/caramel, warm orange =========================================================== */ html[data-theme="golden"] { --color-accent: #c47a28; --color-accent-contrast: #fefaf4; --color-accent-soft: rgba(196, 122, 40, 0.1); --color-highlight: #bab882; --color-surface: #ede5cc; --color-paper: #faf6ee; --color-ink: #3a3424; --color-muted: #8a7e64; --color-border: rgba(58, 52, 36, 0.12); } html[data-theme="golden"][data-mode="dark"] { --color-accent: #d89840; --color-accent-contrast: #1a1610; --color-accent-soft: rgba(216, 152, 64, 0.12); --color-highlight: #bab882; --color-surface: #22200a; --color-paper: #161410; --color-ink: #ede5cc; --color-muted: #a8996e; --color-border: rgba(237, 229, 204, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="golden"]:not([data-mode="light"]) { --color-accent: #d89840; --color-accent-contrast: #1a1610; --color-accent-soft: rgba(216, 152, 64, 0.12); --color-highlight: #bab882; --color-surface: #22200a; --color-paper: #161410; --color-ink: #ede5cc; --color-muted: #a8996e; --color-border: rgba(237, 229, 204, 0.1); } } html[data-theme="golden"]:not([data-mode="dark"]) body, html[data-theme="golden"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(196, 122, 40, 0.07), transparent 22%), radial-gradient(circle at left 20%, rgba(186, 184, 130, 0.08), transparent 25%), linear-gradient(180deg, #fdf9f0 0%, var(--color-paper) 100%); } html[data-theme="golden"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(196, 122, 40, 0.05), transparent 22%), radial-gradient(circle at left 20%, rgba(186, 184, 130, 0.04), transparent 25%), linear-gradient(180deg, #1a1810 0%, var(--color-paper) 100%); } html[data-theme="golden"] .surface-card-accent { background: linear-gradient(180deg, rgba(196, 122, 40, 0.08), rgba(196, 122, 40, 0.02)); } html[data-theme="golden"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(216, 152, 64, 0.08), rgba(216, 152, 64, 0.02)); } html[data-theme="golden"] .status-pill-live { background: rgba(196, 122, 40, 0.1); border-color: rgba(196, 122, 40, 0.2); } html[data-theme="golden"] .hero-home::before { background: radial-gradient(circle at top right, rgba(196, 122, 40, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(186, 184, 130, 0.12), transparent 32%); } html[data-theme="golden"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="golden"] .experiment-card::before { background: linear-gradient(90deg, rgba(186, 184, 130, 0.35), rgba(186, 184, 130, 0)); } html[data-theme="golden"] .product-card::before { background: linear-gradient(90deg, rgba(196, 122, 40, 0.35), rgba(196, 122, 40, 0)); } /* =========================================================== THEME: REFRESHING SUMMER Palette: sky blue, teal, dark teal, golden yellow, orange =========================================================== */ html[data-theme="summer"] { --color-accent: #1a4560; --color-accent-contrast: #f0f7fb; --color-accent-soft: rgba(26, 69, 96, 0.1); --color-highlight: #e8a820; --color-surface: #dceef6; --color-paper: #f0f7fb; --color-ink: #142e3e; --color-muted: #54889e; --color-border: rgba(26, 69, 96, 0.12); } html[data-theme="summer"][data-mode="dark"] { --color-accent: #6abcda; --color-accent-contrast: #0c1a24; --color-accent-soft: rgba(106, 188, 218, 0.12); --color-highlight: #e8a820; --color-surface: #12283a; --color-paper: #0c1a24; --color-ink: #dceef6; --color-muted: #6a9eb4; --color-border: rgba(106, 188, 218, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="summer"]:not([data-mode="light"]) { --color-accent: #6abcda; --color-accent-contrast: #0c1a24; --color-accent-soft: rgba(106, 188, 218, 0.12); --color-highlight: #e8a820; --color-surface: #12283a; --color-paper: #0c1a24; --color-ink: #dceef6; --color-muted: #6a9eb4; --color-border: rgba(106, 188, 218, 0.1); } } html[data-theme="summer"]:not([data-mode="dark"]) body, html[data-theme="summer"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(232, 168, 32, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(84, 184, 192, 0.08), transparent 25%), linear-gradient(180deg, #f4f9fc 0%, var(--color-paper) 100%); } html[data-theme="summer"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(232, 168, 32, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(84, 184, 192, 0.05), transparent 25%), linear-gradient(180deg, #101e28 0%, var(--color-paper) 100%); } html[data-theme="summer"] .surface-card-accent { background: linear-gradient(180deg, rgba(26, 69, 96, 0.08), rgba(26, 69, 96, 0.02)); } html[data-theme="summer"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(106, 188, 218, 0.08), rgba(106, 188, 218, 0.02)); } html[data-theme="summer"] .status-pill-live { background: rgba(26, 69, 96, 0.1); border-color: rgba(26, 69, 96, 0.2); } html[data-theme="summer"] .hero-home::before { background: radial-gradient(circle at top right, rgba(232, 168, 32, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(84, 184, 192, 0.12), transparent 32%); } html[data-theme="summer"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="summer"] .experiment-card::before { background: linear-gradient(90deg, rgba(84, 184, 192, 0.35), rgba(84, 184, 192, 0)); } html[data-theme="summer"] .product-card::before { background: linear-gradient(90deg, rgba(26, 69, 96, 0.35), rgba(26, 69, 96, 0)); } /* =========================================================== THEME: OLIVE GARDEN FEAST Palette: olive, dark forest, cream, warm khaki, copper =========================================================== */ html[data-theme="olive"] { --color-accent: #3a4a2a; --color-accent-contrast: #f4f2ea; --color-accent-soft: rgba(58, 74, 42, 0.1); --color-highlight: #a06840; --color-surface: #e4ddc8; --color-paper: #f4f2ea; --color-ink: #2a2a1e; --color-muted: #7a7a5a; --color-border: rgba(58, 74, 42, 0.12); } html[data-theme="olive"][data-mode="dark"] { --color-accent: #8a8c4e; --color-accent-contrast: #141410; --color-accent-soft: rgba(138, 140, 78, 0.12); --color-highlight: #a06840; --color-surface: #1e2218; --color-paper: #141410; --color-ink: #e4ddc8; --color-muted: #8a8a6a; --color-border: rgba(138, 140, 78, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="olive"]:not([data-mode="light"]) { --color-accent: #8a8c4e; --color-accent-contrast: #141410; --color-accent-soft: rgba(138, 140, 78, 0.12); --color-highlight: #a06840; --color-surface: #1e2218; --color-paper: #141410; --color-ink: #e4ddc8; --color-muted: #8a8a6a; --color-border: rgba(138, 140, 78, 0.1); } } html[data-theme="olive"]:not([data-mode="dark"]) body, html[data-theme="olive"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(160, 104, 64, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 140, 78, 0.08), transparent 25%), linear-gradient(180deg, #f6f4ec 0%, var(--color-paper) 100%); } html[data-theme="olive"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(160, 104, 64, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 140, 78, 0.04), transparent 25%), linear-gradient(180deg, #181814 0%, var(--color-paper) 100%); } html[data-theme="olive"] .surface-card-accent { background: linear-gradient(180deg, rgba(58, 74, 42, 0.08), rgba(58, 74, 42, 0.02)); } html[data-theme="olive"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(138, 140, 78, 0.08), rgba(138, 140, 78, 0.02)); } html[data-theme="olive"] .status-pill-live { background: rgba(58, 74, 42, 0.1); border-color: rgba(58, 74, 42, 0.2); } html[data-theme="olive"] .hero-home::before { background: radial-gradient(circle at top right, rgba(160, 104, 64, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(138, 140, 78, 0.12), transparent 32%); } html[data-theme="olive"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="olive"] .experiment-card::before { background: linear-gradient(90deg, rgba(138, 140, 78, 0.35), rgba(138, 140, 78, 0)); } html[data-theme="olive"] .product-card::before { background: linear-gradient(90deg, rgba(58, 74, 42, 0.35), rgba(58, 74, 42, 0)); } /* =========================================================== THEME: Rustic Earthy Tones Category: Warm & Earthy — A palette of natural, muted earth tones =========================================================== */ html[data-theme="rustic"] { --color-accent: #4a5a2e; --color-accent-contrast: #f2efe6; --color-accent-soft: rgba(74, 90, 46, 0.1); --color-highlight: #a08060; --color-surface: #ddd4ba; --color-paper: #f2efe6; --color-ink: #2e2a1e; --color-muted: #7a7254; --color-border: rgba(74, 90, 46, 0.12); } html[data-theme="rustic"][data-mode="dark"] { --color-accent: #8a9a5e; --color-accent-contrast: #14140e; --color-accent-soft: rgba(138, 154, 94, 0.12); --color-highlight: #a08060; --color-surface: #1e2218; --color-paper: #14140e; --color-ink: #ddd4ba; --color-muted: #8a8464; --color-border: rgba(138, 154, 94, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="rustic"]:not([data-mode="light"]) { --color-accent: #8a9a5e; --color-accent-contrast: #14140e; --color-accent-soft: rgba(138, 154, 94, 0.12); --color-highlight: #a08060; --color-surface: #1e2218; --color-paper: #14140e; --color-ink: #ddd4ba; --color-muted: #8a8464; --color-border: rgba(138, 154, 94, 0.1); } } html[data-theme="rustic"]:not([data-mode="dark"]) body, html[data-theme="rustic"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(160, 128, 96, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(122, 114, 84, 0.08), transparent 25%), linear-gradient(180deg, rgba(242, 239, 230, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="rustic"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(160, 128, 96, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 132, 100, 0.05), transparent 25%), linear-gradient(180deg, rgba(20, 20, 14, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="rustic"] .surface-card-accent { background: linear-gradient(180deg, rgba(74, 90, 46, 0.08), rgba(74, 90, 46, 0.02)); } html[data-theme="rustic"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(138, 154, 94, 0.08), rgba(138, 154, 94, 0.02)); } html[data-theme="rustic"] .status-pill-live { background: rgba(74, 90, 46, 0.1); border-color: rgba(74, 90, 46, 0.2); } html[data-theme="rustic"] .hero-home::before { background: radial-gradient(circle at top right, rgba(160, 128, 96, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(122, 114, 84, 0.12), transparent 32%); } html[data-theme="rustic"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="rustic"] .experiment-card::before { background: linear-gradient(90deg, rgba(122, 114, 84, 0.35), rgba(122, 114, 84, 0)); } html[data-theme="rustic"] .product-card::before { background: linear-gradient(90deg, rgba(74, 90, 46, 0.35), rgba(74, 90, 46, 0)); } html[data-theme="rustic"]:not([data-mode="dark"]) .site-header, html[data-theme="rustic"][data-mode="light"] .site-header { background: rgba(242, 239, 230, 0.82); } /* =========================================================== THEME: Warm Autumn Glow Category: Warm & Earthy — Rich autumn-inspired warm tones =========================================================== */ html[data-theme="autumn"] { --color-accent: #b83a20; --color-accent-contrast: #faf6ee; --color-accent-soft: rgba(184, 58, 32, 0.1); --color-highlight: #e8a020; --color-surface: #ecdcc0; --color-paper: #faf6ee; --color-ink: #1a1612; --color-muted: #8a6a48; --color-border: rgba(184, 58, 32, 0.12); } html[data-theme="autumn"][data-mode="dark"] { --color-accent: #e86848; --color-accent-contrast: #161210; --color-accent-soft: rgba(232, 104, 72, 0.12); --color-highlight: #e8a020; --color-surface: #221a14; --color-paper: #161210; --color-ink: #ecdcc0; --color-muted: #a88a60; --color-border: rgba(232, 104, 72, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="autumn"]:not([data-mode="light"]) { --color-accent: #e86848; --color-accent-contrast: #161210; --color-accent-soft: rgba(232, 104, 72, 0.12); --color-highlight: #e8a020; --color-surface: #221a14; --color-paper: #161210; --color-ink: #ecdcc0; --color-muted: #a88a60; --color-border: rgba(232, 104, 72, 0.1); } } html[data-theme="autumn"]:not([data-mode="dark"]) body, html[data-theme="autumn"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(232, 160, 32, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 106, 72, 0.08), transparent 25%), linear-gradient(180deg, rgba(250, 246, 238, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="autumn"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(232, 160, 32, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(168, 138, 96, 0.05), transparent 25%), linear-gradient(180deg, rgba(22, 18, 16, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="autumn"] .surface-card-accent { background: linear-gradient(180deg, rgba(184, 58, 32, 0.08), rgba(184, 58, 32, 0.02)); } html[data-theme="autumn"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(232, 104, 72, 0.08), rgba(232, 104, 72, 0.02)); } html[data-theme="autumn"] .status-pill-live { background: rgba(184, 58, 32, 0.1); border-color: rgba(184, 58, 32, 0.2); } html[data-theme="autumn"] .hero-home::before { background: radial-gradient(circle at top right, rgba(232, 160, 32, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(138, 106, 72, 0.12), transparent 32%); } html[data-theme="autumn"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="autumn"] .experiment-card::before { background: linear-gradient(90deg, rgba(138, 106, 72, 0.35), rgba(138, 106, 72, 0)); } html[data-theme="autumn"] .product-card::before { background: linear-gradient(90deg, rgba(184, 58, 32, 0.35), rgba(184, 58, 32, 0)); } html[data-theme="autumn"]:not([data-mode="dark"]) .site-header, html[data-theme="autumn"][data-mode="light"] .site-header { background: rgba(250, 246, 238, 0.82); } /* =========================================================== THEME: Neutral Earth Tones Category: Warm & Earthy — Balanced neutral earth palette =========================================================== */ html[data-theme="neutral"] { --color-accent: #2a3442; --color-accent-contrast: #f2efe8; --color-accent-soft: rgba(42, 52, 66, 0.1); --color-highlight: #8a7a60; --color-surface: #d8ccb4; --color-paper: #f2efe8; --color-ink: #1a1a18; --color-muted: #7a7468; --color-border: rgba(42, 52, 66, 0.12); } html[data-theme="neutral"][data-mode="dark"] { --color-accent: #a0aab8; --color-accent-contrast: #121416; --color-accent-soft: rgba(160, 170, 184, 0.12); --color-highlight: #8a7a60; --color-surface: #1e2028; --color-paper: #121416; --color-ink: #d8ccb4; --color-muted: #8a8a80; --color-border: rgba(160, 170, 184, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="neutral"]:not([data-mode="light"]) { --color-accent: #a0aab8; --color-accent-contrast: #121416; --color-accent-soft: rgba(160, 170, 184, 0.12); --color-highlight: #8a7a60; --color-surface: #1e2028; --color-paper: #121416; --color-ink: #d8ccb4; --color-muted: #8a8a80; --color-border: rgba(160, 170, 184, 0.1); } } html[data-theme="neutral"]:not([data-mode="dark"]) body, html[data-theme="neutral"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(138, 122, 96, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(122, 116, 104, 0.08), transparent 25%), linear-gradient(180deg, rgba(242, 239, 232, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="neutral"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(138, 122, 96, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 138, 128, 0.05), transparent 25%), linear-gradient(180deg, rgba(18, 20, 22, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="neutral"] .surface-card-accent { background: linear-gradient(180deg, rgba(42, 52, 66, 0.08), rgba(42, 52, 66, 0.02)); } html[data-theme="neutral"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(160, 170, 184, 0.08), rgba(160, 170, 184, 0.02)); } html[data-theme="neutral"] .status-pill-live { background: rgba(42, 52, 66, 0.1); border-color: rgba(42, 52, 66, 0.2); } html[data-theme="neutral"] .hero-home::before { background: radial-gradient(circle at top right, rgba(138, 122, 96, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(122, 116, 104, 0.12), transparent 32%); } html[data-theme="neutral"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="neutral"] .experiment-card::before { background: linear-gradient(90deg, rgba(122, 116, 104, 0.35), rgba(122, 116, 104, 0)); } html[data-theme="neutral"] .product-card::before { background: linear-gradient(90deg, rgba(42, 52, 66, 0.35), rgba(42, 52, 66, 0)); } html[data-theme="neutral"]:not([data-mode="dark"]) .site-header, html[data-theme="neutral"][data-mode="light"] .site-header { background: rgba(242, 239, 232, 0.82); } /* =========================================================== THEME: Earthy Tones Category: Warm & Earthy — Natural green-brown earth palette =========================================================== */ html[data-theme="earthy"] { --color-accent: #2e6e4a; --color-accent-contrast: #f4f2ea; --color-accent-soft: rgba(46, 110, 74, 0.1); --color-highlight: #c08a50; --color-surface: #e8e4d0; --color-paper: #f4f2ea; --color-ink: #1e2a1e; --color-muted: #6a7a58; --color-border: rgba(46, 110, 74, 0.12); } html[data-theme="earthy"][data-mode="dark"] { --color-accent: #5aaa6e; --color-accent-contrast: #12181a; --color-accent-soft: rgba(90, 170, 110, 0.12); --color-highlight: #c08a50; --color-surface: #1a2420; --color-paper: #12181a; --color-ink: #e8e4d0; --color-muted: #6a9a68; --color-border: rgba(90, 170, 110, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="earthy"]:not([data-mode="light"]) { --color-accent: #5aaa6e; --color-accent-contrast: #12181a; --color-accent-soft: rgba(90, 170, 110, 0.12); --color-highlight: #c08a50; --color-surface: #1a2420; --color-paper: #12181a; --color-ink: #e8e4d0; --color-muted: #6a9a68; --color-border: rgba(90, 170, 110, 0.1); } } html[data-theme="earthy"]:not([data-mode="dark"]) body, html[data-theme="earthy"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(192, 138, 80, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(106, 122, 88, 0.08), transparent 25%), linear-gradient(180deg, rgba(244, 242, 234, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="earthy"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(192, 138, 80, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(106, 154, 104, 0.05), transparent 25%), linear-gradient(180deg, rgba(18, 24, 26, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="earthy"] .surface-card-accent { background: linear-gradient(180deg, rgba(46, 110, 74, 0.08), rgba(46, 110, 74, 0.02)); } html[data-theme="earthy"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(90, 170, 110, 0.08), rgba(90, 170, 110, 0.02)); } html[data-theme="earthy"] .status-pill-live { background: rgba(46, 110, 74, 0.1); border-color: rgba(46, 110, 74, 0.2); } html[data-theme="earthy"] .hero-home::before { background: radial-gradient(circle at top right, rgba(192, 138, 80, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(106, 122, 88, 0.12), transparent 32%); } html[data-theme="earthy"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="earthy"] .experiment-card::before { background: linear-gradient(90deg, rgba(106, 122, 88, 0.35), rgba(106, 122, 88, 0)); } html[data-theme="earthy"] .product-card::before { background: linear-gradient(90deg, rgba(46, 110, 74, 0.35), rgba(46, 110, 74, 0)); } html[data-theme="earthy"]:not([data-mode="dark"]) .site-header, html[data-theme="earthy"][data-mode="light"] .site-header { background: rgba(244, 242, 234, 0.82); } /* =========================================================== THEME: Cool Coastal Vibes Category: Cool & Oceanic — Calm coastal blue-purple palette =========================================================== */ html[data-theme="coastal"] { --color-accent: #2a2040; --color-accent-contrast: #edeae6; --color-accent-soft: rgba(42, 32, 64, 0.1); --color-highlight: #c82a3a; --color-surface: #d8d4d0; --color-paper: #edeae6; --color-ink: #2a2040; --color-muted: #8a8eaa; --color-border: rgba(42, 32, 64, 0.12); } html[data-theme="coastal"][data-mode="dark"] { --color-accent: #b0a8c8; --color-accent-contrast: #141018; --color-accent-soft: rgba(176, 168, 200, 0.12); --color-highlight: #c82a3a; --color-surface: #201c2e; --color-paper: #141018; --color-ink: #dcd8d4; --color-muted: #8888a4; --color-border: rgba(176, 168, 200, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="coastal"]:not([data-mode="light"]) { --color-accent: #b0a8c8; --color-accent-contrast: #141018; --color-accent-soft: rgba(176, 168, 200, 0.12); --color-highlight: #c82a3a; --color-surface: #201c2e; --color-paper: #141018; --color-ink: #dcd8d4; --color-muted: #8888a4; --color-border: rgba(176, 168, 200, 0.1); } } html[data-theme="coastal"]:not([data-mode="dark"]) body, html[data-theme="coastal"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(200, 42, 58, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(138, 142, 170, 0.08), transparent 25%), linear-gradient(180deg, rgba(237, 234, 230, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="coastal"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(200, 42, 58, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(136, 136, 164, 0.05), transparent 25%), linear-gradient(180deg, rgba(20, 16, 24, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="coastal"] .surface-card-accent { background: linear-gradient(180deg, rgba(42, 32, 64, 0.08), rgba(42, 32, 64, 0.02)); } html[data-theme="coastal"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(176, 168, 200, 0.08), rgba(176, 168, 200, 0.02)); } html[data-theme="coastal"] .status-pill-live { background: rgba(42, 32, 64, 0.1); border-color: rgba(42, 32, 64, 0.2); } html[data-theme="coastal"] .hero-home::before { background: radial-gradient(circle at top right, rgba(200, 42, 58, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(138, 142, 170, 0.12), transparent 32%); } html[data-theme="coastal"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="coastal"] .experiment-card::before { background: linear-gradient(90deg, rgba(138, 142, 170, 0.35), rgba(138, 142, 170, 0)); } html[data-theme="coastal"] .product-card::before { background: linear-gradient(90deg, rgba(42, 32, 64, 0.35), rgba(42, 32, 64, 0)); } html[data-theme="coastal"]:not([data-mode="dark"]) .site-header, html[data-theme="coastal"][data-mode="light"] .site-header { background: rgba(237, 234, 230, 0.82); } /* =========================================================== THEME: Deep Sea Category: Cool & Oceanic — Deep ocean blue palette =========================================================== */ html[data-theme="deepsea"] { --color-accent: #142a40; --color-accent-contrast: #eaf0f4; --color-accent-soft: rgba(20, 42, 64, 0.1); --color-highlight: #0ea0d0; --color-surface: #d0dce4; --color-paper: #eaf0f4; --color-ink: #0e1a28; --color-muted: #4a7898; --color-border: rgba(20, 42, 64, 0.12); } html[data-theme="deepsea"][data-mode="dark"] { --color-accent: #40b0e0; --color-accent-contrast: #0a1420; --color-accent-soft: rgba(64, 176, 224, 0.12); --color-highlight: #0ea0d0; --color-surface: #102030; --color-paper: #0a1420; --color-ink: #d0dce4; --color-muted: #5a90b0; --color-border: rgba(64, 176, 224, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="deepsea"]:not([data-mode="light"]) { --color-accent: #40b0e0; --color-accent-contrast: #0a1420; --color-accent-soft: rgba(64, 176, 224, 0.12); --color-highlight: #0ea0d0; --color-surface: #102030; --color-paper: #0a1420; --color-ink: #d0dce4; --color-muted: #5a90b0; --color-border: rgba(64, 176, 224, 0.1); } } html[data-theme="deepsea"]:not([data-mode="dark"]) body, html[data-theme="deepsea"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(14, 160, 208, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(74, 120, 152, 0.08), transparent 25%), linear-gradient(180deg, rgba(234, 240, 244, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="deepsea"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(14, 160, 208, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(90, 144, 176, 0.05), transparent 25%), linear-gradient(180deg, rgba(10, 20, 32, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="deepsea"] .surface-card-accent { background: linear-gradient(180deg, rgba(20, 42, 64, 0.08), rgba(20, 42, 64, 0.02)); } html[data-theme="deepsea"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(64, 176, 224, 0.08), rgba(64, 176, 224, 0.02)); } html[data-theme="deepsea"] .status-pill-live { background: rgba(20, 42, 64, 0.1); border-color: rgba(20, 42, 64, 0.2); } html[data-theme="deepsea"] .hero-home::before { background: radial-gradient(circle at top right, rgba(14, 160, 208, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(74, 120, 152, 0.12), transparent 32%); } html[data-theme="deepsea"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="deepsea"] .experiment-card::before { background: linear-gradient(90deg, rgba(74, 120, 152, 0.35), rgba(74, 120, 152, 0)); } html[data-theme="deepsea"] .product-card::before { background: linear-gradient(90deg, rgba(20, 42, 64, 0.35), rgba(20, 42, 64, 0)); } html[data-theme="deepsea"]:not([data-mode="dark"]) .site-header, html[data-theme="deepsea"][data-mode="light"] .site-header { background: rgba(234, 240, 244, 0.82); } /* =========================================================== THEME: Candy Pop Category: Bold & Vibrant — Vibrant purple and teal palette =========================================================== */ html[data-theme="candy"] { --color-accent: #7a4ac0; --color-accent-contrast: #f8f4fc; --color-accent-soft: rgba(122, 74, 192, 0.1); --color-highlight: #20c8c8; --color-surface: #ede0f4; --color-paper: #f8f4fc; --color-ink: #2a1848; --color-muted: #8868a8; --color-border: rgba(122, 74, 192, 0.12); } html[data-theme="candy"][data-mode="dark"] { --color-accent: #b888e8; --color-accent-contrast: #161028; --color-accent-soft: rgba(184, 136, 232, 0.12); --color-highlight: #20c8c8; --color-surface: #221838; --color-paper: #161028; --color-ink: #ede0f4; --color-muted: #9878b8; --color-border: rgba(184, 136, 232, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="candy"]:not([data-mode="light"]) { --color-accent: #b888e8; --color-accent-contrast: #161028; --color-accent-soft: rgba(184, 136, 232, 0.12); --color-highlight: #20c8c8; --color-surface: #221838; --color-paper: #161028; --color-ink: #ede0f4; --color-muted: #9878b8; --color-border: rgba(184, 136, 232, 0.1); } } html[data-theme="candy"]:not([data-mode="dark"]) body, html[data-theme="candy"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(32, 200, 200, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(136, 104, 168, 0.08), transparent 25%), linear-gradient(180deg, rgba(248, 244, 252, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="candy"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(32, 200, 200, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(152, 120, 184, 0.05), transparent 25%), linear-gradient(180deg, rgba(22, 16, 40, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="candy"] .surface-card-accent { background: linear-gradient(180deg, rgba(122, 74, 192, 0.08), rgba(122, 74, 192, 0.02)); } html[data-theme="candy"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(184, 136, 232, 0.08), rgba(184, 136, 232, 0.02)); } html[data-theme="candy"] .status-pill-live { background: rgba(122, 74, 192, 0.1); border-color: rgba(122, 74, 192, 0.2); } html[data-theme="candy"] .hero-home::before { background: radial-gradient(circle at top right, rgba(32, 200, 200, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(136, 104, 168, 0.12), transparent 32%); } html[data-theme="candy"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="candy"] .experiment-card::before { background: linear-gradient(90deg, rgba(136, 104, 168, 0.35), rgba(136, 104, 168, 0)); } html[data-theme="candy"] .product-card::before { background: linear-gradient(90deg, rgba(122, 74, 192, 0.35), rgba(122, 74, 192, 0)); } html[data-theme="candy"]:not([data-mode="dark"]) .site-header, html[data-theme="candy"][data-mode="light"] .site-header { background: rgba(248, 244, 252, 0.82); } /* =========================================================== THEME: Watermelon Sorbet Category: Bold & Vibrant — Fresh teal and coral palette =========================================================== */ html[data-theme="watermelon"] { --color-accent: #0c3848; --color-accent-contrast: #eef6f4; --color-accent-soft: rgba(12, 56, 72, 0.1); --color-highlight: #e83060; --color-surface: #d4eae4; --color-paper: #eef6f4; --color-ink: #0c2830; --color-muted: #1898b8; --color-border: rgba(12, 56, 72, 0.12); } html[data-theme="watermelon"][data-mode="dark"] { --color-accent: #48c8b0; --color-accent-contrast: #0a1c24; --color-accent-soft: rgba(72, 200, 176, 0.12); --color-highlight: #e83060; --color-surface: #0e2830; --color-paper: #0a1c24; --color-ink: #d4eae4; --color-muted: #3a98a8; --color-border: rgba(72, 200, 176, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="watermelon"]:not([data-mode="light"]) { --color-accent: #48c8b0; --color-accent-contrast: #0a1c24; --color-accent-soft: rgba(72, 200, 176, 0.12); --color-highlight: #e83060; --color-surface: #0e2830; --color-paper: #0a1c24; --color-ink: #d4eae4; --color-muted: #3a98a8; --color-border: rgba(72, 200, 176, 0.1); } } html[data-theme="watermelon"]:not([data-mode="dark"]) body, html[data-theme="watermelon"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(232, 48, 96, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(24, 152, 184, 0.08), transparent 25%), linear-gradient(180deg, rgba(238, 246, 244, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="watermelon"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(232, 48, 96, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(58, 152, 168, 0.05), transparent 25%), linear-gradient(180deg, rgba(10, 28, 36, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="watermelon"] .surface-card-accent { background: linear-gradient(180deg, rgba(12, 56, 72, 0.08), rgba(12, 56, 72, 0.02)); } html[data-theme="watermelon"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(72, 200, 176, 0.08), rgba(72, 200, 176, 0.02)); } html[data-theme="watermelon"] .status-pill-live { background: rgba(12, 56, 72, 0.1); border-color: rgba(12, 56, 72, 0.2); } html[data-theme="watermelon"] .hero-home::before { background: radial-gradient(circle at top right, rgba(232, 48, 96, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(24, 152, 184, 0.12), transparent 32%); } html[data-theme="watermelon"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="watermelon"] .experiment-card::before { background: linear-gradient(90deg, rgba(24, 152, 184, 0.35), rgba(24, 152, 184, 0)); } html[data-theme="watermelon"] .product-card::before { background: linear-gradient(90deg, rgba(12, 56, 72, 0.35), rgba(12, 56, 72, 0)); } html[data-theme="watermelon"]:not([data-mode="dark"]) .site-header, html[data-theme="watermelon"][data-mode="light"] .site-header { background: rgba(238, 246, 244, 0.82); } /* =========================================================== THEME: Purple Raindrops Category: Bold & Vibrant — Deep purple and coral palette =========================================================== */ html[data-theme="raindrops"] { --color-accent: #2a1060; --color-accent-contrast: #f2eef8; --color-accent-soft: rgba(42, 16, 96, 0.1); --color-highlight: #e83070; --color-surface: #dcd0f0; --color-paper: #f2eef8; --color-ink: #1a0e38; --color-muted: #7858a8; --color-border: rgba(42, 16, 96, 0.12); } html[data-theme="raindrops"][data-mode="dark"] { --color-accent: #a888e0; --color-accent-contrast: #140e28; --color-accent-soft: rgba(168, 136, 224, 0.12); --color-highlight: #e83070; --color-surface: #1e1440; --color-paper: #140e28; --color-ink: #dcd0f0; --color-muted: #8868b0; --color-border: rgba(168, 136, 224, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="raindrops"]:not([data-mode="light"]) { --color-accent: #a888e0; --color-accent-contrast: #140e28; --color-accent-soft: rgba(168, 136, 224, 0.12); --color-highlight: #e83070; --color-surface: #1e1440; --color-paper: #140e28; --color-ink: #dcd0f0; --color-muted: #8868b0; --color-border: rgba(168, 136, 224, 0.1); } } html[data-theme="raindrops"]:not([data-mode="dark"]) body, html[data-theme="raindrops"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(232, 48, 112, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(120, 88, 168, 0.08), transparent 25%), linear-gradient(180deg, rgba(242, 238, 248, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="raindrops"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(232, 48, 112, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(136, 104, 176, 0.05), transparent 25%), linear-gradient(180deg, rgba(20, 14, 40, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="raindrops"] .surface-card-accent { background: linear-gradient(180deg, rgba(42, 16, 96, 0.08), rgba(42, 16, 96, 0.02)); } html[data-theme="raindrops"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(168, 136, 224, 0.08), rgba(168, 136, 224, 0.02)); } html[data-theme="raindrops"] .status-pill-live { background: rgba(42, 16, 96, 0.1); border-color: rgba(42, 16, 96, 0.2); } html[data-theme="raindrops"] .hero-home::before { background: radial-gradient(circle at top right, rgba(232, 48, 112, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(120, 88, 168, 0.12), transparent 32%); } html[data-theme="raindrops"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="raindrops"] .experiment-card::before { background: linear-gradient(90deg, rgba(120, 88, 168, 0.35), rgba(120, 88, 168, 0)); } html[data-theme="raindrops"] .product-card::before { background: linear-gradient(90deg, rgba(42, 16, 96, 0.35), rgba(42, 16, 96, 0)); } html[data-theme="raindrops"]:not([data-mode="dark"]) .site-header, html[data-theme="raindrops"][data-mode="light"] .site-header { background: rgba(242, 238, 248, 0.82); } /* =========================================================== THEME: Soft Peachy Delight Category: Soft & Pastel — Warm peachy and soft green palette =========================================================== */ html[data-theme="peachy"] { --color-accent: #c07058; --color-accent-contrast: #fdf6f2; --color-accent-soft: rgba(192, 112, 88, 0.1); --color-highlight: #8aaa80; --color-surface: #f4dcd0; --color-paper: #fdf6f2; --color-ink: #3a2820; --color-muted: #a88878; --color-border: rgba(192, 112, 88, 0.12); } html[data-theme="peachy"][data-mode="dark"] { --color-accent: #d8988a; --color-accent-contrast: #1e1614; --color-accent-soft: rgba(216, 152, 138, 0.12); --color-highlight: #8aaa80; --color-surface: #2a1e1a; --color-paper: #1e1614; --color-ink: #f4dcd0; --color-muted: #b09888; --color-border: rgba(216, 152, 138, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="peachy"]:not([data-mode="light"]) { --color-accent: #d8988a; --color-accent-contrast: #1e1614; --color-accent-soft: rgba(216, 152, 138, 0.12); --color-highlight: #8aaa80; --color-surface: #2a1e1a; --color-paper: #1e1614; --color-ink: #f4dcd0; --color-muted: #b09888; --color-border: rgba(216, 152, 138, 0.1); } } html[data-theme="peachy"]:not([data-mode="dark"]) body, html[data-theme="peachy"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(138, 170, 128, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(168, 136, 120, 0.08), transparent 25%), linear-gradient(180deg, rgba(253, 246, 242, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="peachy"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(138, 170, 128, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(176, 152, 136, 0.05), transparent 25%), linear-gradient(180deg, rgba(30, 22, 20, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="peachy"] .surface-card-accent { background: linear-gradient(180deg, rgba(192, 112, 88, 0.08), rgba(192, 112, 88, 0.02)); } html[data-theme="peachy"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(216, 152, 138, 0.08), rgba(216, 152, 138, 0.02)); } html[data-theme="peachy"] .status-pill-live { background: rgba(192, 112, 88, 0.1); border-color: rgba(192, 112, 88, 0.2); } html[data-theme="peachy"] .hero-home::before { background: radial-gradient(circle at top right, rgba(138, 170, 128, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(168, 136, 120, 0.12), transparent 32%); } html[data-theme="peachy"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="peachy"] .experiment-card::before { background: linear-gradient(90deg, rgba(168, 136, 120, 0.35), rgba(168, 136, 120, 0)); } html[data-theme="peachy"] .product-card::before { background: linear-gradient(90deg, rgba(192, 112, 88, 0.35), rgba(192, 112, 88, 0)); } html[data-theme="peachy"]:not([data-mode="dark"]) .site-header, html[data-theme="peachy"][data-mode="light"] .site-header { background: rgba(253, 246, 242, 0.82); } /* =========================================================== THEME: Peach Sorbet Category: Soft & Pastel — Calm blue and warm peach palette =========================================================== */ html[data-theme="sorbet"] { --color-accent: #3868c8; --color-accent-contrast: #f4f0ee; --color-accent-soft: rgba(56, 104, 200, 0.1); --color-highlight: #e8a090; --color-surface: #e0d4d0; --color-paper: #f4f0ee; --color-ink: #1e2440; --color-muted: #7080a8; --color-border: rgba(56, 104, 200, 0.12); } html[data-theme="sorbet"][data-mode="dark"] { --color-accent: #6898e8; --color-accent-contrast: #141828; --color-accent-soft: rgba(104, 152, 232, 0.12); --color-highlight: #e8a090; --color-surface: #1e2238; --color-paper: #141828; --color-ink: #e8dcd8; --color-muted: #6880a8; --color-border: rgba(104, 152, 232, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="sorbet"]:not([data-mode="light"]) { --color-accent: #6898e8; --color-accent-contrast: #141828; --color-accent-soft: rgba(104, 152, 232, 0.12); --color-highlight: #e8a090; --color-surface: #1e2238; --color-paper: #141828; --color-ink: #e8dcd8; --color-muted: #6880a8; --color-border: rgba(104, 152, 232, 0.1); } } html[data-theme="sorbet"]:not([data-mode="dark"]) body, html[data-theme="sorbet"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(232, 160, 144, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(112, 128, 168, 0.08), transparent 25%), linear-gradient(180deg, rgba(244, 240, 238, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="sorbet"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(232, 160, 144, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(104, 128, 168, 0.05), transparent 25%), linear-gradient(180deg, rgba(20, 24, 40, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="sorbet"] .surface-card-accent { background: linear-gradient(180deg, rgba(56, 104, 200, 0.08), rgba(56, 104, 200, 0.02)); } html[data-theme="sorbet"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(104, 152, 232, 0.08), rgba(104, 152, 232, 0.02)); } html[data-theme="sorbet"] .status-pill-live { background: rgba(56, 104, 200, 0.1); border-color: rgba(56, 104, 200, 0.2); } html[data-theme="sorbet"] .hero-home::before { background: radial-gradient(circle at top right, rgba(232, 160, 144, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(112, 128, 168, 0.12), transparent 32%); } html[data-theme="sorbet"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="sorbet"] .experiment-card::before { background: linear-gradient(90deg, rgba(112, 128, 168, 0.35), rgba(112, 128, 168, 0)); } html[data-theme="sorbet"] .product-card::before { background: linear-gradient(90deg, rgba(56, 104, 200, 0.35), rgba(56, 104, 200, 0)); } html[data-theme="sorbet"]:not([data-mode="dark"]) .site-header, html[data-theme="sorbet"][data-mode="light"] .site-header { background: rgba(244, 240, 238, 0.82); } /* =========================================================== THEME: Purple Dream Category: Soft & Pastel — Serene purple and lavender palette =========================================================== */ html[data-theme="dream"] { --color-accent: #5040a0; --color-accent-contrast: #f0eef6; --color-accent-soft: rgba(80, 64, 160, 0.1); --color-highlight: #a898d0; --color-surface: #dcd4e8; --color-paper: #f0eef6; --color-ink: #1a1040; --color-muted: #7868b8; --color-border: rgba(80, 64, 160, 0.12); } html[data-theme="dream"][data-mode="dark"] { --color-accent: #a090d8; --color-accent-contrast: #141028; --color-accent-soft: rgba(160, 144, 216, 0.12); --color-highlight: #a898d0; --color-surface: #1e1838; --color-paper: #141028; --color-ink: #dcd4e8; --color-muted: #8878b8; --color-border: rgba(160, 144, 216, 0.1); } @media (prefers-color-scheme: dark) { html[data-theme="dream"]:not([data-mode="light"]) { --color-accent: #a090d8; --color-accent-contrast: #141028; --color-accent-soft: rgba(160, 144, 216, 0.12); --color-highlight: #a898d0; --color-surface: #1e1838; --color-paper: #141028; --color-ink: #dcd4e8; --color-muted: #8878b8; --color-border: rgba(160, 144, 216, 0.1); } } html[data-theme="dream"]:not([data-mode="dark"]) body, html[data-theme="dream"][data-mode="light"] body { background: radial-gradient(circle at top right, rgba(168, 152, 208, 0.06), transparent 22%), radial-gradient(circle at left 20%, rgba(120, 104, 184, 0.08), transparent 25%), linear-gradient(180deg, rgba(240, 238, 246, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="dream"][data-mode="dark"] body { background: radial-gradient(circle at top right, rgba(168, 152, 208, 0.04), transparent 22%), radial-gradient(circle at left 20%, rgba(136, 120, 184, 0.05), transparent 25%), linear-gradient(180deg, rgba(20, 16, 40, 0.8) 0%, var(--color-paper) 100%); } html[data-theme="dream"] .surface-card-accent { background: linear-gradient(180deg, rgba(80, 64, 160, 0.08), rgba(80, 64, 160, 0.02)); } html[data-theme="dream"][data-mode="dark"] .surface-card-accent { background: linear-gradient(180deg, rgba(160, 144, 216, 0.08), rgba(160, 144, 216, 0.02)); } html[data-theme="dream"] .status-pill-live { background: rgba(80, 64, 160, 0.1); border-color: rgba(80, 64, 160, 0.2); } html[data-theme="dream"] .hero-home::before { background: radial-gradient(circle at top right, rgba(168, 152, 208, 0.1), transparent 30%), radial-gradient(circle at left center, rgba(120, 104, 184, 0.12), transparent 32%); } html[data-theme="dream"] .hero-aside::before { background: linear-gradient(90deg, var(--color-accent), var(--color-highlight)); } html[data-theme="dream"] .experiment-card::before { background: linear-gradient(90deg, rgba(120, 104, 184, 0.35), rgba(120, 104, 184, 0)); } html[data-theme="dream"] .product-card::before { background: linear-gradient(90deg, rgba(80, 64, 160, 0.35), rgba(80, 64, 160, 0)); } html[data-theme="dream"]:not([data-mode="dark"]) .site-header, html[data-theme="dream"][data-mode="light"] .site-header { background: rgba(240, 238, 246, 0.82); } /* =========================================================== SHARED DARK-MODE OVERRIDES FOR ALL THEMES These catch the element-level styles that use hardcoded rgba(255,255,255,...) or similar values. =========================================================== */ html[data-mode="dark"] .surface-card, html[data-mode="dark"] .card { background: rgba(255, 255, 255, 0.04); border-color: var(--color-border); } html[data-mode="dark"] .button-secondary, html[data-mode="dark"] .topic-pills a { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .status-pill { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .signup-form input { background: rgba(255, 255, 255, 0.06); } html[data-mode="dark"] .site-footer { background: rgba(0, 0, 0, 0.2); } html[data-mode="dark"] .post-card-featured { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); } html[data-mode="dark"] .site-header { background: color-mix(in srgb, var(--color-paper) 82%, transparent); border-bottom-color: var(--color-border); } @media (prefers-color-scheme: dark) { html:not([data-mode="light"]) .surface-card, html:not([data-mode="light"]) .card { background: rgba(255, 255, 255, 0.04); border-color: var(--color-border); } html:not([data-mode="light"]) .button-secondary, html:not([data-mode="light"]) .topic-pills a { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .status-pill { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .signup-form input { background: rgba(255, 255, 255, 0.06); } html:not([data-mode="light"]) .site-footer { background: rgba(0, 0, 0, 0.2); } html:not([data-mode="light"]) .post-card-featured { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); } html:not([data-mode="light"]) .site-header { background: color-mix(in srgb, var(--color-paper) 82%, transparent); border-bottom-color: var(--color-border); } } /* =========================================================== LIGHT-MODE SITE HEADER for themed palettes The header needs to match each palette's paper color. =========================================================== */ html[data-theme="ocean"]:not([data-mode="dark"]) .site-header, html[data-theme="ocean"][data-mode="light"] .site-header { background: rgba(240, 245, 243, 0.82); } html[data-theme="golden"]:not([data-mode="dark"]) .site-header, html[data-theme="golden"][data-mode="light"] .site-header { background: rgba(250, 246, 238, 0.82); } html[data-theme="summer"]:not([data-mode="dark"]) .site-header, html[data-theme="summer"][data-mode="light"] .site-header { background: rgba(240, 247, 251, 0.82); } html[data-theme="olive"]:not([data-mode="dark"]) .site-header, html[data-theme="olive"][data-mode="light"] .site-header { background: rgba(244, 242, 234, 0.82); } /* =========================================================== THEME SWITCHER UI =========================================================== */ .theme-switcher { position: relative; display: flex; align-items: center; gap: var(--space-2); } .theme-switcher-toggle { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; } .theme-switcher-toggle:hover { color: var(--color-ink); border-color: var(--color-ink); } .theme-switcher-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-panel { display: none; position: absolute; top: calc(100% + var(--space-3)); right: 0; z-index: 40; min-width: 200px; max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-paper); box-shadow: var(--shadow-soft); } .theme-panel.is-open { display: block; } .theme-panel-section { padding: var(--space-2) 0; } .theme-panel-section + .theme-panel-section { border-top: 1px solid var(--color-border); } .theme-panel-label { display: block; padding: var(--space-1) var(--space-2); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); } .theme-panel-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); font: inherit; font-size: 0.9rem; cursor: pointer; text-align: left; } .theme-panel-btn:hover { background: var(--color-accent-soft); } .theme-panel-btn.is-active { color: var(--color-accent); font-weight: 600; } .theme-panel-swatch { display: inline-flex; gap: 2px; flex-shrink: 0; } .theme-panel-swatch span { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.08); } /* Smooth transition for mode / theme changes */ html { transition: background-color 0.3s ease, color 0.3s ease; } body, .site-header, .surface-card, .card, .button-secondary, .topic-pills a, .signup-form input, .site-footer, .post-card-featured { transition: background 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }