---
phase: 30-button-primary-color
plan: 01
type: execute
wave: 1
depends_on: []
files_modified:
  - resources/scss/shared/_ui-components.scss
  - resources/scss/modules/_printing.scss
  - public/assets/css/app.css
  - DOCS/ARCHITECTURE.md
  - DOCS/TECH_CHANGELOG.md
  - DOCS/todo.md
autonomous: true
---

<objective>
## Goal
Zaplanowac wdrozenie zmiany z `DOCS/todo.md` pkt 39: glowny kolor przyciskow ma zostac zmieniony z niebieskiego na inny, aby nie mylil sie wizualnie z naglowkami sekcji.

## Purpose
Poprawa czytelnosci interfejsu i szybsze rozroznianie elementow akcji (przyciski) od elementow informacyjnych (naglowki `section-title`).

## Output
Gotowa implementacja nowego koloru akcji w warstwie SCSS (bez inline CSS), przebudowany `public/assets/css/app.css`, oraz aktualizacja dokumentacji technicznej i statusu punktu 39 na liscie TODO.
</objective>

<context>
## Project Context
@.paul/PROJECT.md
@.paul/ROADMAP.md
@.paul/STATE.md
@DOCS/todo.md
@DOCS/ARCHITECTURE.md
@DOCS/DB_SCHEMA.md

## Source Files
@resources/scss/shared/_ui-components.scss
@resources/scss/modules/_printing.scss
@resources/scss/app.scss
@public/assets/css/app.css
</context>

<skills>
## Required Skills (from SPECIAL-FLOWS.md)

| Skill | Priority | When to Invoke | Loaded? |
|-------|----------|----------------|---------|
| `sonar-scanner` | required | Po APPLY, przed UNIFY | done |
| /frontend-design | optional | Przy finalnym dopracowaniu kontrastu i czytelnosci UI | pending |
| /code-review | optional | Po implementacji, przed UNIFY | pending |

**BLOCKING:** Required skills MUST be loaded before APPLY proceeds.
Run each skill command or confirm already loaded.

## Skill Invocation Checklist
- [x] `sonar-scanner` uruchomiony po APPLY
- [ ] /frontend-design (opcjonalnie) jesli potrzebna korekta kontrastu
- [ ] /code-review (opcjonalnie) przed UNIFY

</skills>

<acceptance_criteria>

## AC-1: Rozdzielenie kolorow naglowkow i przyciskow
```gherkin
Given interfejs korzysta z globalnych tokenow kolorow
When widok renderuje `section-title` oraz `btn btn--primary`
Then glowny przycisk nie uzywa niebieskiego koloru bazowego naglowkow i jest latwo odroznialny wizualnie
```

## AC-2: Spojne stany przyciskow akcji
```gherkin
Given przyciski glownych akcji (`.btn--primary` i `.btn--outline-primary`)
When uzytkownik wejdzie w hover/focus
Then wszystkie stany korzystaja z nowej palety akcji i zachowuja czytelnosc
```

## AC-3: Zmiana wdrozona zgodnie ze standardem projektu
```gherkin
Given standard frontendowy orderPRO
When zmiana zostanie zakonczona
Then style sa utrzymane w plikach SCSS, assets sa zbudowane do `public/assets/css/app.css`, a dokumentacja i TODO sa zaktualizowane
```

</acceptance_criteria>

<tasks>

<task type="auto">
  <name>Task 1: Wydzielenie palety kolorow dla akcji (buttons)</name>
  <files>resources/scss/shared/_ui-components.scss</files>
  <action>
    Wprowadz oddzielne tokeny kolorystyczne dla przyciskow akcji (np. `--c-action-primary`, `--c-action-primary-dark`, opcjonalny token focus-ring),
    pozostawiajac `--c-primary` dla elementow informacyjnych (naglowki/linki), aby nie mieszac semantyki.
    Podlacz nowe tokeny do `.btn--primary` oraz focusa przyciskow.
    Unikaj zmian w HTML/PHP - zakres to warstwa stylow.
  </action>
  <verify>rg -n "c-action-primary|btn--primary|focus-ring" resources/scss/shared/_ui-components.scss</verify>
  <done>AC-1 satisfied: primary button nie korzysta juz z tej samej niebieskiej bazy co `section-title`.</done>
</task>

<task type="auto">
  <name>Task 2: Ujednolicenie wariantow przyciskow zaleznych od primary</name>
  <files>resources/scss/modules/_printing.scss, resources/scss/shared/_ui-components.scss</files>
  <action>
    Zaktualizuj miejsca, ktore semantycznie reprezentuja glowna akcje, aby korzystaly z nowej palety akcji
    (w szczegolnosci `.btn--outline-primary` i pokrewne stany), bez zmiany logiki UI.
    Zachowaj kompaktowosc interfejsu i aktualne rozmiary komponentow.
  </action>
  <verify>rg -n "btn--outline-primary|c-primary|c-action-primary" resources/scss/modules/_printing.scss resources/scss/shared/_ui-components.scss</verify>
  <done>AC-2 satisfied: stany hover/focus dla przyciskow sa spojne i oparte o nowy kolor akcji.</done>
</task>

<task type="auto">
  <name>Task 3: Build assets i aktualizacja dokumentacji zmiany</name>
  <files>public/assets/css/app.css, DOCS/ARCHITECTURE.md, DOCS/TECH_CHANGELOG.md, DOCS/todo.md</files>
  <action>
    Zbuduj CSS (`npm run build:css`) po zmianach SCSS.
    Zaktualizuj dokumentacje techniczna (ARCHITECTURE + TECH_CHANGELOG) o nowy standard rozdzielenia kolorow akcji i naglowkow.
    Oznacz punkt 39 w `DOCS/todo.md` jako zrealizowany po pozytywnej weryfikacji.
  </action>
  <verify>npm run build:css oraz manualny check ekranow z przyciskami i naglowkami (np. orders/list, settings/*)</verify>
  <done>AC-3 satisfied: assets + dokumentacja + status TODO sa zgodne z wymaganiami projektu.</done>
</task>

</tasks>

<boundaries>

## DO NOT CHANGE
- `database/migrations/*`
- Logika backendu PHP (kontrolery/repozytoria/serwisy)
- Moduly alertow `resources/modules/jquery-alerts/*` (poza zakresem tej zmiany)

## SCOPE LIMITS
- Zakres dotyczy tylko zmiany glównego koloru przyciskow i powiazanych tokenow wizualnych.
- Bez redesignu layoutu, bez zmian spacingu i bez realizacji innych punktow z `DOCS/todo.md`.
- Brak zmian kontraktow API i brak zmian schematu DB.

</boundaries>

<verification>
Before declaring plan complete:
- [ ] `npm run build:css` przechodzi bez bledow
- [ ] Widoczna roznica miedzy `section-title` i `btn--primary` na kluczowych ekranach
- [ ] Brak inline CSS w widokach
- [ ] `DOCS/ARCHITECTURE.md` i `DOCS/TECH_CHANGELOG.md` zaktualizowane
- [ ] `DOCS/todo.md` punkt 39 oznaczony jako zrealizowany
- [ ] All acceptance criteria met
</verification>

<success_criteria>
- Wszystkie taski zakonczone
- Build CSS zakonczony sukcesem
- Kontrast semantyczny: naglowki i glowny CTA nie myla sie kolorystycznie
- Zmiana udokumentowana i gotowa do UNIFY
</success_criteria>

<output>
After completion, create `.paul/phases/30-button-primary-color/30-01-SUMMARY.md`
</output>

