:root { /* Base */ --bg-page: #000000; --bg-raised: #0d0d0d; --bg-card: #141414; --bg-card-2: #1a1a1a; --bg-inverse: #ffffff; --fg-1: #f2f2f2; --fg-2: #c5c5c5; --fg-3: #8f8f8f; --fg-inverse: #0a0a0a; --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); /* Gradient field (the only color moment) */ --grad-sky: #a8c4f0; --grad-lavender: #8e9bf5; --grad-indigo: #3d4fd8; --grad-deep: #1a2470; --gradient-hero: radial-gradient(120% 90% at 70% 20%, var(--grad-sky) 0%, var(--grad-lavender) 35%, var(--grad-indigo) 70%, var(--grad-deep) 100%); /* Semantic */ --surface-page: var(--bg-page); --surface-card: var(--bg-card); --text-heading: var(--fg-1); --text-body: var(--fg-2); --text-muted: var(--fg-3); --btn-primary-bg: #ffffff; --btn-primary-fg: #0a0a0a; --btn-secondary-bg: rgba(255, 255, 255, 0.12); --btn-secondary-fg: #ffffff; --link: #e8e8e8; --link-hover: #ffffff; /* Final-CTA gradient section (image chosen in JS per theme: assets/gradient-cta.png / gradient-cta-light.png) */ --cta-fg: #ffffff; --cta-fg-dim: rgba(255, 255, 255, 0.75); /* App-window (product demo) surfaces */ --win-bg: rgba(12, 12, 16, 0.88); --win-side: rgba(14, 14, 20, 0.72); --win-border: rgba(255, 255, 255, 0.12); --win-hair: rgba(255, 255, 255, 0.07); --win-chip: rgba(255, 255, 255, 0.06); --win-chip-border: rgba(255, 255, 255, 0.08); --win-bubble: rgba(255, 255, 255, 0.09); --win-add: #9ee6a8; --win-del: #f2a1a1; --win-add-bg: rgba(40, 200, 64, 0.08); --win-del-bg: rgba(255, 95, 87, 0.08); } /* Light theme — toggle with data-theme="light" on */ :root[data-theme="light"] { --bg-page: #ffffff; --bg-raised: #f5f5f4; --bg-card: #f6f6f5; --bg-card-2: #efefee; --bg-inverse: #0a0a0a; --fg-1: #0d0d0d; --fg-2: #3d3d3d; --fg-3: #6e6e6e; --fg-inverse: #ffffff; --border-subtle: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.18); --btn-primary-bg: #0a0a0a; --btn-primary-fg: #ffffff; --btn-secondary-bg: rgba(0, 0, 0, 0.06); --btn-secondary-fg: #0a0a0a; --link: #1a1a1a; --link-hover: #000000; --win-bg: rgba(255, 255, 255, 0.94); --cta-fg: #0f1330; --cta-fg-dim: rgba(15, 19, 48, 0.72); --win-side: rgba(247, 247, 248, 0.92); --win-border: rgba(0, 0, 0, 0.1); --win-hair: rgba(0, 0, 0, 0.07); --win-chip: rgba(0, 0, 0, 0.04); --win-chip-border: rgba(0, 0, 0, 0.07); --win-bubble: rgba(0, 0, 0, 0.06); --win-add: #1a7f37; --win-del: #c62828; --win-add-bg: rgba(26, 127, 55, 0.08); --win-del-bg: rgba(198, 40, 40, 0.08); }