style: implement TodoItem styles

[perzeuss]

🎨 Implement CSS for TodoItem Component (BEM, Design Provided)

📋 Overview

Style the TodoItem component according to the provided design screenshot, applying CSS using BEM methodology in
components/ui/TodoItem/TodoItem.css.

🖼️ Design Reference

Screenshots are provided ([attach or link the screenshots here]) representing:

• The default design of a todo item
• hover, and focus states

Refer to these images for all visual details (spacing, color, typography, interactions). Styles don't have to be pixel perfect.

default state
calcel edit button hover	confirm edit button hover	item hover
delete item button hover	edit item button hover

---

🎯 Acceptance Criteria

• The TodoItem visually matches the provided default design for all states
• Hover and focus styles are implemented and match the provided screenshots
• All CSS is located in components/ui/TodoItem/TodoItem.css
• CSS uses BEM naming conventions
• Colors, spacing, font sizes, border radius, and transitions use CSS variables from app/globals.css
• Only use hardcoded values where there is no matching variable in app/globals.css
• No inline styles or style tags in the component file

---

🔧 Technical Requirements

• Use BEM for all class names (see docs link below)
• For the following properties, always use a CSS variable from app/globals.css:
  • Color (background, text, border, accent-color, etc.)
  • Spacing (padding, gap, etc.)
  • Font size
  • Border radius
  • Transition
• Where variables are not provided (e.g. display, flex, widths/heights not specified in variables), use standard CSS values as appropriate
• Do NOT hardcode any values that have a corresponding token in app/globals.css
• Be precise with spacing, fonts, colors, and border-radius per the provided image and the available variables

Reference: CSS Variables from app/globals.css used in TodoItem styles

Use these variables in your styles where applicable:

• Colors:

  • --color-primary
  • --color-background
  • --color-text
  • --color-text-muted
  • --color-border
  • --color-warning
  • --color-success
  • --color-danger

• Border radius:

  • --border-radius-sm

• Spacing:

  • --spacing-xs
  • --spacing-sm
  • --spacing-md

• Font size:

  • --font-size-sm
  • --font-size-base

• Transition:

  • --transition

---

🚫 Out of Scope

• Changes to the TodoItem component's markup (unless required to add BEM class hooks)
• Logic or structural changes to the TodoItem component
• Updates to app/globals.css

---

✅ Getting Started

1. Review the markup of TodoItem.jsx/.tsx to understand class hooks
2. Open components/ui/TodoItem/TodoItem.css and add your styles
3. For all color, spacing, font-size, border-radius, and transition values, use var(--...) from app/globals.css
4. For properties where no variable exists, use standard CSS values

---

💡 Tips

• Be consistent with CSS variable usage—if a variable exists, always use it
• Double-check the screenshots to match spacing, color, and fonts exactly
• Read and follow the BEM documentation for naming conventions

---

📚 Resources

• BEM Introduction
• globals.css variable reference