feat(frontend): add mobile-first Material redesign (#17)

frontend/src/styles.scss

@@ -0,0 +1,95 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+html {
+  @include mat.theme(
+    (
+      color: (
+        primary: mat.$cyan-palette,
+        tertiary: mat.$azure-palette,
+        theme-type: color-scheme,
+      ),
+      typography: (
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        sans-serif,
+      ),
+      density: 0,
+    )
+  );
+
+  color-scheme: light;
+  --canvas: #f4f6f2;
+  --surface: #ffffff;
+  --surface-raised: #ffffff;
+  --surface-soft: #e9efeb;
+  --surface-accent: #dcefeb;
+  --text: #17211e;
+  --text-muted: #687670;
+  --text-subtle: #8c9994;
+  --accent: #0f766e;
+  --accent-strong: #0a5f59;
+  --accent-contrast: #ffffff;
+  --border: #dce5df;
+  --border-strong: #c7d3cd;
+  --danger: #b42318;
+  --danger-soft: #fee9e7;
+  --shadow: 0 24px 60px rgba(28, 49, 42, 0.09);
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+  --canvas: #101513;
+  --surface: #171d1b;
+  --surface-raised: #1b2320;
+  --surface-soft: #202a26;
+  --surface-accent: #173a36;
+  --text: #f0f5f2;
+  --text-muted: #a7b5af;
+  --text-subtle: #7f8e88;
+  --accent: #63c7bc;
+  --accent-strong: #86d7cf;
+  --accent-contrast: #08201d;
+  --border: #2c3733;
+  --border-strong: #3a4944;
+  --danger: #ffb4ab;
+  --danger-soft: #4a2421;
+  --shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+body {
+  background: var(--canvas);
+  color: var(--text);
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  text-rendering: optimizeLegibility;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}