Responsive HTML5/CSS3 Login Page

I need a single-screen login page built with pure HTML5 and CSS3, coded mobile-first so it scales gracefully from small phones up to large desktops. The layout should feel modern and minimal: generous white space, crisp typography, subtle transitions—yet still load quickly and stay distraction-free.

Core requirements
• Two fields—email/username and password—using basic built-in validation (required attribute and native email pattern for the first field).
• Fully responsive grid or flexbox structure, no external frameworks.
• Clean, semantic markup that reads well for anyone who opens the source.
• Accessibility baked in: proper labels, ARIA where it genuinely helps, logical tab order, and color choices that meet WCAG AA by default.
• Cross-browser consistency (latest Chrome, Firefox, Safari, Edge, plus evergreen mobile browsers).

Design direction
I’m open to your color suggestions. Feel free to present a tasteful modern palette; I’ll sign off before you finalize the CSS variables. Please keep the interface uncluttered—think single accent color, clear call-to-action button, and error messages that appear inline without jank.

Deliverables
1. index.html and style.css (separate files)
2. Any assets such as SVG icons or Google Font links referenced locally in the code
3. A brief README outlining the file structure and how to tweak colors or breakpoints
4. Screenshot or short GIF demonstrating the page at three breakpoints (mobile, tablet, desktop)

Acceptance criteria
• No console errors or W3C HTML/CSS validation issues
• Basic validation works out of the box in all listed browsers
• Layout adapts smoothly from 320 px to 1440 px without overflow or horizontal scroll
• Lighthouse accessibility score ≥ 95

If something is unclear, let me know before you dive in; otherwise, I’m excited to see your first draft.