CSS Styling and Responsive Design

Create a CSS custom properties (variables) file for a website design system:

Brand colors:
- Primary: [your brand color, e.g., #3b82f6]
- Secondary: [secondary color]
- Accent: [accent color for CTAs]

Generate from these base colors:
1. Color scale: 50, 100, 200, ..., 900 for primary and secondary
2. Semantic colors: success, warning, error, info
3. Surface colors: background, surface, surface-raised (light and dark mode)
4. Text colors: primary, secondary, muted, on-primary

Spacing scale:
- 8px base unit: space-1 (4px) through space-20 (160px)

Typography:
- Font families: heading, body, mono
- Size scale: xs through 4xl using clamp() for fluid sizing
- Line heights and font weights

Border radius: sm, md, lg, xl, full
Shadows: sm, md, lg, xl

Use :root for light mode defaults and @media (prefers-color-scheme: dark) for dark mode.

Create a responsive page layout using CSS Grid:

Structure:
- Header (full width, sticky)
- Sidebar (left, 280px on desktop, hidden on mobile with toggle)
- Main content (flexible, centered, max-width 800px for readability)
- Footer (full width)

Responsive behavior:
- Mobile (< 768px): Single column, no sidebar, hamburger menu
- Tablet (768px - 1024px): Sidebar collapses to icons only (64px)
- Desktop (> 1024px): Full sidebar visible

Use mobile-first approach (base styles for mobile, min-width queries for larger).
Use CSS custom properties for spacing and colors.
No frameworks — vanilla CSS only.

Create a responsive card grid using CSS Grid:

Requirements:
- Cards auto-fill available width
- Minimum card width: 280px
- Maximum card width: 1fr (flexible)
- Consistent gap: var(--space-6)
- Cards have equal height (stretch to tallest in row)
- Card content: image, title, description, button pinned to bottom

Use grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
Mobile: 1 column. Tablet: 2 columns. Desktop: 3-4 columns (automatic).

Create a button system with CSS:

Button types:
- Primary (solid background, white text)
- Secondary (outline, colored border and text)
- Ghost (text only, subtle hover)
- Danger (red variant for destructive actions)

Sizes: sm, md (default), lg

States for each: default, hover, focus-visible, active, disabled

Requirements:
- Use CSS custom properties for all colors
- focus-visible outline (not focus) for keyboard-only indicators
- Smooth transitions (150ms ease)
- Disabled state reduces opacity, removes pointer events
- All sizes maintain consistent padding ratios

Use .btn as base class with modifier classes (.btn-primary, .btn-sm, etc.)

Create a responsive navigation bar with CSS:

Desktop (> 768px):
- Horizontal layout, logo left, links center, CTA button right
- Dropdown menus appear on hover with smooth animation
- Active link indicated with bottom border

Mobile (< 768px):
- Logo left, hamburger icon right
- Menu slides in from right (off-canvas) when toggled
- Full-height overlay with large touch targets (48px minimum)
- Dropdown items expand vertically

Use Flexbox for the nav layout.
Include smooth transitions for hover states and mobile menu toggle.
Mobile menu toggle will need a small JavaScript snippet (provide it separately).

Add dark mode support to this stylesheet:

[paste your existing CSS]

Requirements:
1. Use @media (prefers-color-scheme: dark) to detect system preference
2. Override only the CSS custom properties (colors, shadows) — not component styles
3. Ensure sufficient contrast ratios (WCAG AA: 4.5:1 for text)
4. Adjust shadow colors (dark mode shadows should use darker rgba values)
5. Images and illustrations: add slight reduction in brightness

Also add a manual toggle class (.dark-mode on body) that overrides system preference.

Review this CSS for quality and best practices:

[paste your CSS]

Check for:
1. Hardcoded colors or spacing (should use custom properties)
2. Missing mobile-first media queries (should use min-width, not max-width)
3. Accessibility issues (contrast, focus states, touch targets)
4. Performance issues (expensive selectors, large box-shadows, excessive animations)
5. Missing dark mode consideration
6. Inconsistent naming conventions
7. Specificity conflicts or !important usage

Suggest improvements for each issue found.