# DESIGN.md — Sistem de design AutoPass (by ROMFAST)

> Sursa de adevar pentru identitatea vizuala a dashboard-ului. Implementarea concreta sta in
> `app/web/templates/base.html` (variabile CSS `:root` + `[data-theme="light"]`). Acest fisier
> spune *ce* si *de ce*; base.html spune *cum*.

## Lucrul de retinut

> „Software serios pentru o obligatie legala serioasa — dar parte din familia ROMFAST/ROA, nu un
> tool anonim." Operatorul de service trebuie sa simta ca declara la stat printr-un instrument de
> incredere, cu identitatea producatorului (ROMFAST) prezenta discret, nu griul generic de azi.

## Context produs

Gateway web care declara prezentari de service-auto la RAR AUTOPASS (L.142/2023). Utilizatori:
operatori de service-auto si integratori ROAAUTO. Face parte din familia **ROA — Romfast
Applications** (ERP romanesc, modul Service Auto). Referinta de brand: **romfast.ro** — alb curat,
accent albastru azur, pill-uri rotunjite, comutator de tema, logo rosu+albastru.

## Decizie cromatica

Accentul functional = **albastrul ROMFAST** (acelasi cu „FAST" din logo si cu accentul de pe
romfast.ro), nu albastrul generic SaaS de pana acum. Rosul apare DOAR in wordmark-ul „ROM" — nu ca
accent de UI, fiindca rosul e rezervat starilor de eroare. Un singur accent, restul neutre, ca
sistemul sa ramana discret.

### Paleta — Dark (default)

```
--bg:    #0f1218   fundal aplicatie
--card:  #181c24   suprafete (carduri, modal, inputuri pe fundal)
--ink:   #e6e9ef   text principal
--muted: #8b93a7   text secundar (label-uri, coduri, „by")
--line:  #262b36   borduri, separatoare
--accent:#2E74D6   azur ROMFAST — butoane primare, pill activ, linkuri, focus
--ok:    #2FBF8F   sent / succes
--warn:  #E0A93B   sending / atentie / Lipsa cod
--err:   #E05D5D   error / needs_data / Date incomplete
```

### Paleta — Light (`[data-theme="light"]`)

```
--bg:    #f5f7fa   fundal (alb-rece ca romfast.ro)
--card:  #ffffff   suprafete
--ink:   #1a1d24   text principal
--muted: #5c6473   text secundar
--line:  #e2e5ea   borduri
--accent:#1F66C9   azur, variantă mai inchisa pentru contrast AA pe alb
--ok:    #15803d   verde AA pe alb
--warn:  #b45309   chihlimbar AA pe alb
--err:   #dc2626   rosu AA pe alb
```

### Paleta — Petrol (`[data-theme="petrol"]`, tema selectabila)

Tema intunecata alternativa, cu accent petrol-teal (directia initiala aleasa, pastrata ca optiune).
Aceleasi neutre-calde inchise; doar accentul difera de azur.

```
--bg:    #0e1416   fundal petrol-inchis
--card:  #161e20   suprafete
--ink:   #e6e9ef   text principal
--muted: #8b93a7   text secundar
--line:  #232c2e   borduri
--accent:#0E7C7B   teal petrol — butoane, pill activ, linkuri, focus
--ok:    #2FBF8F   sent
--warn:  #E0A93B   atentie
--err:   #E05D5D   eroare
```

### Culori de brand (doar wordmark, NU variabile de UI)

```
ROM:  #D1342F   rosu logo
FAST: #2E74D6   albastru logo (= accentul de UI in dark)
```

Contrast: textul principal pe fundal ramane AA in ambele teme; accentul pe alb foloseste varianta
mai inchisa (`#1F66C9`) ca text/linkul sa treaca AA.

## Tipografie

- **UI / titluri**: **IBM Plex Sans** — sans-serif cu caracter ingineresc, open-source, potrivit
  pentru „software serios", parte din limbajul vizual tehnic. Fallback: `system-ui, sans-serif`.
- **Coduri / monospace**: **IBM Plex Mono** — pentru coduri RAR (REV2), VIN, numar inmatriculare,
  detalii tehnice. Inlocuieste `ui-monospace/Menlo` actual cu o familie coerenta cu UI-ul.
