---
description: Pico CSS Variables Reference
globs:
alwaysApply: true
---

# Pico CSS Variables Reference

## Overview
Pico CSS uses CSS custom properties (variables) prefixed with `--pico-` for consistent theming and customization. These variables provide a comprehensive design system that can be leveraged in custom styles.

## Core Typography Variables

### Font Properties
- `--pico-font-family` - System font stack (sans-serif by default)
- `--pico-font-family-sans-serif` - System UI fonts
- `--pico-font-family-monospace` - Monospace fonts for code
- `--pico-font-family-emoji` - Emoji font fallbacks
- `--pico-font-weight` - Base font weight (400)
- `--pico-font-size` - Base font size (responsive, starts at 100%)

### Typography Spacing
- `--pico-typography-spacing-vertical` - Vertical spacing between elements (1rem)
- `--pico-typography-spacing-top` - Top margin for headings after content blocks
- `--pico-line-height` - Line height for text elements

### Heading Colors
- `--pico-h1-color` - H1 heading color
- `--pico-h2-color` - H2 heading color
- `--pico-h3-color` - H3 heading color
- `--pico-h4-color` - H4 heading color
- `--pico-h5-color` - H5 heading color
- `--pico-h6-color` - H6 heading color

## Layout & Spacing Variables

### Container & Spacing
- `--pico-spacing` - Base spacing unit used for padding/margins
- `--pico-grid-column-gap` - Grid column spacing
- `--pico-grid-row-gap` - Grid row spacing

### Responsive Typography
Pico automatically scales font-size across breakpoints:
- Mobile: 100%
- 576px+: 106.25% (17px)
- 768px+: 112.5% (18px)
- 1024px+: 118.75% (19px)
- 1280px+: 125% (20px)
- 1536px+: 131.25% (21px)

## Color Variables

### Base Colors
- `--pico-background-color` - Main background color
- `--pico-color` - Primary text color
- `--pico-muted-color` - Subdued text color
- `--pico-muted-border-color` - Subtle border color

### Interactive Elements
- `--pico-primary` - Primary action color
- `--pico-primary-background` - Primary button background
- `--pico-primary-border` - Primary button border
- `--pico-primary-underline` - Primary link underline
- `--pico-primary-hover` - Primary hover state
- `--pico-primary-focus` - Primary focus state

### Form Elements
- `--pico-form-element-background-color` - Input background
- `--pico-form-element-border-color` - Input border
- `--pico-form-element-color` - Input text color
- `--pico-form-element-placeholder-color` - Placeholder text
- `--pico-form-element-selected-background-color` - Selected input background

### Special Content
- `--pico-mark-background-color` - Highlighted text background
- `--pico-mark-color` - Highlighted text color
- `--pico-ins-color` - Inserted text color
- `--pico-del-color` - Deleted text color
- `--pico-text-selection-color` - Text selection background

### Table Elements
- `--pico-table-border-color` - Table border color
- `--pico-table-row-stripped-background-color` - Striped table row background

### Code Elements
- `--pico-code-background-color` - Code block background
- `--pico-code-color` - Code text color
- `--pico-code-kbd-background-color` - Keyboard shortcut background
- `--pico-code-kbd-color` - Keyboard shortcut text

## Sass Customization Variables

### Theme Settings
- `$theme-color` - Primary theme color (azure, blue, purple, etc.)
- `$css-var-prefix` - Prefix for CSS variables (default: "--pico-")
- `$enable-classes` - Enable/disable CSS classes (false for classless)
- `$enable-responsive-typography` - Enable responsive font scaling
- `$enable-transitions` - Enable CSS transitions
- `$enable-semantic-container` - Enable semantic HTML containers

### Available Theme Colors
`amber`, `azure`, `blue`, `cyan`, `fuchsia`, `green`, `grey`, `indigo`, `jade`, `lime`, `orange`, `pink`, `pumpkin`, `purple`, `red`, `sand`, `slate`, `violet`, `yellow`, `zinc`

## Best Practices for AI Assistants

### When to Use Pico Variables
1. **Spacing**: Always use `--pico-spacing` and `--pico-typography-spacing-*` for consistent layout
2. **Typography**: Use `--pico-font-*` variables for font properties
3. **Colors**: Leverage `--pico-color`, `--pico-muted-color`, and theme colors
4. **Responsive Design**: Variables automatically adapt to screen sizes

### Common Use Cases
- **Custom components**: Use Pico variables to match framework styling
- **Overlays/Banners**: Use spacing and typography variables for consistency
- **Form styling**: Leverage form element variables for native look
- **Theme adaptation**: Variables automatically work with different color themes

### Avoiding Common Mistakes
- Don't hardcode values that Pico variables provide
- Don't override Pico variables unless creating a custom theme
- Use calc() with Pico variables for proportional spacing
- Prefer Pico's responsive system over custom breakpoints

## Example Usage
```css
.custom-element {
  margin: var(--pico-spacing);
  font-family: var(--pico-font-family);
  color: var(--pico-muted-color);
  font-size: calc(var(--pico-font-size) * 1.125);
}
```