# DESIGN.md — Sistema Visual de Ornitonautas

> ⚠️ **Placeholder** — Pendiente de recibir diseño de OpenDesign.
> Los tokens y valores aquí son provisionales.

## Paleta de colores

### Primarios

| Token | Valor | Uso |
|---|---|---|
| `--color-primary` | #2563eb | Azul principal — CTAs, links, elementos activos |
| `--color-primary-hover` | #1d4ed8 | Azul oscuro — hover states |
| `--color-primary-light` | #dbeafe | Azul claro — fondos sutiles |

### Neutros

| Token | Valor | Uso |
|---|---|---|
| `--color-ink` | #0f172a | Texto principal |
| `--color-ink-muted` | #64748b | Texto secundario |
| `--color-paper` | #ffffff | Fondo principal |
| `--color-surface` | #f8fafc | Fondo secundario |
| `--color-border` | #e2e8f0 | Bordes y líneas |

### Semánticos

| Token | Valor | Uso |
|---|---|---|
| `--color-success` | #16a34a | Éxito, completado |
| `--color-warning` | #f59e0b | Advertencia |
| `--color-error` | #dc2626 | Error, bloquado |

## Tipografía

| Elemento | Fuente | Tamaño |
|---|---|---|
| Display | Inter | clamp(2rem, 5vw, 3.5rem) |
| Heading 1 | Inter | clamp(1.75rem, 4vw, 2.5rem) |
| Heading 2 | Inter | clamp(1.5rem, 3vw, 2rem) |
| Heading 3 | Inter | clamp(1.25rem, 2.5vw, 1.5rem) |
| Body | Inter | 1rem (16px) |
| Small | Inter | 0.875rem (14px) |
| Mono | JetBrains Mono | 0.875rem |

## Espaciado

| Token | Valor |
|---|---|
| `--space-xs` | 0.25rem |
| `--space-sm` | 0.5rem |
| `--space-md` | 1rem |
| `--space-lg` | 1.5rem |
| `--space-xl` | 2rem |
| `--space-2xl` | 3rem |
| `--space-3xl` | 4rem |

## Bordes y Sombras

| Token | Valor |
|---|---|
| `--radius-sm` | 0.375rem |
| `--radius-md` | 0.5rem |
| `--radius-lg` | 0.75rem |
| `--radius-xl` | 1rem |
| `--shadow-sm` | 0 1px 2px rgba(0,0,0,0.05) |
| `--shadow-md` | 0 4px 6px rgba(0,0,0,0.1) |
| `--shadow-lg` | 0 10px 15px rgba(0,0,0,0.1) |

## Breakpoints

| Nombre | Ancho |
|---|---|
| `sm` | 640px |
| `md` | 768px |
| `lg` | 1024px |
| `xl` | 1280px |

## Layout

| Elemento | Ancho máximo |
|---|---|
| Contenedor general | 1280px |
| Contenido de prosa | 720px |
| Sidebar | 280px |

## Componentes

### HeroSection

- Background: gradiente sutil de primary-light a paper
- Título: Display weight bold
- Subtítulo: Body, ink-muted
- CTA: Botón primary

### CourseCard

- Background: paper
- Border: border
- Shadow: shadow-sm
- Hover: shadow-md, primary border-left
- Contenido: logo, título, duración, módulos

### StatsBar

- Background: primary
- Text: white
- Layout: 4 columnas (responsive)
- Datos: números grandes + label

### FAQAccordion

- Border: border
- Hover: surface background
- Icono: +/- para expandir/colapsar

## Accesibilidad WCAG 2.2 AA

- Contraste mínimo: 4.5:1 (texto normal), 3:1 (texto grande)
- Focus visible: ring de 2px con primary color
- Hit targets: ≥ 44×44px
- Alt text obligatorio en imágenes
- Skip to content link

## Mobile-first

- Diseño base: 390px
- Expansión progresiva: sm → md → lg → xl
- Tipografía fluida con clamp()
- Sin overflow horizontal
- Navegación hamburguesa en móvil