/* ============================================================ AURESTA — Design Tokens (public/css/tokens.css) ------------------------------------------------------------ JEDYNE ŹRÓDŁO PRAWDY dla design tokenów AURESTA. Wszystkie tokeny (kolory, typografia, układ, promienie, cienie, skala odstępów) są zdefiniowane WYŁĄCZNIE tutaj. Plik musi być wpięty jako PIERWSZY arkusz w każdego widoku, PRZED pozostałymi CSS (style.css, sidebar.css, …). Theming oparty na atrybucie data-theme na (patrz public/js/theme.js): • brak atrybutu -> motyw domyślny "Rosé Noir" (ciemny) — strony marki (landing/SPA/marketing) nie ładują theme.js, więc renderują się na bazowym :root (= ciemny), bez zmian. • data-theme="dark" -> ten sam motyw Rosé Noir (jawnie). • data-theme="light" -> jasny motyw operacyjny (WCAG AA). Grupowanie ":root, :root[data-theme="dark"]" sprawia, że bazowy :root pokrywa przypadek BEZ atrybutu (parytet ze stanem sprzed konsolidacji), a jawny data-theme="dark" daje identyczne wartości. UWAGA: skala cieni --shadow-sm/md/lg/xl jest już UŻYWANA przez komponenty (hierarchia głębi kart, paneli, modali i popoverów — patrz style.css, pos.css, magazyn.css, spa.css, recepcja.css …). Skale --space-* i część --radius-* mogą być nadal częściowo nieużywane i czekać na przepięcie w kolejnych falach. ============================================================ */ /* ============================================================ BAZA + CIEMNY (Rosé Noir) — motyw domyślny ============================================================ */ :root, :root[data-theme="dark"] { /* === AURESTA — Rosé Noir Theme === */ --primary: #E8768F; --primary-hover: #D4617A; --primary-light: #F5C6D0; --bg-dark: #1A0F14; --bg-sidebar: #1A0F14; --bg-primary: #1A0F14; --bg-secondary: #251620; --bg-card: #2A1520; --bg-input: #352030; --bg-hover: #3A2633; --accent: #E8768F; --accent-dim: #C95D74; --accent-hover: var(--primary-hover); --text-primary: #F0E4E8; --text-secondary: #B89AA5; --text-muted: #B08C98; --border: #3D2530; --danger: #E74C3C; --danger-hover: #DC2626; --success: #4CAF50; --warning: #FF9800; --info: #3498DB; --accent-purple: #A78BFA; /* fiolet akcentowy (np. nagłówki kanban CRM) */ /* === Kolory kategorii (globalne, używane m.in. w POS) === */ --cat-1: #E8768F; --cat-2: #7C3AED; --cat-3: #059669; --cat-4: #D97706; --cat-5: #3B82F6; --cat-6: #EC4899; --cat-7: #8B5CF6; --cat-8: #10B981; /* === Tokeny UI (promienie, cień) — wartości istniejące === */ --radius: 10px; --radius-lg: 14px; --shadow: 0 4px 20px rgba(0,0,0,0.3); --touch-min-size: 48px; --sidebar-active: rgba(232, 118, 143, 0.15); --sidebar-hover: rgba(232, 118, 143, 0.08); /* === Szerokość sidebara — JEDNO ŹRÓDŁO PRAWDY dla szerokości panelu i offsetu treści (.app-main) === */ --aside-w: 60px; /* sidebar zwinięty */ --aside-w-expanded: 240px; /* sidebar rozwinięty / przypięty */ /* Zmienne dla strony logowania */ --primary-dark: #110A0E; --gold: #E8768F; --white: #ffffff; --text: #3A2633; --text-light: #8B6B75; --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --logo-filter: none; /* ======================================================== NOWE: Skala odstępów (spacing) — niezależna od motywu. Dodana w fali 1, jeszcze nieużywana przez komponenty. ======================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ======================================================== NOWE: Skala promieni (radius) — niezależna od motywu. --radius (10px) i --radius-lg (14px) pozostają BEZ ZMIAN (parytet). --radius-md aliasuje istniejący --radius. --radius-sm i --radius-xl dodane jako nowe tokeny. ======================================================== */ --radius-sm: 6px; --radius-md: var(--radius); /* alias istniejącego --radius (10px) */ --radius-xl: 24px; /* ======================================================== NOWE (fala 0 — fundament): Skala ANIMACJI — czasy i easingi. Niezależna od motywu (zdefiniowana w bloku bazowym → dziedziczona przez dark/light/bw). W tej fali TYLKO definicje; użycie (przepięcie transition/animation na te tokeny) następuje w fali animacji. Charakterystyka docelowa wg AUDIT-REPORT-2B: mikrointerakcje 120–220 ms, większe przejścia (panele/modale/dropdowny) 200–350 ms, easing = ease-out lub zbliżony cubic-bezier (NIE linear, NIE bounce). ======================================================== */ --dur-fast: 120ms; /* dolny kraniec mikrointerakcji */ --dur-micro: 160ms; /* hover / focus / drobne stany */ --dur-panel: 260ms; /* panele, modale, dropdowny */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* premium ease-out (już obecny w kodzie) */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* symetryczne przejścia */ /* ======================================================== System cieni z color-tint (tło motywu zamiast #000) — UŻYWANY przez komponenty do hierarchii głębi: --shadow-sm -> karty/panele w spoczynku, --shadow-md -> karty interaktywne na hover (unoszenie), --shadow-lg -> popovery, dropdowny, drawery, toasty, --shadow-xl -> modale / dialogi (najwyższa warstwa). Istniejący --shadow pozostaje dla zgodności wstecznej (parytet). Tint ciemnego motywu = kolor tła --bg-dark #1A0F14 = rgb(26,15,20). ======================================================== */ --shadow-sm: 0 1px 3px rgba(26, 15, 20, 0.30); --shadow-md: 0 4px 12px rgba(26, 15, 20, 0.36); --shadow-lg: 0 10px 28px rgba(26, 15, 20, 0.44); --shadow-xl: 0 24px 56px rgba(26, 15, 20, 0.52); /* ======================================================== Aliasy modułu SPA -> globalna paleta (z public/css/spa.css). Spójne z globalną paletą; fallbacki zachowane. ======================================================== */ --spa-massage: #8B5CF6; --spa-facial: #EC4899; --spa-body: var(--success, #34D399); /* Uses global success green */ --spa-nail: var(--accent, #E8768F); /* Uses global accent gold-brown */ --spa-hair: #3B82F6; --spa-sauna: var(--danger, #EF4444); /* Uses global danger red */ --spa-pool: #06B6D4; --spa-fitness: #6366F1; /* Status colors - aligned with global variables */ --spa-confirmed: var(--success, #34D399); --spa-pending: var(--accent, #E8768F); --spa-cancelled: var(--danger, #EF4444); --spa-completed: var(--text-muted, #8B6B75); --spa-no-show: #9333EA; /* Room status colors - unified */ --room-free: var(--success, #34D399); --room-occupied: var(--danger, #EF4444); --room-maintenance: var(--accent, #E8768F); --room-cleaning: #06B6D4; /* ======================================================== Aliasy kalendarza SPA -> globalna paleta (z public/css/spa.css). Fallbacki pozostawione na wypadek ładowania bez globali. ======================================================== */ --spa-cal-bg-dark: var(--bg-primary, #1A0F14); --spa-cal-bg-medium: var(--bg-secondary, #251620); --spa-cal-bg-light: #2E1D28; --spa-cal-border: var(--border, #3D2530); --spa-cal-text: var(--text-primary, #F0E4E8); --spa-cal-text-muted: var(--text-muted, #8B6B75); --spa-cal-accent: var(--accent, #E8768F); --spa-cal-available: var(--bg-card, #2A1520); --spa-cal-partial: var(--warning, #FF9800); --spa-cal-busy: var(--danger, #E74C3C); --spa-cal-selected: var(--accent, #E8768F); --spa-cal-btn-active: var(--primary-hover, #D4617A); --spa-cal-header-accent: var(--accent, #E8768F); /* ======================================================== Kolory statusów timeline recepcji (z public/css/tables.css). Stany z globalnej palety. ======================================================== */ --tl-confirmed: var(--success); --tl-pending: var(--warning); --tl-checkedin: #2196F3; --tl-checkedout: #9E9E9E; --tl-cancelled: var(--danger); /* ======================================================== NOWE (fala kolory→tokeny): neutralna skala szarości + surowe swatche palety (Material/Tailwind) używane bezpośrednio przez starsze moduły (spa.css, admin.css, magazyn.css, style.css). Wszystkie INWARIANTNE względem motywu: zdefiniowane w bloku bazowym, więc mają identyczną wartość w trybie ciemnym i jasnym — dokładnie taką, jaką miały dotychczasowe twarde wartości (podmiana 1:1, ZERO zmiany wyglądu). UWAGA: to NIE są semantyczne tokeny stanu (--danger/--success/ --warning), które zmieniają odcień wraz z motywem. To dosłowne odcienie palety — dlatego są osobne (gdyby zmapować je na tokeny stanu, elementy zmieniłyby kolor w trybie jasnym). ======================================================== */ /* Neutralna skala szarości (numer ≈ luminancja; bazuje na Tailwind gray) */ --neutral-50: #f9fafb; --neutral-100: #f3f4f6; --neutral-200: #e5e7eb; --neutral-250: #e0e0e0; --neutral-300: #d1d5db; --neutral-400: #9ca3af; --neutral-450: #888888; --neutral-500: #6b7280; --neutral-600: #666666; --neutral-700: #374151; --neutral-800: #333333; --neutral-900: #111827; /* Surowe swatche statusów/akcentów palety (niezależne od motywu) */ --red-500: #f44336; /* Material red 500 — dominujący czerwony spa */ --red-400: #f87171; /* Tailwind red 400 — statusy magazynu */ --amber-500: #f59e0b; /* Tailwind amber 500 */ --amber-400: #fbbf24; /* Tailwind amber 400 — statusy magazynu */ --emerald-400: #34d399; /* Tailwind emerald 400 */ --green-400: #4ade80; /* Tailwind green 400 — statusy magazynu */ /* Dekoracyjne, głębokie powierzchnie teal modułu SPA */ --spa-surface-teal: #1a4a4a; --spa-surface-teal-deep: #0d2626; } /* ============================================================ === AURESTA — Light / High-contrast operational theme === Drugi zestaw tokenów dla modułów operacyjnych (POS, KDS, recepcja, finanse, magazyn…) używanych po 8 h w jasnych pomieszczeniach. Jasne tło, ciemny tekst, ten sam akcent (róż), wszystkie pary tekst/tło spełniają WCAG AA (>= 4,5:1). Aktywowany przez (patrz theme.js). ============================================================ */ :root[data-theme="light"] { /* Akcent — ta sama róża marki, ale przyciemniona do kontrastu >= 4,5:1 na jasnym tle (i biały tekst na akcencie >= 5:1). */ --primary: #B6325A; --primary-hover: #9E2B4E; --primary-light: #F3D3DC; --accent: #B6325A; --accent-dim: #8E2745; --accent-hover: var(--primary-hover); /* Powierzchnie — jasne, z subtelnym ciepłym (różanym) tłem. Elewacja rośnie ku bieli: tło < panele < karty. */ --bg-dark: #FBF7F8; --bg-sidebar: #FBF7F8; --bg-primary: #F4EEF0; --bg-secondary: #FBF7F8; --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-hover: #F1E8EC; /* Tekst — ciemny, wysoki kontrast. */ --text-primary: #2A1A20; /* >= 14:1 na każdej powierzchni */ --text-secondary: #6A535E; /* >= 5,8:1 */ --text-muted: #705A65; /* >= 5,2:1 */ --border: #E2D6DB; /* Stany — przyciemnione warianty dla kontrastu tekstu na jasnym tle. */ --danger: #C62828; --danger-hover: #A81E1E; --success: #1E7A30; --warning: #86590B; --info: #1565C0; --accent-purple: #5E35B1; /* przyciemniony fiolet — >= 6:1 na bieli */ /* Kategorie POS — cat-1 (róża) przyciemniona dla czytelności; pozostałe hue pozostają, są wystarczająco nasycone. */ --cat-1: #B6325A; --shadow: 0 4px 16px rgba(40, 20, 30, 0.12); --sidebar-active: rgba(182, 50, 90, 0.12); --sidebar-hover: rgba(182, 50, 90, 0.07); /* Tokeny strony logowania / marki — spójne z trybem jasnym. */ --primary-dark: #2A1A20; --gold: #B6325A; --text: #2A1A20; --text-light: #705A65; /* Logo (różany znak) pozostaje czytelne na jasnym tle. */ --logo-filter: none; /* System cieni tintowany kolorem tła jasnego motywu (rgb(40,20,30) — ten sam ciepły, różany odcień co --shadow). Te same role co w trybie ciemnym; UŻYWANE przez komponenty. */ --shadow-sm: 0 1px 2px rgba(40, 20, 30, 0.08); --shadow-md: 0 4px 12px rgba(40, 20, 30, 0.12); --shadow-lg: 0 10px 28px rgba(40, 20, 30, 0.16); --shadow-xl: 0 24px 56px rgba(40, 20, 30, 0.22); color-scheme: light; } /* ============================================================ === AURESTA — Black & White operational theme (bw) === Trzeci zestaw tokenów: czysto biało-czarny, grafitowy akcent, przyciszone (zeszarzone) stany. Dla modułów operacyjnych, gdzie kolor rozprasza — odpowiednik trybu mono. Aktywowany przez (patrz public/js/theme.js); od tej fali to DOMYŚLNY motyw modułów operacyjnych. Wzorzec docelowy: siostrzany projekt RCP (:root[data-theme="bw"]). ZASADA: zero różu/fioletu/niebieskiego/brzoskwini. Kolor zostaje wyłącznie w funkcjonalnych stanach (--danger/--success/--warning/ --info), reszta to neutralna szarość/grafit/biel. !important na custom properties: wartości motywu biją ewentualne inline custom properties, gdyby kiedyś ustawił je theme.js. (Flaga !important dotyczy kaskady DEKLARACJI custom property — nie wchodzi do podstawionej wartości var(), więc np. color: var(--primary) NIE staje się przez to !important.) NIE rusza bloku bazowego :root ani :root[data-theme="light"] (pełny parytet wsteczny obu istniejących motywów). ============================================================ */ :root[data-theme="bw"] { /* Akcent — grafit zamiast róży. */ --primary: #1F1F1F !important; --primary-hover: #000000 !important; --primary-light: #E5E5E5 !important; --accent: #1F1F1F !important; --accent-dim: #555555 !important; --accent-hover: var(--primary-hover) !important; --primary-dark: #000000 !important; /* Powierzchnie — biel z jasnoszarą gradacją elewacji. */ --bg-dark: #FFFFFF !important; --bg-sidebar: #FFFFFF !important; --bg-primary: #FFFFFF !important; --bg-secondary: #F5F5F5 !important; --bg-card: #FFFFFF !important; --bg-input: #FFFFFF !important; --bg-hover: #ECECEC !important; /* Tekst — czerń na bieli, wysoki kontrast. */ --text-primary: #111111 !important; --text-secondary: #444444 !important; --text-muted: #6B6B6B !important; --text: #111111 !important; --text-light: #6B6B6B !important; --white: #FFFFFF !important; /* Linie i stany — neutralna linia. Sankcjonowane kolory stanu w bw to WYŁĄCZNIE --danger/--success/--warning (stany krytyczne). --info NIE jest już kolorem: neutralizujemy go do grafitu, żeby nigdzie w UI bw nie pojawiał się niebieski (badge „firma/normal", przyciski, liczby, KDS „gotowe" itp. komunikują się etykietą, nie barwą). */ --border: #D0D0D0 !important; --danger: #C0392B !important; --danger-hover: #A81E1E !important; --success: #2E7D32 !important; --warning: #B26A00 !important; --info: #555555 !important; /* Akcenty ozdobne — ZESZARZONE (zero fioletu/złota). */ --accent-purple: #444444 !important; --gold: #1F1F1F !important; --sidebar-active: rgba(31, 31, 31, 0.10) !important; --sidebar-hover: rgba(31, 31, 31, 0.06) !important; /* Kategorie POS — gradacja luminancji szarości #1F1F1F..#9E9E9E (NIE kolory): odróżnialne jasnością, nie barwą. */ --cat-1: #1F1F1F !important; --cat-2: #313131 !important; --cat-3: #434343 !important; --cat-4: #555555 !important; --cat-5: #686868 !important; --cat-6: #7A7A7A !important; --cat-7: #8C8C8C !important; --cat-8: #9E9E9E !important; /* Cienie — neutralny tint rgb(24,24,28), niskie alpha. Te same role co w pozostałych motywach (sm karty / md hover / lg popovery / xl modale). --shadow pozostaje dla zgodności wstecznej. */ --shadow: 0 4px 16px rgba(24, 24, 28, 0.10) !important; --shadow-sm: 0 1px 2px rgba(24, 24, 28, 0.08) !important; --shadow-md: 0 4px 12px rgba(24, 24, 28, 0.10) !important; --shadow-lg: 0 10px 28px rgba(24, 24, 28, 0.14) !important; --shadow-xl: 0 24px 56px rgba(24, 24, 28, 0.18) !important; /* Logo — wymuś mono (negatyw + odbarwienie). */ --logo-filter: invert(1) grayscale(1) !important; /* ── Aliasy modułu SPA — ZESZARZONE (kategorie usług bez barwy) ── */ --spa-massage: #333333 !important; --spa-facial: #474747 !important; --spa-body: #5C5C5C !important; --spa-nail: #1F1F1F !important; --spa-hair: #707070 !important; --spa-sauna: #858585 !important; --spa-pool: #999999 !important; --spa-fitness: #2A2A2A !important; /* Statusy SPA — rozróżniane jasnością; tylko krytyczny -> --danger. */ --spa-confirmed: #2E2E2E !important; /* potwierdzony — ciemny grafit */ --spa-pending: #8C8C8C !important; /* oczekujący — średnia szarość */ --spa-cancelled: var(--danger) !important; /* anulowany — krytyczny */ --spa-completed: var(--text-muted) !important;/* zakończony — szarość tekstu */ --spa-no-show: #5C5C5C !important; /* nieobecność — grafit */ /* Statusy pokoi — wolny=jasny, zajęty=krytyczny(danger), reszta=szarość. */ --room-free: #9E9E9E !important; /* dostępny — najjaśniej */ --room-occupied: var(--danger) !important; /* zajęty — krytyczny */ --room-maintenance: #555555 !important; /* serwis — ciemna szarość */ --room-cleaning: #7A7A7A !important; /* sprzątanie — średnia szarość */ /* ── Aliasy kalendarza SPA — struktura na tokeny bw, stany na szarość ── */ --spa-cal-bg-dark: var(--bg-primary) !important; /* #FFFFFF */ --spa-cal-bg-medium: var(--bg-secondary) !important; /* #F5F5F5 */ --spa-cal-bg-light: #FAFAFA !important; /* (był plum #2E1D28) */ --spa-cal-border: var(--border) !important; /* #D0D0D0 */ --spa-cal-text: var(--text-primary) !important; /* #111111 */ --spa-cal-text-muted: var(--text-muted) !important; /* #6B6B6B */ --spa-cal-accent: var(--accent) !important; /* #1F1F1F */ --spa-cal-available: #FFFFFF !important; /* wolny — najjaśniej */ --spa-cal-partial: #B0B0B0 !important; /* częściowy — średnia szarość */ --spa-cal-busy: var(--danger) !important; /* zajęty/krytyczny — danger */ --spa-cal-selected: var(--accent) !important; /* #1F1F1F */ --spa-cal-btn-active: var(--primary-hover) !important; /* #000000 */ --spa-cal-header-accent: var(--accent) !important; /* #1F1F1F */ /* ── Statusy timeline recepcji — szarość; anulowany -> --danger. ── */ --tl-confirmed: #555555 !important; /* potwierdzony — grafit */ --tl-pending: #8C8C8C !important; /* oczekujący — średnia szarość */ --tl-checkedin: #333333 !important; /* zameldowany — ciemny grafit */ --tl-checkedout: #9E9E9E !important; /* wymeldowany — jasna szarość */ --tl-cancelled: var(--danger) !important; /* anulowany — krytyczny */ color-scheme: light; }