# Custom CSS Utility Classes

This document describes the centralized CSS utility classes defined in `src/styles/global.css` for consistent styling across the application.

## Error & Warning Classes

### Validation Bubbles (Popups)

**`.error-bubble`**
- Used for error validation popup messages on form fields
- Light mode: Soft red background with dark red text
- Dark mode: Very dark red background (80% opacity) with light red text
- Includes border for visual separation
- Example: Input field validation errors

**`.warning-bubble`**
- Used for warning validation popup messages on form fields
- Light mode: Soft amber background with dark amber text
- Dark mode: Very dark amber background (80% opacity) with light amber text
- Includes border for visual separation
- Example: Input field warnings about unusual values

### Borders

**`.error-border`**
- Red border for form inputs with errors
- Uses the `destructive` color from the theme
- Example: Highlight invalid input fields

**`.warning-border`**
- Amber border for form inputs with warnings
- Uses `amber-500` color
- Example: Highlight input fields with unusual but valid values

### Background Boxes (Static Sections)

**`.error-bg-box`**
- For static error information sections
- Light mode: Light red background
- Dark mode: Dark red background (40% opacity)
- Includes border
- Example: Persistent error messages in modals

**`.warning-bg-box`**
- For static warning information sections
- Light mode: Light amber background
- Dark mode: Dark amber background (40% opacity)
- Includes border
- Example: Warning boxes in settings

**`.info-bg-box`**
- For informational sections
- Light mode: Light blue background
- Dark mode: Dark blue background (40% opacity)
- Includes border
- Example: Helpful tips, contextual information

### Text Colors

**`.error-text`**
- Dark red text in light mode, light red in dark mode
- High contrast for readability
- Example: Inline error messages

**`.warning-text`**
- Dark amber text in light mode, light amber in dark mode
- High contrast for readability
- Example: Inline warning messages

**`.info-text`**
- Dark blue text in light mode, light blue in dark mode
- High contrast for readability
- Example: Inline informational text

## Usage Examples

### Form Validation Popup

```tsx
{hasError && (
  <div className="error-bubble w-80 text-xs p-2 rounded-md">
    {errorMessage}
  </div>
)}

{hasWarning && (
  <div className="warning-bubble w-80 text-xs p-2 rounded-md">
    {warningMessage}
  </div>
)}
```

### Input Field Borders

```tsx
<Input
  className={cn(
    hasError && "error-border",
    hasWarning && !hasError && "warning-border"
  )}
/>
```

### Static Information Boxes

```tsx
{/* Warning box */}
<div className="warning-bg-box rounded-md p-3">
  <p className="warning-text">{warningText}</p>
</div>

{/* Info box */}
<div className="info-bg-box rounded-md p-3">
  <p className="info-text">{infoText}</p>
</div>

{/* Error box */}
<div className="error-bg-box rounded-md p-3">
  <p className="error-text">{errorText}</p>
</div>
```

## Accessibility

All classes are designed with accessibility in mind:

- ✅ **High contrast ratios** - Meet WCAG AA standards for text readability
- ✅ **Dark mode optimized** - Reduced saturation and brightness in dark mode (80% opacity for bubbles, 40% for boxes)
- ✅ **Consistent theming** - Semantic color usage (red=error, amber=warning, blue=info)
- ✅ **Icon visibility** - Muted backgrounds ensure icons stand out
- ✅ **Border separation** - Clear visual boundaries between elements

## Opacity Rationale

- **Validation bubbles**: 80% opacity in dark mode - Higher opacity for better text readability during focused interaction
- **Background boxes**: 40% opacity in dark mode - Lower opacity for persistent elements to reduce visual weight

## Migration Guide

When updating existing code to use these classes:

**Before:**
```tsx
className="bg-red-50 dark:bg-red-950/50 text-red-900 dark:text-red-200 border border-red-300 dark:border-red-800"
```

**After:**
```tsx
className="error-bubble"
```

This reduces duplication, ensures consistency, and makes it easier to update the design system in the future.

## Files Using These Classes

- `src/components/ui/form-numeric-input.tsx`
- `src/components/ui/form-time-input.tsx`
- `src/components/settings.tsx`
- `src/components/data-management-modal.tsx`
- `src/components/disclaimer-modal.tsx`
- `src/components/day-schedule.tsx`