# 02 — Design System

Pełna definicja systemu projektowego. Zaimplementuj jako tokeny w `tailwind.config.ts`
i CSS variables w `globals.css`. Wszystkie komponenty korzystają z tokenów, nie z wartości „na sztywno".

---

## Paleta kolorów

| Token | Hex | Zastosowanie |
|-------|-----|--------------|
| `primary` (granat) | `#0F2A47` | nagłówki, header, footer, tekst akcentowany |
| `primary-light` | `#1B3D63` | hover na elementach primary |
| `accent` (cyjan) | `#2BA8E0` | akcenty „chłodu", linki, ikony, podkreślenia |
| `accent-light` | `#E3F4FC` | tła sekcji związanych z klimatyzacją |
| `cta` (pomarańcz) | `#F39320` | przyciski akcji, wyróżnienia konwersji |
| `cta-hover` | `#D97D0D` | hover przycisków CTA |
| `bg` | `#FFFFFF` | główne tło |
| `bg-muted` | `#F5F7FA` | tła naprzemiennych sekcji |
| `text` | `#1A2230` | tekst podstawowy |
| `text-muted` | `#5A6678` | tekst drugorzędny, opisy |
| `border` | `#E2E8F0` | obramowania kart, separatory |
| `success` | `#16A34A` | potwierdzenia, „dostępne" |

Tryb: na start jasny. Przygotuj zmienne tak, by dark mode dało się dodać później bez przepisywania.

---

## Typografia

- Font: **Inter** lub **Poppins** przez `next/font/google` (subset latin + latin-ext dla polskich znaków).
- Skala (desktop / mobile):
  - H1: 48–56px / 32–36px, bold, line-height 1.1
  - H2: 36–40px / 28px, bold
  - H3: 24–28px / 20px, semibold
  - Body: 16–18px / 16px, regular, line-height 1.6
  - Small: 14px
- Nagłówki w kolorze `primary`. Tekst w `text`. Opisy w `text-muted`.
- Maksymalna szerokość bloku tekstu: ~70 znaków (czytelność).

---

## Spacing i layout

- Kontener: max-width 1280px, padding boczny 16px (mobile) / 24–32px (desktop), wyśrodkowany.
- Odstępy między sekcjami: 80–120px desktop / 48–64px mobile. Dużo powietrza.
- Siatka kart: grid responsywny (1 kol. mobile → 2 → 3/4 desktop), gap 24px.
- Sekcje naprzemiennie `bg` i `bg-muted` dla rytmu wizualnego.

---

## Komponenty UI (na bazie shadcn/ui, dostosowane do tokenów)

- **Button** — warianty: `cta` (pomarańcz, główny), `primary` (granat), `outline`, `ghost`.
  Zaokrąglenie `rounded-lg`, padding wygodny, wyraźny hover i focus ring.
- **Card** — `rounded-xl`, `border`, subtelny cień (`shadow-sm` → `shadow-md` na hover dla klikalnych).
- **Accordion** — do FAQ. Płynne rozwijanie, ikona +/− lub chevron.
- **Input / Textarea / Select** — spójne obramowania, focus w kolorze `accent`, czytelne labelki.
- **Badge / Tag** — do kategorii (realizacje, blog) i wyróżnień produktów.
- **Tabs** — do zakładek na karcie produktu.

---

## Wspólne komponenty własne (`components/common/`)

- **SectionHeading** — eyebrow (mały tekst nad), H2, opcjonalny podtytuł. Wyśrodkowany lub do lewej.
- **CTAButton** — przycisk z ikoną, wariant cta, używany w hero i banerach.
- **StatCounter** — duża liczba + podpis (np. „3500 realizacji").
- **IconCard** — ikona + tytuł + opis + opcjonalny link. Baza dla siatek usług.
- **StepItem** — numer + tytuł + opis. Baza dla procesów krok-po-kroku.
- **Placeholder** — szary blok z ikoną i opisem zamiast docelowego zdjęcia.

---

## Stany i interakcje

- Hover: subtelne podniesienie cienia / zmiana koloru, transition 150–200ms.
- Focus: widoczny ring w kolorze `accent` (dostępność).
- Loading: skeleton dla list (sklep, blog).
- Puste stany: czytelny komunikat + CTA (np. pusty koszyk).

---

## Zasada nadrzędna

Design ma wyglądać jak zaprojektowany przez człowieka: spójny, czysty, z oddechem.
Unikaj efektu „szablonu AI": przeładowania gradientami, zbyt wielu kolorów, ciasnych sekcji,
losowych cieni. Mniej, ale konsekwentnie.