# Greenmedical Design System

Design tokens + funkčné HTML/CSS templates pre **NaMaximum / Greenmedical** e-shop.

Stack-agnostic. Žiadne npm, žiadny build, žiadne deps. Otvor súbor v prehliadači → vidíš template.

## Pre koho

- **AI agenti** (Claude / Cursor / Codex) — primárny user. Čítaj `AGENTS.md`.
- **Developers** — sekundárny. Čítaj sekciu „Použitie v projekte" nižšie.
- **Designers / sales** — otvor `index.html` (showcase preview).

## Rýchly štart

### Prezeranie templatov

```bash
cd greenmedical-ds
python3 -m http.server 8080
# otvor http://localhost:8080
```

- `index.html` — showcase landing
- `templates/pdp-desktop.html` — PDP desktop full reference
- `templates/pdp-mobile.html` — PDP mobile full reference
- `templates/cart-desktop.html` — Cart desktop
- `templates/cart-mobile.html` — Cart mobile

### Použitie v projekte

```html
<!-- 1. Skopíruj tokens.css + assets/fonts/ do svojho projektu -->
<link rel="stylesheet" href="/path/to/tokens.css">

<!-- 2. Použi CSS vars vo svojich štýloch -->
<style>
  .my-button {
    background: var(--color-1);
    color: white;
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
  }
</style>
```

Pre PDP/Cart kúsky: skopíruj relevantný blok HTML z `templates/` + súvisiace CSS rules z páru `templates/{name}.css`. Detail → `AGENTS.md`.

## Štruktúra

| Folder | Obsah |
|---|---|
| `tokens.css` | ⭐ Design tokens (CSS custom properties) |
| `templates/` | Funkčné HTML/CSS referenčné stránky |
| `prototypes/` | React/JSX zdrojáky tých templatov |
| `components/` | _(prázdne — re-authoring on demand)_ |
| `patterns/` | _(prázdne)_ |
| `showcase/` | Human-facing preview (CSS + JS) |
| `assets/` | Fonty, logá, badges, certifikácie, obrázky |

## Brand tokens (skrátené)

- **Primary** `#0077BC` (`var(--color-1)`) — NaMaximum blue
- **Accent** `#F96628` (`var(--color-2)`) — orange CTA
- **Sale** `#DD3030` (`var(--color-sale)`)
- **Success** `#26BB59` (`var(--color-success)`)
- **Fonts** Montserrat (display) + Satoshi (body)

Plný zoznam: `AGENTS.md` → sekcia „Token vocabulary".

## Distribúcia

Žiadny npm. Tri spôsoby použitia:

| Metóda | Ako |
|---|---|
| **git subtree** (odporúčané) | `git subtree add --prefix=vendor/greenmedical-ds <git-url> main --squash` |
| **copy-paste** | Skopíruj `tokens.css` + `assets/fonts/` + relevantné `templates/` |
| **fork & adapt** | Fork repa, uprav tokens pre iný brand |

## Zdroj pravdy

Templates v `templates/` **sú** zdrojom pravdy. Sú extrakcia z reálneho prototypu Claude Design.
Prototypes v `prototypes/` (JSX) sú origíny — tam pozri stav a logiku.

## Versioning

SemVer v `manifest.json`. Token rename = major. Nový token = patch. Hodnota tokenu zmenená = minor.

## Licencia

Privátne (private). Iba interné použitie pre Greenmedical / NaMaximum projekty.

---

Otázky → `AGENTS.md`.