# JJ Supplies — Sistema de Diseño
### Arteaga Country Mercantile

Este documento acompaña a `jj-supplies-design-system.css`. Explica las decisiones y las reglas que no deben romperse al implementar.

---

## 1. Cambios respecto a la propuesta original

| Token | Original | Corregido | Por qué |
|---|---|---|---|
| `--jj-muted` | `#706B61` | `#544F45` | El original daba 4.5:1 sobre cream — pasa AA por muy poco margen. Corregido a 6.9:1 para texto secundario seguro en cualquier pantalla. |
| Texto sobre Bear Orange | No especificado | Siempre `--jj-ink` | Bear Orange sobre blanco/crema da 2.1–2.45:1 (falla WCAG AA). Blanco sobre Bear Orange también falla (2.45:1). Ink sobre Bear Orange da 7.04:1 — es la única combinación segura. |

**Regla dura:** Bear Orange (`#F28A18`) es siempre fondo, nunca texto sobre superficie clara. Si necesitas naranja como texto (eyebrows, links), usa `--jj-orange-dark` (`#C9680D`), que igual conviene reservar para tamaños grandes.

---

## 2. Estructura del archivo CSS

1. `@font-face` — Rye y Libre Franklin (variable font) cargadas desde `/fonts`
2. Tokens tema claro (`:root`)
3. Tokens tema oscuro (`[data-theme="dark"]`)
4. Reset mínimo
5. Tipografía por elemento (h1–h3, eyebrow, nav, price)
6. Botones (primario / secundario / promocional)
7. Badges (nuevo / local / más vendido / temporada)
8. Tarjetas de producto
9. Bordes decorativos (filete doble, heritage)
10. Formularios
11. Indicadores de disponibilidad de inventario
12. Franja local (fondo Pine Needle) y overlay de hero
13. Utilidades (container, text-muted, reduced-motion)

Todo en custom properties de CSS puro — mismo patrón que usas en Vera (sin Tailwind), fácil de portar a Astro.

---

## 3. Uso rápido de los tokens de color

```css
background: var(--color-bg);        /* Arteaga Cream — fondo default */
color: var(--color-text);           /* Pine Black — texto default */
color: var(--color-text-muted);     /* gris cálido corregido — texto secundario */
background: var(--color-accent);    /* Bear Orange — SOLO fondo */
color: var(--color-accent-text);    /* Ink — texto que va sobre naranja */
```

No uses `--jj-orange` directamente en `color` de texto sobre fondo claro. Usa las variables semánticas (`--color-accent`, `--color-accent-text`) para que el sistema te fuerce a la combinación correcta.

---

## 4. Jerarquía cromática (recordatorio del brief)

- 60% — Cream / Paper (fondo, luminoso)
- 25% — Pine Black / Pine Needle (estructura, contraste)
- 10% — Saddle Brown (historia, materialidad)
- 5% — Bear Orange (acción — CTA, badges, hover)

---

## 5. Assets de origen

- `JJ_SUPPLIES_LOGO.pdf` — logotipo principal, línea negra pura
- `OSO_ARTEAGA_SHOP.pdf` — sello del oso (negro + contorno Bear Orange), para favicon, sello "Local de Arteaga", footer, empty states
- Fuentes incluidas en `/fonts`: `Rye-Regular.ttf`, `LibreFranklin-VariableFont_wght.ttf`, `LibreFranklin-Italic-VariableFont_wght.ttf`

---

## 6. Pendiente para la siguiente fase

- Componentes de página completa (header, hero, categorías, producto destacado) usando estos tokens
- Iconografía lineal propia (oso, pino, molino, cerca, granero) mencionada en el brief
- Definir breakpoints responsive formales si el stack es Astro + Cloudflare (como Vera)