Build a robust CSS design system using a three-layer architecture: abstract design tokens, base styles for native controls, and composable variants. Apply styles via :where() to semantic elements (e.g.,button and <a role="button">) to achieve zero specificity and scoped defaults. All theme variants should only override CSS custom properties, enabling flexible composition. When handling media queries (e.g., dark mode), ensure selectors target the element itself—prefer using & to reference the current context or lift the rule outside nesting—to avoid accidental descendant selectors that break styling.

Some native inputs (e.g. color, date, file) have UA-defined internal insets which cannot be fully normalized across browsers. Just keeps them usable, not visually perfect.