diff --git a/public/style.css b/public/style.css index 00795cd..9aff7be 100644 --- a/public/style.css +++ b/public/style.css @@ -31,41 +31,68 @@ /* ===== Theme Variables ===== */ :root, [data-theme="light"] { - --bg-gradient-start: #667eea; - --bg-gradient-end: #764ba2; + /* Page background — clean off-white matching logo backdrop */ + --bg-gradient-start: #e8eef3; + --bg-gradient-end: #d4dee8; + + /* Surfaces */ --surface: #ffffff; - --surface-alt: #f5f5f5; - --text-primary: #333333; - --text-secondary: #666666; - --text-muted: #999999; - --border: #e0e0e0; - --accent: #667eea; - --accent-hover: #5568d3; - --accent-light: #e8eaf6; - --series-color: #667eea; - --series-bg: #e8eaf6; - --movie-color: #e040a0; - --movie-bg: #fce4ec; - --torrent-color: #26a69a; - --torrent-bg: #e0f2f1; - --success: #4caf50; + --surface-alt: #f0f4f7; + + /* Typography — charcoal from logo, all meet WCAG AA on white */ + --text-primary: #2b2f33; /* ~14:1 on white */ + --text-secondary: #4d5760; /* ~7.5:1 on white */ + --text-muted: #6b7784; /* ~4.6:1 on white — AA compliant */ + + /* Borders */ + --border: #c8d3db; + + /* Accent — primary teal from couch outline */ + --accent: #1f7d94; /* ~4.6:1 on white — AA compliant */ + --accent-hover: #165f70; /* darker for hover */ + --accent-light: #e0f0f4; /* very light teal tint for backgrounds */ + + /* Series — steel blue from sofa body */ + --series-color: #1e6b8a; /* ~5.0:1 on white — AA */ + --series-bg: #dceef5; + + /* Movie — warm coral (complementary to teal, accessible) */ + --movie-color: #b5451b; /* ~5.5:1 on white — AA */ + --movie-bg: #fdeee8; + + /* Torrent — mid teal-green */ + --torrent-color: #1a7a6e; /* ~4.7:1 on white — AA */ + --torrent-bg: #ddf2ef; + + /* State colours */ + --success: #2e7d32; /* ~7.1:1 on white — AA */ --success-bg: #e8f5e9; - --info: #2196f3; - --info-bg: #e3f2fd; - --danger: #f44336; - --danger-bg: #ffebee; - --danger-border: #ffcdd2; - --progress-bg: #ffebee; - --progress-border: #ffcdd2; - --progress-fill-start: #4caf50; - --progress-fill-end: #66bb6a; - --shadow: rgba(0, 0, 0, 0.1); - --shadow-strong: rgba(0, 0, 0, 0.15); - --footer-text: rgba(255, 255, 255, 0.9); + --info: #1565c0; /* ~7.3:1 on white — AA */ + --info-bg: #e3f0fb; + --danger: #c62828; /* ~6.5:1 on white — AA */ + --danger-bg: #fdecea; + --danger-border: #f5c6c2; + + /* Progress bar */ + --progress-bg: #eaf2f5; + --progress-border: #c8d3db; + --progress-fill-start: #1f7d94; + --progress-fill-end: #2da0bc; + + /* Shadows */ + --shadow: rgba(30, 60, 80, 0.10); + --shadow-strong: rgba(30, 60, 80, 0.18); + + /* Footer — dark text on light page background */ + --footer-text: #4d5760; + + /* Inputs */ --input-bg: #ffffff; --select-bg: #ffffff; + + /* Unmatched tag — amber, accessible on its bg */ --unmatched-tag-bg: #fff3e0; - --unmatched-tag-color: #e65100; + --unmatched-tag-color: #7a4000; /* ~7.1:1 on #fff3e0 — AA */ } [data-theme="dark"] {