refactor: replace .dark CSS selectors with @variant dark for strategy-agnostic dark mode

Replace all hardcoded .dark class selectors with Tailwind v4's @variant dark
directive, which compiles to whatever strategy is configured in
@custom-variant dark. This means changing the dark mode strategy
(class, prefers-color-scheme, data-attribute, or combined) only requires
updating one line in globals.css — all dark mode variable overrides
and token styles follow automatically.

Changes:
- globals.css: update @custom-variant to (&:where(.dark, .dark *)) to
  include the .dark element itself with zero specificity, replace
  .dark {} block with @variant dark {}
- liveline.css: replace .dark .liveline-page {} with
  @variant dark { .liveline-page {} }
- liveline-prism.css: replace 20+ .dark .token.* rules with a single
  @variant dark {} block

website/src/styles/globals.css

@@ -1,5 +1,5 @@
 @import "tailwindcss";
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 @plugin "@tailwindcss/typography";
 
@@ -38,7 +38,7 @@
     --sidebar-border: oklch(0.92 0.004 286.32);
     --sidebar-ring: oklch(0.871 0.006 286.286);
 }
-.dark {
+@variant dark {
     --background: oklch(0.21 0.006 285.885);
     --foreground: oklch(0.985 0 0);
     --card: oklch(0.21 0.006 285.885);

website/src/styles/liveline-prism.css

@@ -135,92 +135,96 @@ pre[class*="language-"] {
 }
 
 /* ======================================================================
-   Dark mode - GitHub Dark inspired palette
+   Dark mode - GitHub Dark inspired palette.
+   Uses @variant dark so it follows whatever strategy is configured
+   in @custom-variant dark (globals.css).
    ====================================================================== */
 
-.dark code[class*="language-"],
+@variant dark {
-.dark pre[class*="language-"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
     color: #e6edf3;
-}
+  }
 
-.dark .token.keyword,
+  .token.keyword,
-.dark .token.module,
+  .token.module,
-.dark .token.imports,
+  .token.imports,
-.dark .token.control-flow {
+  .token.control-flow {
     color: #ff7b72;
-}
+  }
 
-.dark .token.string,
+  .token.string,
-.dark .token.template-string,
+  .token.template-string,
-.dark .token.attr-value {
+  .token.attr-value {
     color: #a5d6ff;
-}
+  }
 
-.dark .token.function,
+  .token.function,
-.dark .token.class-name {
+  .token.class-name {
     color: #d2a8ff;
-}
+  }
 
-.dark .token.property,
+  .token.property,
-.dark .token.parameter {
+  .token.parameter {
     color: #ffa657;
-}
+  }
 
-.dark .token.tag .token.tag {
+  .token.tag .token.tag {
     color: #7ee787;
-}
+  }
 
-.dark .token.tag .token.class-name {
+  .token.tag .token.class-name {
     color: #7ee787;
-}
+  }
 
-.dark .token.tag .token.attr-name,
+  .token.tag .token.attr-name,
-.dark .token.attr-name {
+  .token.attr-name {
     color: #79c0ff;
-}
+  }
 
-.dark .token.number {
+  .token.number {
     color: #79c0ff;
-}
+  }
 
-.dark .token.operator {
+  .token.operator {
     color: #ff7b72;
-}
+  }
 
-.dark .token.punctuation {
+  .token.punctuation {
     color: #e6edf3;
-}
+  }
 
-.dark .token.boolean,
+  .token.boolean,
-.dark .token.constant,
+  .token.constant,
-.dark .token.builtin {
+  .token.builtin {
     color: #79c0ff;
-}
+  }
 
-.dark .token.comment,
+  .token.comment,
-.dark .token.prolog,
+  .token.prolog,
-.dark .token.doctype,
+  .token.doctype,
-.dark .token.cdata {
+  .token.cdata {
     color: #8b949e;
     font-style: italic;
-}
+  }
 
-.dark .token.tag .token.punctuation {
+  .token.tag .token.punctuation {
     color: #e6edf3;
-}
+  }
 
-.dark .token.spread {
+  .token.spread {
     color: #ff7b72;
-}
+  }
 
-.dark .token.plain-text {
+  .token.plain-text {
     color: #e6edf3;
-}
+  }
 
-.dark .token.regex {
+  .token.regex {
     color: #a5d6ff;
-}
+  }
 
-.dark .language-bash .token.function {
+  .language-bash .token.function {
     color: #79c0ff;
+  }
 }

website/src/styles/liveline.css

@@ -96,8 +96,10 @@
   --ll-fade-12: rgba(255, 255, 255, 0);
 }
 
-/* Dark mode overrides */
+/* Dark mode overrides — uses @variant dark so it follows whatever
-.dark .liveline-page {
+   strategy is configured in @custom-variant dark (globals.css) */
+@variant dark {
+  .liveline-page {
     --ll-text-primary: rgba(255, 255, 255, 0.9);
     --ll-text-secondary: rgba(255, 255, 255, 0.45);
     --ll-text-tertiary: rgba(255, 255, 255, 0.25);
@@ -141,6 +143,7 @@
     --ll-fade-10: rgba(17, 17, 17, 0.008);
     --ll-fade-11: rgba(17, 17, 17, 0.002);
     --ll-fade-12: rgba(17, 17, 17, 0);
+  }
 }
 
 @supports (color: color(display-p3 1 1 1)) {