- **Incarcare**: self-host `woff2` (subset latin + latin-ext pentru diacritice romanesti) in
  `app/web/static/fonts/`, `font-display: swap`. Fara CDN extern (gateway intern, fara dependente
  de retea la runtime). Pana la self-host, fallback la stiva de sistem nu strica layout-ul.

## Header & branding

- Titlul „Gateway RAR AUTOPASS" **centrat** pe header.
- Sub titlu, mic: **logo-ul ROMFAST** (`/static/romfast_logo.png`, ~28px inaltime). Decizie user
  (2026-06-25, US-012b): se foloseste PNG-ul real al logo-ului (ROM rosu + FAST albastru, fundal
  transparent — lizibil pe light/dark/petrol), NU wordmark-ul text. Wordmark-ul text (`by ROM FAST`
  cu `ROM #D1342F` / `FAST #2E74D6`) ramane documentat ca alternativa, dar livrabila finala
  foloseste imaginea.
- Controalele (comutator tema, versiune, hamburger ☰) raman la **dreapta**, fara a strica
  centrarea optica a titlului (ex. grila 3 coloane: stanga goala/echilibru, centru titlu, dreapta
  controale).
- Responsiv: pe mobil, wordmark-ul ramane sub titlu; controalele nu se suprapun (degrada elegant,
  eventual titlu mai mic).

## Selector de tema

Inlocuieste comutatorul binar soare/luna cu un **buton ciclic** (pattern ca demoanaf.ro): un
singur buton care roteste la fiecare click prin setul de teme, cu iconita + tooltip/`aria-label`
care arata tema curenta („Tema: Light" etc.).

Ordinea ciclului: **Light → Dark → Petrol → Auto → (inapoi la Light)**.

- `Light` → `data-theme="light"` (azur pe alb)
- `Dark` → `data-theme="dark"` (azur pe inchis, comportamentul implicit actual)
- `Petrol` → `data-theme="petrol"` (teal pe petrol-inchis)
- `Auto` → urmeaza `prefers-color-scheme`; rezolva la Light azur sau Dark azur in functie de OS
  (nu seteaza `data-theme` fix, ci il deriva la paint).

Persistenta: preferinta explicita (inclusiv „Auto") in `localStorage`, doar la click. Scriptul
anti-FOUC din `<head>` trebuie sa rezolve „Auto"→light/dark inainte de primul paint (fara blink).
Iconite: ☀ Light, ☾ Dark, ◐ Petrol, ◉ Auto. Default la prima vizita = Auto (OS-aware), ca azi.

## Componente — note de aplicare

- **Pill-uri de stare/filtru**: rotunjite (`border-radius:99px`), ca badge-ul „ROA" de pe
  romfast.ro. Pill activ = fundal accent discret (`color-mix(in srgb, var(--accent) ...)`), text
  pe accent. Categoriile de problema isi pastreaza registrul: Date incomplete/Eroare = `--err`,
  Lipsa cod = `--warn`.
- **Butoane primare**: fundal `--accent`, text alb (neschimbat ca structura, doar culoarea noua).
- **Linkuri / sugestii**: `--accent`.
- **Focus**: `outline:2px solid var(--accent)` (deja folosit pe randuri).
- **Suprafete de stare** (banner, flash, eroare-3n): raman pe `color-mix` peste `--err/--warn/--ok`,
  deci se adapteaza automat la noua paleta si la light/dark.

## Ce NU schimbam

- Mecanismul light/dark existent (anti-FOUC, persistenta `localStorage`, comutator) — il pastram,
  doar reimprospatam variabilele.
- Nu introducem rosu ca accent de UI (conflict cu eroare).
- ~~Nu folosim PNG-ul logo cu efect 3D in interfata (wordmark redat ca text).~~ REVIZUIT
  (decizie user 2026-06-25): logo-ul PNG real e folosit in header (US-012b). Fundal transparent +
  culori proprii il fac lizibil pe toate temele; nu aplicam filtre.
- Nu adaugam un al doilea accent — sistemul ramane monocrom-accent + neutre.

## Legatura cu implementarea (PRD 5.10)

US-012 (header „by ROMFAST" + titlu centrat) si US-013 (paleta) din
`docs/prd/prd-5.10-ux-filtre-pill-paginare-mapari-meniu.md` implementeaza acest sistem. Valorile de
mai sus sunt sursa pentru variabilele din `base.html`.