Portfolio Step 13: Tokens and Motion

Replace every hard coded color and spacing value in your stylesheet with custom properties defined on :root, named by role rather than appearance. You should end up with roughly four color tokens and four spacing tokens, and no raw hex codes anywhere below your root block. Then add restrained motion: a transition on your buttons and project cards, using transform and opacity only. Finish with a prefers-reduced-motion block that reduces it all to nothing. As a test, change your brand token to a completely different color and confirm the entire site re-themes from that single edit.