/* ============================================================ NEUTRAL PALETTES — alternate themes for the neutral template. Activate via (set in head from data/site.yaml -> neutral.site_colors). Each palette overrides the tokens defined in neutral.css :root. ============================================================ */ /* ============================================================ Slate — cool gray-blue, modern editorial look. ============================================================ */ [data-theme="slate"] { --mn-bg: #e6ecf2; --mn-bg-glow-1: rgba(30, 64, 175, .10); --mn-bg-glow-2: rgba(71, 85, 105, .10); --mn-surface: #ffffff; --mn-surface-2: #f3f5f9; --mn-text: #0f172a; --mn-text-strong: #0b1220; --mn-muted: rgba(15, 23, 42, .64); --mn-border: rgba(15, 23, 42, .12); --mn-border-soft: rgba(15, 23, 42, .08); --mn-accent: #1e40af; --mn-accent-2: #0ea5e9; --mn-accent-ink: #ffffff; --mn-link: #1d4ed8; --mn-link-hover: #0c1a2b; --mn-shadow: 0 12px 30px rgba(15, 23, 42, .14); --mn-shadow-soft: 0 4px 14px rgba(15, 23, 42, .08); } /* ============================================================ Sage — soft green/cream, calm botanical feel. ============================================================ */ [data-theme="sage"] { --mn-bg: #eef1e8; --mn-bg-glow-1: rgba(22, 101, 52, .10); --mn-bg-glow-2: rgba(180, 142, 73, .12); --mn-surface: #fbfaf3; --mn-surface-2: #f3f1e7; --mn-text: #1e231b; --mn-text-strong: #11140f; --mn-muted: rgba(30, 35, 27, .65); --mn-border: rgba(30, 35, 27, .12); --mn-border-soft: rgba(30, 35, 27, .08); --mn-accent: #166534; --mn-accent-2: #b48e49; --mn-accent-ink: #ffffff; --mn-link: #166534; --mn-link-hover: #052e16; --mn-shadow: 0 12px 30px rgba(30, 35, 27, .12); --mn-shadow-soft: 0 4px 14px rgba(30, 35, 27, .08); } /* ============================================================ Ink — dark mode, off-black surfaces with warm-cream accent. ============================================================ */ [data-theme="ink"] { --mn-bg: #0d0f12; --mn-bg-glow-1: rgba(99, 102, 241, .18); --mn-bg-glow-2: rgba(20, 184, 166, .14); --mn-surface: #16191e; --mn-surface-2: #1c2026; --mn-text: #e6e7ea; --mn-text-strong: #f7f8fa; --mn-muted: rgba(230, 231, 234, .62); --mn-border: rgba(230, 231, 234, .12); --mn-border-soft: rgba(230, 231, 234, .07); --mn-accent: #818cf8; --mn-accent-2: #2dd4bf; --mn-accent-ink: #0d0f12; --mn-link: #a5b4fc; --mn-link-hover: #c7d2fe; --mn-shadow: 0 12px 30px rgba(0, 0, 0, .55); --mn-shadow-soft: 0 4px 14px rgba(0, 0, 0, .35); } [data-theme="ink"] html { color-scheme: dark; } [data-theme="ink"] body { color-scheme: dark; } /* ============================================================ Sand — warm desert tones, dual-accent gold + clay. ============================================================ */ [data-theme="sand"] { --mn-bg: #efe2cc; --mn-bg-glow-1: rgba(180, 83, 9, .14); --mn-bg-glow-2: rgba(120, 53, 15, .10); --mn-surface: #fdf6e7; --mn-surface-2: #f5e9d0; --mn-text: #2a1a08; --mn-text-strong: #1a0e02; --mn-muted: rgba(42, 26, 8, .65); --mn-border: rgba(42, 26, 8, .14); --mn-border-soft: rgba(42, 26, 8, .09); --mn-accent: #b45309; --mn-accent-2: #ca8a04; --mn-accent-ink: #fdf6e7; --mn-link: #92400e; --mn-link-hover: #451a03; --mn-shadow: 0 12px 30px rgba(42, 26, 8, .14); --mn-shadow-soft: 0 4px 14px rgba(42, 26, 8, .08); }