/* Design tokens — CSS custom properties. No magic numbers elsewhere. */ /* =========================================================== Night theme (default — no class on ) Ported from Jigsaw Puzzle Maker --mc-* → --pic-* =========================================================== */ :root { /* Colour tokens — overridden per theme */ --pic-bg: #0f172a; --pic-text: #e2e8f0; --pic-text-hover: #f1f5f9; --pic-subtle: #94a3b8; --pic-muted: #8090a6; --pic-btn-text: #e2e8f0; --pic-surface: #1e293b; --pic-accent: #60a5fa; --pic-accent-text: #0f172a; --pic-glow-border: rgba(96, 165, 250, 0.45); --pic-glow: rgba(96, 165, 250, 0.25); --pic-header-bg: rgba(15, 23, 42, 0.95); --pic-header-border: rgba(148, 163, 184, 0.15); --pic-title: #a0b0c8; --pic-overlay-bg: rgba(15, 23, 42, 0.97); --pic-panel-bg: rgba(15, 23, 42, 0.96); /* Status colours */ --pic-success: #22c55e; --pic-warning: #f59e0b; --pic-error: #ef4444; /* Form / input tokens */ --pic-border: rgba(148, 163, 184, 0.15); --pic-input-bg: rgba(255, 255, 255, 0.06); --pic-input-border: rgba(148, 163, 184, 0.25); --pic-focus-ring: var(--pic-accent); --pic-drop-zone-dash: var(--pic-accent); /* Spacing scale */ --pic-space-xs: 4px; --pic-space-sm: 8px; --pic-space-md: 16px; --pic-space-lg: 24px; --pic-space-xl: 32px; --pic-space-2xl: 48px; /* Typography scale */ --pic-font-xs: 0.75rem; --pic-font-sm: 0.85rem; --pic-font-base: 1rem; --pic-font-lg: 1.25rem; --pic-font-xl: 1.5rem; --pic-font-2xl: 2rem; /* Border radii */ --pic-radius-sm: 6px; --pic-radius-md: 10px; --pic-radius-lg: 16px; --pic-radius-xl: 24px; /* Transitions */ --pic-transition-fast: 0.15s ease; --pic-transition-normal: 0.25s ease; } /* =========================================================== Dawn theme (05:00–08:00) =========================================================== */ .theme-dawn { --pic-bg: #fef3e2; --pic-text: #44403c; --pic-text-hover: #292524; --pic-subtle: #8a847e; --pic-muted: #6b6359; --pic-btn-text: #57534e; --pic-surface: #fff7ed; --pic-accent: #e56a10; --pic-accent-text: #1c1410; --pic-glow-border: rgba(251, 146, 60, 0.5); --pic-glow: rgba(251, 146, 60, 0.3); --pic-header-bg: rgba(254, 243, 226, 0.95); --pic-header-border: rgba(168, 162, 158, 0.25); --pic-title: #655b52; --pic-overlay-bg: rgba(254, 243, 226, 0.97); --pic-panel-bg: rgba(254, 243, 226, 0.96); --pic-success: #16a34a; --pic-warning: #d97706; --pic-error: #dc2626; --pic-border: rgba(168, 162, 158, 0.2); --pic-input-bg: rgba(0, 0, 0, 0.04); --pic-input-border: rgba(168, 162, 158, 0.3); } /* =========================================================== Day theme (08:00–17:00) =========================================================== */ .theme-day { --pic-bg: #f8fafc; --pic-text: #1e293b; --pic-text-hover: #0f172a; --pic-subtle: #566a80; --pic-muted: #566a80; --pic-btn-text: #475569; --pic-surface: #e2e8f0; --pic-accent: #1d5bdb; --pic-accent-text: #ffffff; --pic-glow-border: rgba(37, 99, 235, 0.45); --pic-glow: rgba(37, 99, 235, 0.2); --pic-header-bg: rgba(248, 250, 252, 0.95); --pic-header-border: rgba(100, 116, 139, 0.2); --pic-title: #4e5e72; --pic-overlay-bg: rgba(248, 250, 252, 0.97); --pic-panel-bg: rgba(248, 250, 252, 0.96); --pic-success: #16a34a; --pic-warning: #d97706; --pic-error: #dc2626; --pic-border: rgba(100, 116, 139, 0.2); --pic-input-bg: rgba(0, 0, 0, 0.04); --pic-input-border: rgba(100, 116, 139, 0.25); } /* =========================================================== Dusk theme (17:00–20:00) =========================================================== */ .theme-dusk { --pic-bg: #1e1b2e; --pic-text: #e0d5f0; --pic-text-hover: #f0ecf8; --pic-subtle: #a78bcc; --pic-muted: #9888b5; --pic-btn-text: #e0d5f0; --pic-surface: #2a2440; --pic-accent: #c084fc; --pic-accent-text: #1a1225; --pic-glow-border: rgba(192, 132, 252, 0.45); --pic-glow: rgba(192, 132, 252, 0.25); --pic-header-bg: rgba(30, 27, 46, 0.95); --pic-header-border: rgba(167, 139, 204, 0.2); --pic-title: #a090c2; --pic-overlay-bg: rgba(30, 27, 46, 0.97); --pic-panel-bg: rgba(30, 27, 46, 0.96); --pic-success: #22c55e; --pic-warning: #f59e0b; --pic-error: #ef4444; --pic-border: rgba(167, 139, 204, 0.15); --pic-input-bg: rgba(255, 255, 255, 0.06); --pic-input-border: rgba(167, 139, 204, 0.25); } /* =========================================================== Vintage theme (manual) =========================================================== */ .theme-vintage { --pic-bg: #f5f0e8; --pic-text: #5c4b3a; --pic-text-hover: #3e2f22; --pic-subtle: #7a6e62; --pic-muted: #7a6e62; --pic-btn-text: #6b5b4a; --pic-surface: #ece5d8; --pic-accent: #a86828; --pic-accent-text: #1a1008; --pic-glow-border: rgba(192, 120, 48, 0.45); --pic-glow: rgba(192, 120, 48, 0.25); --pic-header-bg: rgba(245, 240, 232, 0.95); --pic-header-border: rgba(156, 140, 124, 0.25); --pic-title: #655840; --pic-overlay-bg: rgba(245, 240, 232, 0.97); --pic-panel-bg: rgba(245, 240, 232, 0.96); --pic-success: #16a34a; --pic-warning: #d97706; --pic-error: #dc2626; --pic-border: rgba(156, 140, 124, 0.2); --pic-input-bg: rgba(0, 0, 0, 0.04); --pic-input-border: rgba(156, 140, 124, 0.3); } /* =========================================================== Mono theme (manual) =========================================================== */ .theme-mono { --pic-bg: #111111; --pic-text: #e0e0e0; --pic-text-hover: #ffffff; --pic-subtle: #888888; --pic-muted: #8a8a8a; --pic-btn-text: #e0e0e0; --pic-surface: #222222; --pic-accent: #ffffff; --pic-accent-text: #111111; --pic-glow-border: rgba(255, 255, 255, 0.35); --pic-glow: rgba(255, 255, 255, 0.15); --pic-header-bg: rgba(17, 17, 17, 0.95); --pic-header-border: rgba(136, 136, 136, 0.2); --pic-title: #969696; --pic-overlay-bg: rgba(17, 17, 17, 0.97); --pic-panel-bg: rgba(17, 17, 17, 0.96); --pic-success: #22c55e; --pic-warning: #f59e0b; --pic-error: #ef4444; --pic-border: rgba(136, 136, 136, 0.2); --pic-input-bg: rgba(255, 255, 255, 0.06); --pic-input-border: rgba(136, 136, 136, 0.25); }