Act as a senior UI designer and front-end engineer. Make every button and link in this {{tech_stack}} project feel finished. Our brand colors are {{brand_colors}}. Read the existing button and link components first and list every variant and every missing state. Variants: primary (solid accent), secondary (outline or tinted), ghost or text, destructive, and icon-only. Sizes 36, 44 and 52px tall, with 44px the default on touch screens. For each variant, build these states with exact values: - default: colors from tokens, label at 4.5:1 on the fill - hover, on pointer devices only: the accent about 8% darker or a tinted background, 150ms ease-out - focus-visible: a 2px ring with a 2px offset, at least 3:1 against both button and page; never removed, not shown on mouse click - pressed: another 4% darker plus a 1px downward nudge or 0.98 scale, 80ms - disabled: lower contrast but still legible, no hover; say why it's disabled nearby, and use aria-disabled when it should stay focusable - loading: keep the width, swap the label for a spinner and "Saving...", block double submits, and announce it to screen readers - success and error after an action: a short label change or message, never color alone Links: underlined in body text at 0.08em thickness with a 0.2em offset; hover thickens the underline; external links marked; navigation shows the current page with more than color. Motion respects reduced motion. Keep existing component names and props, and add missing states without breaking current uses. Finish with a state matrix per variant and a demo page showing every state.