/* ============================================================ THEMES.CSS — All theme definitions as CSS custom properties. Applied via data-theme="" on . Available themes: light-yeti and dark-yeti. To add a new theme: add a [data-theme=""] block here and handle the cycle in index.html / options.js. ============================================================ */ /* ── Light Yeti ───────────────────────────────────────────── */ /* Warm paper aesthetic. No gradients. No rounded corners. No soft shadows. Courier New everywhere. Heavy ink borders. */ [data-theme="light-yeti"] { /* Backgrounds — use original light theme palette */ --bg: #FFFEF2; --bg-alt: #F4F3E2; --bg-card: #FAFAE8; --bg-footer: #1a1a1a; /* Borders */ --border: #1a1a1a; --border-mid: #1a1a1a; /* Text */ --text: #1a1a1a; --text-body: #444444; --text-muted: #777777; --text-subtle: #1a1a1a; --text-faint: #777777; /* Accent */ --accent: #1a1a1a; --accent-soft: #444444; /* Buttons */ --btn-pri-bg: #1a1a1a; --btn-pri-color: #f5f0e8; --btn-ghost-color: #444444; --btn-ghost-border: #1a1a1a; --btn-ghost-hover: #1a1a1a; --btn-ghost-hover-c: #f5f0e8; /* Nav */ --nav-blur-bg: #1a1a1a; --nav-mobile-bg: #1a1a1a; /* Misc */ --step-divider: #1a1a1a; --grid-gap: #1a1a1a; --hamburger: #f5f0e8; --noise: 0; /* Landscape gradient — solid ink strip */ --land-1: #1a1a1a; --land-2: #2a2a2a; --land-3: #1a1a1a; /* Transitions */ --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; /* Options-page specific */ --opt-body-bg: #FFFEF2; --opt-header-border: #1a1a1a; --opt-input-bg: #FFFEF2; --opt-input-border: #1a1a1a; --opt-input-color: #1a1a1a; --opt-input-ph: #777777; --opt-logo-color: #1a1a1a; --opt-section-title: #1a1a1a; --opt-section-desc: #444444; --opt-stat-color: #444444; --opt-subtitle: #777777; --opt-toggle-off-bg: #777777; --opt-action-color: #1a1a1a; --opt-action-hover: #444444; --opt-danger-border: #1a1a1a; --opt-danger-color: #1a1a1a; --opt-danger-hover-bg: #F4F3E2; --opt-danger-hover-border: #1a1a1a; --opt-theme-label: #444444; } /* ── Dark Yeti ────────────────────────────────────────────── */ /* Ink-dark base, paper typography and borders. Same rules as Light Yeti — Courier New, hard edges, stamp shadows — but the colour roles are flipped (paper becomes ink, ink becomes paper). */ [data-theme="dark-yeti"] { /* Backgrounds — warm ink-dark base */ --bg: #1a1918; --bg-alt: #242220; --bg-card: #2e2c28; --bg-footer: #FFFEF2; /* Borders — cream/paper on ink */ --border: #e8e4dc; --border-mid: #e8e4dc; /* Text — cream on ink */ --text: #FFFEF2; --text-body: #d0ccc4; --text-muted: #a8a49c; --text-subtle: #FFFEF2; --text-faint: #a8a49c; /* Accent — cream */ --accent: #FFFEF2; --accent-soft: #d0ccc4; /* Buttons — paper on ink */ --btn-pri-bg: #FFFEF2; --btn-pri-color: #1a1918; --btn-ghost-color: #d0ccc4; --btn-ghost-border: #e8e4dc; --btn-ghost-hover: #FFFEF2; --btn-ghost-hover-c: #1a1918; /* Nav — paper nav bar */ --nav-blur-bg: #FFFEF2; --nav-mobile-bg: #FFFEF2; /* Misc */ --step-divider: #e8e4dc; --grid-gap: #e8e4dc; --hamburger: #1a1918; --noise: 0; /* Landscape gradient — paper strip */ --land-1: #FFFEF2; --land-2: #F4F3E2; --land-3: #FFFEF2; /* Transitions */ --transition-theme: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; /* Options-page specific */ --opt-body-bg: #1a1918; --opt-header-border: #e8e4dc; --opt-input-bg: #1a1918; --opt-input-border: #e8e4dc; --opt-input-color: #FFFEF2; --opt-input-ph: #a8a49c; --opt-logo-color: #FFFEF2; --opt-section-title: #FFFEF2; --opt-section-desc: #d0ccc4; --opt-stat-color: #d0ccc4; --opt-subtitle: #a8a49c; --opt-toggle-off-bg: #a8a49c; --opt-action-color: #FFFEF2; --opt-action-hover: #d0ccc4; --opt-danger-border: #e8e4dc; --opt-danger-color: #e8e4dc; --opt-danger-hover-bg: #2e2c28; --opt-danger-hover-border: #FFFEF2; --opt-theme-label: #d0ccc4; }