/** * themes.css — CSS custom properties for the three color themes. * * Theme is applied via [data-theme] on (set by theme-switcher.js) with * a graceful default from body.ci-theme-*. Everything else references these * variables, so adding a new theme = adding one more block here. */ :root { /* Brand accents (overridable from Customizer via inline CSS). */ --ci-accent: #7b61ff; --ci-accent-2: #00d4ff; --ci-radius: 16px; --ci-radius-sm: 10px; --ci-maxw: 1240px; --ci-gap: 24px; --ci-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ci-font-head: 'Sora', var(--ci-font); --ci-font-mono: 'JetBrains Mono', ui-monospace, monospace; --ci-ease: cubic-bezier(.22, 1, .36, 1); --ci-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); } /* ---------------- DARK (default) ---------------- */ :root, [data-theme="dark"] { --ci-bg: #0b0e17; --ci-bg-2: #121725; --ci-surface: rgba(255, 255, 255, .04); --ci-surface-2: rgba(255, 255, 255, .06); --ci-border: rgba(255, 255, 255, .10); --ci-text: #e8ecf5; --ci-text-dim: #9aa4bf; --ci-heading: #ffffff; --ci-glass-bg: rgba(20, 25, 40, .55); --ci-glass-brd: rgba(255, 255, 255, .12); --ci-glass-blur: 16px; --ci-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); color-scheme: dark; } /* ---------------- AMOLED BLACK ---------------- */ [data-theme="amoled"] { --ci-bg: #000000; --ci-bg-2: #060606; --ci-surface: rgba(255, 255, 255, .03); --ci-surface-2: rgba(255, 255, 255, .05); --ci-border: rgba(255, 255, 255, .08); --ci-text: #eaeaea; --ci-text-dim: #8a8a8a; --ci-heading: #ffffff; --ci-glass-bg: rgba(10, 10, 10, .6); --ci-glass-brd: rgba(255, 255, 255, .09); --ci-glass-blur: 14px; --ci-shadow: 0 10px 30px -14px rgba(0, 0, 0, .9); color-scheme: dark; } /* ---------------- LIGHT ---------------- */ [data-theme="light"] { --ci-bg: #f5f7fb; --ci-bg-2: #ffffff; --ci-surface: #ffffff; --ci-surface-2: #f0f3f9; --ci-border: rgba(15, 23, 42, .10); --ci-text: #1f2637; --ci-text-dim: #5a6479; --ci-heading: #0b1020; --ci-glass-bg: rgba(255, 255, 255, .65); --ci-glass-brd: rgba(15, 23, 42, .08); --ci-glass-blur: 14px; --ci-shadow: 0 10px 30px -16px rgba(15, 23, 42, .25); color-scheme: light; } /* Respect reduced motion + Customizer animation toggle. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }