Live site facts
Reference: breakpoints, units, font, dark mode and club theming on afl.com.au, and the decisions taken on each.
Breakpoints. screen.css (v5.55.20) is written against 640, 840, 1025/1026 and 1300/1301px, with a few 400/401px rules. The Tailwind preset maps them as mobile (401), phablet (641), tablet (841), desktop (1026) and wide (1301), so max-phablet: is the live max-width: 640px and desktop: is min-width: 1026px. The parity matrix renders at 375, 600, 768, 1024, 1280 and 1440, one width inside each band. A handful of hover rules use min-width: 840px exactly, which tablet (841) misses by a pixel; no matrix width lands on 840.
Units. The live root is html { font-size: 62.5% }, so 1rem is 10px. The app keeps Tailwind's default 16px root and spacing so shadcn and design system components size correctly. Parity widgets put the legacy-scale class on their root: it sets a 1px spacing unit, so a legacy 2.4rem margin is my-24, plus the live base type (13.3px, line height normal, no :focus outline). Any other rem value from the legacy CSS is written in px (2.2rem is 22px).
Font. Inter Variable (packages/config/src/fonts/Inter.var.woff2, the file live serves), weights 100 to 900.
Dark mode. There is no global dark mode on live (no prefers-color-scheme in either stylesheet). "Dark" is a per-widget .t-dark modifier, and no Article page widget uses one.
Club theming. Club sites (the 18 domains in tools/parity/src/clubs.ts; Adelaide is afc.com.au) run aflc-web, a separate application with its own markup and stylesheet, and set theme--aflc-<club> on <body>. Decision: club sites adopt the AFL markup with club theme tokens. We do not reproduce aflc-web markup. The club theme tokens are the 30 custom properties every .theme--aflc-<club> rule declares (--theme-primary/secondary/tertiary, --on-light-*, --on-dark-*, --away-*, --theme-dark-*, --theme-match-marker-*, each with its -rgb pair). afl.com.au defines none of them, and club sites define almost none of the AFL tokens (--fill-*, --text-*), so a widget follows the club only where its component uses a club theme token.