Upgraded dependencies and extended stopwatch

src/tailwind.css

@@ -1,6 +1,67 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*
+  Tailwind v4 dropped `corePlugins`, so preflight can no longer be switched off
+  from the config. Importing the layers individually and leaving out
+  `preflight.css` keeps Angular Material's own reset in charge.
+*/
+@layer theme, base, components, utilities;
+
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+/*
+  The theme is driven by the CSS custom properties that styles.scss sets per theme.
+  `inline` is required: the theme service toggles `.dark` on <body>, while a plain
+  `@theme` would resolve these references once at `:root` (<html>) and freeze the
+  light values. Inlining makes the utilities emit `var(--app-fg)` directly, so they
+  resolve on the element and follow the `.dark` override again.
+*/
+@theme inline {
+  --color-app-bg: var(--app-bg);
+  --color-app-fg: var(--app-fg);
+  --color-card-bg: var(--card-bg);
+  --color-link: var(--link-color);
+  --color-link-hover: var(--link-color-hover);
+  --color-logo-bg: var(--app-logo-bg);
+
+  --container-app: var(--app-maxWidth);
+  --radius-card: var(--card-radius);
+
+  --font-sans: Inter, Roboto, Arial, sans-serif;
+
+  --spacing-fluid-sm: clamp(0.5rem, 2vw, 1rem);
+  --spacing-fluid-md: clamp(1rem, 3vw, 1.5rem);
+  --spacing-fluid-lg: clamp(1rem, 4vw, 2rem);
+}
+
+/* The theme service toggles a `dark` class instead of relying on the media query. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@custom-variant mobile (@media (width <= 760px));
+@custom-variant sm-dialog (@media (width <= 600px));
+@custom-variant tablet (@media (width <= 900px));
+
+@utility legend-swatch {
+  @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
+}
+
+@utility card-gradient-bar {
+  @apply relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(
+      90deg,
+      var(--mat-sys-primary),
+      var(--mat-sys-tertiary)
+    );
+    border-radius: var(--card-radius) var(--card-radius) 0 0;
+  }
+}
 
 @layer base {
   *,
@@ -44,24 +105,3 @@
     box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
   }
 }
-
-@layer components {
-  .legend-swatch {
-    @apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
-  }
-
-  .card-gradient-bar {
-    @apply relative;
-  }
-
-  .card-gradient-bar::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: linear-gradient(90deg, var(--mat-sys-primary), var(--mat-sys-tertiary));
-    border-radius: var(--card-radius) var(--card-radius) 0 0;
-  }
-}