Plan step 33. foundation.css is the one required import: the full
material layer statement, then plain imports of its parts, each opening
with the same statement.
- foundation/reset.css (material.reset): Tailwind 4's preflight rule for
rule, with M3's on-surface-variant placeholder and no typeface.
- foundation/hidden.css: [hidden] and [x-cloak], outside every layer.
- foundation/tokens.css (material.tokens): the token files.
- foundation/base.css (material.base): the page's surface, ink and
brand typeface, and the font face.
- foundation/interaction.css (material.base): md-state-layer,
md-focus-ring, md-touch-target and md-link, the plain-CSS forms of the
utilities; md-state-layer also takes data-md-dragged, and
md-touch-target is 48px (space600) where the utility reads 3rem.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
