deep-system

As a Frontend Developer, implement the single-page calculator application using React. Include the display screen with smooth transition effects, arithmetic operation buttons (addition, subtraction, multiplication, division), clear button, backspace button, and decimal point button. Use framer-motion for button press animations and result update transitions. Apply the specified color theme (#2A9D8F primary teal, #264653 dark blue, #F4A261 accent orange, etc.) and ensure a minimalist, centered, responsive layout with subtle shadow effects on buttons.

As a UI/UX Designer, configure the global design system and theme for the calculator application. Define CSS variables or a theme configuration file with all specified colors: primary (#2A9D8F), primary_light (#E9F5F2), secondary (#264653), accent (#F4A261), highlight (#E76F51), bg (#F1FAEE), surface (rgba(42,157,143,0.8)), text (#1D3557), text_muted (#A8DADC), border (rgba(38,70,83,0.2)). Install and configure framer-motion for animations. Ensure responsive breakpoints are defined for various screen sizes per non-functional requirements.

As a DevOps Engineer, configure a CI/CD pipeline for the calculator frontend application. Set up automated build, lint, and test steps on pull requests. Configure deployment to a static hosting environment (e.g., Vercel, Netlify, or S3+CloudFront) for production and preview environments. Ensure environment variables and build configuration are properly managed.