templates: use CSS variables in all shared components

Replace hardcoded Go color constants with var(--hs-*) and
var(--md-*) CSS custom properties in externalLink, orDivider,
card, warningBox, downloadButton, and pageFooter. This ensures
all components follow the dark mode theme automatically.

Also switch pageFooter from div to semantic footer element and
simplify externalLink by letting CSS handle link styling.

Updates juanfont/headscale#3182

hscontrol/templates/general.go

@@ -124,26 +124,20 @@ func headscaleLogo() elem.Node {
 
 // pageFooter creates a consistent footer for all pages.
 func pageFooter() *elem.Element {
-	footerStyle := styles.Props{
-		styles.MarginTop:  space3XL,
-		styles.TextAlign:  "center",
-		styles.FontSize:   fontSizeSmall,
-		styles.Color:      colorTextSecondary,
-		styles.LineHeight: lineHeightBase,
-	}
-
-	linkStyle := styles.Props{
-		styles.Color:          colorTextSecondary,
-		styles.TextDecoration: "underline",
-	}
-
-	return elem.Div(attrs.Props{attrs.Style: footerStyle.ToInline()},
+	return elem.Footer(attrs.Props{
+		attrs.Style: styles.Props{
+			styles.MarginTop:  space3XL,
+			styles.TextAlign:  "center",
+			styles.FontSize:   fontSizeSmall,
+			styles.Color:      "var(--md-default-fg-color--light)",
+			styles.LineHeight: lineHeightBase,
+		}.ToInline(),
+	},
 		elem.Text("Powered by "),
 		elem.A(attrs.Props{
 			attrs.Href:   "https://github.com/juanfont/headscale",
 			attrs.Rel:    "noreferrer noopener",
 			attrs.Target: "_blank",
-			attrs.Style:  linkStyle.ToInline(),
 		}, elem.Text("Headscale")),
 	)
 }