feat: create web PWA frontend

1 files changed, 105 insertions, 0 deletions

diff --git a/web/css/theme.css b/web/css/theme.css
new file mode 100644
index 0000000..927b3b0
--- /dev/null
+++ b/web/css/theme.css
@@ -0,0 +1,105 @@
+:root {
+  /* Core palette */
+  --bg-body: #0f1117;
+  --bg-surface: #161920;
+  --bg-surface-hover: #1b1f27;
+  --bg-elevated: #1e222c;
+  --bg-overlay: rgba(0,0,0,0.65);
+
+  /* Text */
+  --text-primary: #e6e8ef;
+  --text-secondary: #a3a8b8;
+  --text-muted: #6b7280;
+  --text-inverse: #0b0d12;
+
+  /* Accent */
+  --accent: #5e9eff;
+  --accent-hover: #7cb2ff;
+  --accent-active: #3d8bf7;
+  --accent-soft: rgba(94,158,255,0.18);
+
+  /* Borders */
+  --border: #252a36;
+  --border-strong: #2e3546;
+
+  /* Feedback */
+  --danger: #f25c5c;
+  --danger-soft: rgba(242,92,92,0.18);
+  --success: #3ddc84;
+  --success-soft: rgba(61,220,132,0.18);
+  --warn: #ffb300;
+
+  /* Player */
+  --player-bg: #0b0d12;
+  --player-progress-bg: #2e3546;
+  --player-progress-fill: #5e9eff;
+  --player-thumb: #7cb2ff;
+
+  /* Selection */
+  --selected-bg: rgba(94,158,255,0.25);
+  --selected-border: #5e9eff;
+  --playing-bg: rgba(61,220,132,0.18);
+  --playing-border: #3ddc84;
+
+  /* Layout */
+  --header-height: 3.25rem;
+  --sidebar-width: 16rem;
+  --gap: 0.75rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+
+  /* Typography */
+  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
+  --shadow-lg: 0 10px 28px rgba(0,0,0,0.55);
+
+  /* Transitions */
+  --transition-fast: 120ms ease;
+  --transition-base: 200ms ease;
+}
+
+/* Light theme overrides */
+[data-theme="light"] {
+  --bg-body: #f4f5f8;
+  --bg-surface: #ffffff;
+  --bg-surface-hover: #f0f2f7;
+  --bg-elevated: #ffffff;
+  --bg-overlay: rgba(0,0,0,0.35);
+
+  --text-primary: #12131a;
+  --text-secondary: #4a4f5e;
+  --text-muted: #8b90a0;
+  --text-inverse: #ffffff;
+
+  --accent: #2b6cb0;
+  --accent-hover: #1a5490;
+  --accent-active: #17447a;
+  --accent-soft: rgba(43,108,176,0.14);
+
+  --border: #d6dae4;
+  --border-strong: #c3c9d6;
+
+  --danger: #c53030;
+  --danger-soft: rgba(197,48,48,0.14);
+  --success: #258855;
+  --success-soft: rgba(37,136,85,0.14);
+
+  --player-bg: #0b0d12;
+  --player-progress-bg: #d6dae4;
+  --player-progress-fill: #2b6cb0;
+  --player-thumb: #1a5490;
+
+  --selected-bg: rgba(43,108,176,0.18);
+  --selected-border: #2b6cb0;
+  --playing-bg: rgba(37,136,85,0.14);
+  --playing-border: #258855;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
+  --shadow-lg: 0 10px 28px rgba(0,0,0,0.12);
+}