:root { /* Surfaces */ --color-surface: #ffffff; --color-surface-muted: #f5f5f5; --color-surface-hover: #f0f0f0; --color-surface-inverted: #000000; --color-surface-inverted-hover: #1a1a1a; /* Foreground */ --color-foreground: #000000; --color-foreground-secondary: rgba(0, 0, 0, 0.5); --color-foreground-muted: rgba(0, 0, 0, 0.2); --color-foreground-inverted: #ffffff; --color-foreground-inverted-secondary: rgba(255, 255, 255, 0.5); --color-foreground-accent: #C1FF23; /* Accent */ --color-accent: #C1FF23; --color-accent-hover: #CCFF4A; --color-accent-active: #91C216; --color-accent-muted: rgba(193, 255, 35, 0.15); /* Text */ --color-text: #000000; --color-text-secondary: rgba(0, 0, 0, 0.6); --color-text-muted: rgba(0, 0, 0, 0.2); --color-text-link: #C1FF23; --color-text-link-hover: #8AC003; --color-text-inverted: #ffffff; --color-text-inverted-secondary: rgba(255, 255, 255, 0.5); --color-text-link-inverted: #C1FF23; --color-text-link-inverted-hover: #D2FF60; /* Borders */ --color-border: #000000; --color-border-secondary: rgba(0, 0, 0, 0.5); --color-border-muted: rgba(0, 0, 0, 0.2); --color-border-focus: #C1FF23; --color-border-inverted: #ffffff; --color-border-inverted-secondary: rgba(255, 255, 255, 0.5); /* Additional accent & category */ --color-accent-vibrant: #C1FF23; --color-secondary: #6D20D4; --color-secondary-hover: #5A1AB0; --color-secondary-muted: rgba(109, 32, 212, 0.16); --color-tertiary: #C1FF23; --color-tertiary-hover: #A8E01E; --color-tertiary-muted: rgba(193, 255, 35, 0.16); /* Divider */ --color-divider: #e5e5e5; /* Overlays */ --color-overlay: rgba(0, 0, 0, 0.5); /* Overlay RGB components — use with rgba(var(--overlay-*-rgb), opacity) in gradients */ --overlay-black-rgb: 0, 0, 0; --overlay-near-black-rgb: 15, 15, 15; --overlay-film-rgb: 26, 25, 23; } /* Optional helpers for sections that explicitly swap context */ [data-surface="default"] { --surface-bg: var(--color-surface); --surface-fg: var(--color-text); --surface-fg-secondary: var(--color-text-secondary); --surface-fg-muted: var(--color-text-muted); --surface-link: var(--color-text-link); --surface-link-hover: var(--color-text-link-hover); --surface-border: var(--color-border); --surface-border-secondary: var(--color-border-secondary); --surface-border-muted: var(--color-border-muted); } [data-surface="inverted"] { --surface-bg: var(--color-surface-inverted); --surface-fg: var(--color-text-inverted); --surface-fg-secondary: var(--color-text-inverted-secondary); --surface-fg-muted: var(--color-text-inverted-secondary); --surface-link: var(--color-text-link-inverted); --surface-link-hover: var(--color-text-link-inverted-hover); --surface-border: var(--color-border-inverted); --surface-border-secondary: var(--color-border-inverted-secondary); --surface-border-muted: rgba(255, 255, 255, 0.18); } /* ── Finished-edition color overrides ──────────────────────────────── */ /* Activated by data-edition-status="finished" on */ [data-edition-status="finished"] { /* Surfaces */ --color-surface: #E6D9C0; --color-surface-hover: #F6E9D1; --color-surface-muted: #D6CAB3; --color-surface-inverted: #1C1B1A; --color-surface-inverted-hover: #232120; /* Accent */ --color-accent: #89403C; --color-accent-vibrant: #C5625D; --color-accent-hover: #A14A45; --color-accent-active: #A55553; --color-accent-muted: rgba(137, 64, 60, 0.15); /* Text */ --color-text: #262523; --color-text-secondary: rgba(38, 37, 35, 0.6); --color-text-muted: rgba(38, 37, 35, 0.2); --color-text-link: #89403C; --color-text-link-hover: #9A4844; --color-text-inverted: #E6D9C0; --color-text-inverted-secondary: rgba(230, 217, 192, 0.5); --color-text-link-inverted: #C5625D; --color-text-link-inverted-hover: #CF706B; /* Borders */ --color-border: #262523; --color-border-secondary: rgba(38, 37, 35, 0.5); --color-border-muted: rgba(38, 37, 35, 0.2); --color-border-focus: #89403C; --color-border-inverted: #E6D9C0; --color-border-inverted-secondary: rgba(230, 217, 192, 0.5); /* Foreground */ --color-foreground: #262523; --color-foreground-secondary: rgba(38, 37, 35, 0.5); --color-foreground-muted: rgba(38, 37, 35, 0.2); --color-foreground-inverted: #E6D9C0; --color-foreground-inverted-secondary: rgba(230, 217, 192, 0.5); --color-foreground-accent: #89403C; /* Secondary */ --color-secondary: #333966; --color-secondary-hover: #6B4F32; --color-secondary-muted: rgba(122, 92, 58, 0.15); /* Tertiary */ --color-tertiary: #FFAA19; --color-tertiary-hover: #E59A15; --color-tertiary-muted: rgba(255, 170, 25, 0.15); /* Overlay RGB */ --overlay-film-rgb: 28, 27, 26; }