/* ============================================================ watchlistr — Theme Variables Toggle themes via data-theme on Toggle dark/light via data-mode ============================================================ */ /* --- Modern Theme, Dark Mode (default) --- */ [data-theme="modern"][data-mode="dark"] { --color-bg-primary: #12131e; --color-bg-secondary: #1a1b2e; --color-bg-card: #222338; --color-bg-input: #2a2b42; --color-bg-hover: #2e3050; --color-text-primary: #e0e0ec; --color-text-secondary: #a0a0b8; --color-text-muted: #6a6a82; --color-text-heading: #f0f0ff; --color-accent: #38c9a2; --color-accent-hover: #4dddb5; --color-accent-subtle: rgba(56, 201, 162, 0.12); --color-accent-glow: rgba(56, 201, 162, 0.25); --color-secondary: #e06080; --color-secondary-subtle: rgba(224, 96, 128, 0.12); --color-border: #2e3050; --color-border-light: #262840; --color-success: #38c9a2; --color-warning: #e8b84a; --color-error: #e06060; --color-info: #5090d0; --color-watched: rgba(56, 201, 162, 0.08); --color-in-progress: rgba(232, 184, 74, 0.08); --color-unwatched: transparent; --font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-glow: 0 0 20px var(--color-accent-glow); --transition-fast: 120ms ease; --transition-normal: 200ms ease; } /* --- Modern Theme, Light Mode --- */ [data-theme="modern"][data-mode="light"] { --color-bg-primary: #f0f1f5; --color-bg-secondary: #e4e5ec; --color-bg-card: #ffffff; --color-bg-input: #f5f6f8; --color-bg-hover: #eaebf0; --color-text-primary: #1a1b2e; --color-text-secondary: #4a4b62; --color-text-muted: #8888a0; --color-text-heading: #12131e; --color-accent: #1da882; --color-accent-hover: #28c098; --color-accent-subtle: rgba(29, 168, 130, 0.1); --color-accent-glow: rgba(29, 168, 130, 0.15); --color-secondary: #d04870; --color-secondary-subtle: rgba(208, 72, 112, 0.1); --color-border: #d8d9e2; --color-border-light: #e8e9f0; --color-success: #1da882; --color-warning: #c89620; --color-error: #c04040; --color-info: #4080c0; --color-watched: rgba(29, 168, 130, 0.06); --color-in-progress: rgba(200, 150, 32, 0.06); --color-unwatched: transparent; --font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px var(--color-accent-glow); --transition-fast: 120ms ease; --transition-normal: 200ms ease; } /* --- Tavern Theme (legacy, kept for reference) --- */ [data-theme="tavern"][data-mode="dark"] { --color-bg-primary: #1a1209; --color-bg-secondary: #2a1f10; --color-bg-card: #332816; --color-bg-input: #3d2f1a; --color-bg-hover: #4a3a22; --color-text-primary: #f5e6d0; --color-text-secondary: #c4a97a; --color-text-muted: #8a7454; --color-text-heading: #ffd699; --color-accent: #d4943a; --color-accent-hover: #e5a84e; --color-accent-subtle: #5c3d1a; --color-accent-glow: rgba(212, 148, 58, 0.25); --color-secondary: #a83232; --color-secondary-subtle: rgba(168, 50, 50, 0.12); --color-border: #4a3a22; --color-border-light: #3d2f1a; --color-success: #4a7c3f; --color-warning: #b8860b; --color-error: #a83232; --color-info: #4a6fa5; --color-watched: #2d4a2d; --color-in-progress: #4a3d1a; --color-unwatched: transparent; --font-heading: 'Cinzel', 'Georgia', serif; --font-body: 'Lato', 'Segoe UI', sans-serif; --font-mono: monospace; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(212, 148, 58, 0.25); --transition-fast: 150ms ease; --transition-normal: 250ms ease; }