/* ============================================================================ PT-TOKENS — Design tokens systemu PT EDU (Warm Gold, „prywatna akademia premium") ============================================================================ Plik: frontend/assets/pt-tokens.css Prefiks: --pt-* (celowo NIE --g1/--g2 — te żyją w panelu koordynatora i kolizja z nimi była realnym ryzykiem; nowy system ma własną, odizolowaną przestrzeń nazw). ZASADY UŻYCIA: 1. Każdy NOWY komponent strefy edukacyjnej (pt-quiz-engine, hub Szkoła, Języki po re-skinie) używa WYŁĄCZNIE tokenów z tego pliku. Zero wartości wpisanych ręcznie w komponentach — to warunek nr 1 definicji „Masterpiece UI" (GOAL_MASTERPLAN_PT_EDU.md, słownik jakości). 2. Ten plik NIE jest jeszcze ładowany przez żaden istniejący panel. Rollout: tylko przez nowe komponenty. Nie podpinaj go „przy okazji" do starych stron. 3. Czasy i easingi animacji żyją w bliźniaczym pliku pt-motion.css — ładuj oba. 4. Fonty (DM Sans, Cormorant Garamond) ładuje strona-host; tutaj tylko stacki. 5. Zmiana wartości tokenu = decyzja projektowa całego systemu (po etapie P2 wyłącznie decyzją orkiestratora), nie lokalna poprawka pod jeden ekran. Estetyka: Warm Gold — cream #FFFDF7, ink #1A1713, gradient #F9C843 -> #F07020 -> #E8580A, DM Sans (body) + Cormorant Garamond (akcenty serif). Bijemy Duolingo/Revolut/Notion jakością wykonania, nie kopiowaniem ich skórek. ========================================================================== */ :root { /* ========================================================================== 1. KOLORY BAZOWE — tożsamość Warm Gold ========================================================================== Złoto to kolor NAGRODY i akcji (CTA, postęp, celebracje) — nie tapeta. Nigdy surowa czerń (#000) ani surowa biel (#FFF) — zawsze off-tone. */ --pt-cream: #FFFDF7; /* Tło aplikacji (L0). Ciepły kremowy — spokój, komfort. */ --pt-paper: #F7F4EE; /* Tło sekcji/wgłębień: sheety, pola, skeleton. */ --pt-white: #FFFEFB; /* Powierzchnia kart (L1). Minimalnie cieplejsza niż #FFF. */ --pt-ink: #1A1713; /* Tekst główny. Ciepła czerń (ton kawy), nigdy #000. */ /* Gradient marki: złoto -> pomarańcz -> ogień. Primary CTA, pasek postępu, wypełnienie XP. Kierunek 135deg = domyślny dla przycisków i pasków. */ --pt-gold: #F9C843; /* Złoto — sukces, nagroda, premium. */ --pt-orange: #F07020; /* Pomarańcz — energia, akcja. */ --pt-fire: #E8580A; /* Ogień — akcent, pilność. Oszczędnie. */ --pt-gradient-brand: linear-gradient(135deg, #F9C843 0%, #F07020 55%, #E8580A 100%); --pt-gradient-gold-soft: linear-gradient(135deg, #FDEEC6 0%, #FBDF9B 100%); /* delikatne złote tło: badge XP, podświetlenie wybranej karty */ /* Złoto pomocnicze */ --pt-gold-soft: #FCF3D9; /* tło chipów/badge w złocie (na cream) */ --pt-gold-border: rgba(249, 200, 67, 0.55); /* obrys wybranej karty odpowiedzi */ --pt-gold-text: #8A6511; /* „złoty" tekst z kontrastem AA na cream (czysty #F9C843 jako tekst NIE przechodzi WCAG) */ /* ========================================================================== 2. NEUTRALE — 10 ciepłych stopni (od cream do ink) ========================================================================== Wszystkie z podtonem ciepłym (żółto-brązowym), żeby grały ze złotem. Skala rosnąca = ciemniej. Role opisane przy każdym stopniu. */ --pt-neutral-50: #FBF8F1; /* tło hover wiersza listy, zebra striping */ --pt-neutral-100: #F1EDE4; /* tło skeletonu, wyłączone pola */ --pt-neutral-200: #E5DFD2; /* separatory, obrysy kart (subtelne) */ --pt-neutral-300: #D2CABA; /* obrysy inputów w spoczynku */ --pt-neutral-400: #B0A794; /* ikony drugorzędne, placeholder */ --pt-neutral-500: #8A8580; /* tekst muted: metryczki, podpisy, hinty */ --pt-neutral-600: #6E675C; /* tekst drugorzędny na jasnym tle */ --pt-neutral-700: #4E473D; /* tekst na tłach paper/gold-soft */ --pt-neutral-800: #2F2A23; /* nagłówki drugorzędne, ikony aktywne */ --pt-neutral-900: #1A1713; /* = --pt-ink; najciemniejszy stopień skali */ /* Obrys uniwersalny karty (warunek „subtle border" z checklisty estetycznej) */ --pt-border-card: 1px solid rgba(26, 23, 19, 0.06); /* ========================================================================== 3. KOLORY SEMANTYCZNE ========================================================================== SUKCES — głęboka, szlachetna zieleń (butelkowa, w stronę lasu). Celowo NIE #58CC02 (arcade'owa zieleń Duolingo jest wprost zakazana w GOAL v2). Ta zieleń gra ze złotem jak w heraldyce: złoto + butelkowa zieleń. BŁĄD — czerwień stonowana, cegiełkowo-terakotowa; komunikuje bez agresji („zero karania wizualnego" — wzorzec feedbacku błędnej odpowiedzi). INFO — ciepły neutral (brąz-taupe); informacja nie konkuruje z nagrodą. Warianty: bazowy (wypełnienia/ikony), strong (tekst na jasnym tle, hover), soft (tło plakietek/sheetów), border (obrysy na tle soft). */ /* Sukces — szlachetna głęboka zieleń */ --pt-success: #1F7A4D; --pt-success-strong: #175E3B; /* tekst „Doskonale!", hover */ --pt-success-soft: #E7F1E9; /* tło karty poprawnej odpowiedzi, sheet sukcesu */ --pt-success-border: rgba(31, 122, 77, 0.45); /* obrys karty poprawnej odpowiedzi */ /* Błąd — czerwień stonowana (terakota, nie alarm) */ --pt-error: #C0452F; --pt-error-strong: #9A3625; /* tekst błędu na jasnym tle */ --pt-error-soft: #F8ECE7; /* tło karty błędnej odpowiedzi */ --pt-error-border: rgba(192, 69, 47, 0.40); /* obrys karty błędnej odpowiedzi */ /* Info — ciepły neutral (brąz herbaciany) */ --pt-info: #8A7357; --pt-info-strong: #6B573F; --pt-info-soft: #F3EEE5; --pt-info-border: rgba(138, 115, 87, 0.35); /* Ostrzeżenie — mapowane na pomarańcz marki (spójność zamiast nowego koloru) */ --pt-warning: #F07020; --pt-warning-strong: #B54F0F; --pt-warning-soft: #FCEEDF; --pt-warning-border: rgba(240, 112, 32, 0.40); /* ========================================================================== 4. SPACING — siatka odstępów ========================================================================== Nazwa tokenu = wartość w px (samoopisowe). Marginesy, paddingi, gapy — wyłącznie z tej skali; wartość spoza skali = błąd projektowy. */ --pt-space-4: 4px; /* mikroodstępy: ikona-tekst, wnętrza badge */ --pt-space-8: 8px; /* gap między chipami, drobne paddingi */ --pt-space-12: 12px; /* gap między kartami odpowiedzi, wnętrza pól */ --pt-space-16: 16px; /* padding kart, boczny margines ekranu mobile */ --pt-space-24: 24px; /* odstęp między blokami wewnątrz sekcji */ --pt-space-32: 32px; /* odstęp między sekcjami ekranu */ --pt-space-48: 48px; /* oddech wokół hero / wyniku sesji */ /* Minimalny cel dotykowy (Masterpiece UI warunek 2: >= 44x44 px) */ --pt-touch-min: 44px; /* Minimalna wysokość karty odpowiedzi ABCD (wzorzec ekranu zadania, pkt 4) */ --pt-answer-min-h: 56px; /* ========================================================================== 5. RADIUS — promienie zaokrągleń ========================================================================== */ --pt-radius-card: 20px; /* karty, modale, sheety, treść zadania */ --pt-radius-control: 14px; /* przyciski, inputy, karty odpowiedzi ABCD */ --pt-radius-sm: 8px; /* małe elementy: checkbox, miniatury, tagi kodu */ --pt-radius-pill: 99px; /* badge, chipy, combo pill, pasek postępu */ /* ========================================================================== 6. CIENIE — 3 poziomy głębi + złoty glow ========================================================================== Warstwy głębi (Depth Layering): L0 tło cream (bez cienia) -> L1 karty (shadow-1) -> L2 elementy podniesione: modal, dropdown, sheet (shadow-2 lub 3) -> L3 toast/tooltip (shadow-3). Cień zawsze z ciepłej czerni ink w rgba — nigdy twardy szary. */ --pt-shadow-1: 0 1px 3px rgba(26, 23, 19, 0.05); /* subtle — karta w spoczynku */ --pt-shadow-2: 0 4px 16px rgba(26, 23, 19, 0.07); /* medium — karta hover, dropdown */ --pt-shadow-3: 0 12px 40px rgba(26, 23, 19, 0.12); /* dramatic — modal, bottom sheet, toast */ /* „Golden Glow" — sygnatura marki: złota poświata na interakcji i celebracji */ --pt-glow-gold: 0 0 24px rgba(249, 200, 67, 0.30); /* pełny: CTA, celebracja, aktywny element */ --pt-glow-gold-soft: 0 0 20px rgba(249, 200, 67, 0.15); /* subtelny: hover/focus elementów interaktywnych */ /* Pierścień focus (focus-visible) — złoty, nigdy domyślny niebieski */ --pt-focus-ring: 0 0 0 3px rgba(249, 200, 67, 0.35); /* ========================================================================== 7. TYPOGRAFIA ========================================================================== Dwie rodziny, dwie role: - DM Sans: body, przyciski, labele, treść zadań (czytelność na mobile); - Cormorant Garamond: akcenty serif — duże liczby (wynik „8/10", XP), cytaty, nagłówki ceremonialne (ekran wyniku). Luksusowy kontrapunkt. Zasada: maksymalnie 3 rozmiary na jednym ekranie — hierarchia ma być oczywista bez czytania. Polskie diakrytyki wszędzie, UTF-8 wprost. */ --pt-font-body: 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; --pt-font-accent: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* Skala rozmiarów (nazwa = px). Role przy każdym stopniu. */ --pt-text-12: 12px; /* metryczka zadania, podpisy pod ikonami, drobny print */ --pt-text-13: 13px; /* badge, hinty, tekst pomocniczy */ --pt-text-14: 14px; /* labele formularzy, tekst drugorzędny */ --pt-text-15: 15px; /* body domyślne (listy, opisy, ustawienia) */ --pt-text-16: 16px; /* treść zadania CKE — dolna granica wzorca (16-17 px) */ --pt-text-17: 17px; /* treść zadania CKE — górna granica; przyciski CTA */ --pt-text-20: 20px; /* tytuły kart, nagłówki sekcji na mobile */ --pt-text-24: 24px; /* nagłówki ekranów (H2) */ --pt-text-28: 28px; /* nagłówki hero (H1 mobile) */ --pt-text-32: 32px; /* wielkie liczby: wynik sesji, licznik XP (font accent) */ /* Interlinia */ --pt-leading-tight: 1.2; /* nagłówki, wielkie liczby */ --pt-leading-normal: 1.4; /* labele, przyciski, badge */ --pt-leading-relaxed: 1.6; /* body i treść zadania (wzorzec: 16-17 px / 1.6) */ /* Grubości (DM Sans ma pełny zakres; Cormorant używaj 500-600) */ --pt-weight-regular: 400; --pt-weight-medium: 500; --pt-weight-semibold: 600; --pt-weight-bold: 700; /* Odstępy międzyliterowe */ --pt-tracking-tight: -0.01em; /* duże nagłówki i liczby */ --pt-tracking-wide: 0.06em; /* UPPERCASE metryczki i badge (np. „MATURA PP") */ /* ========================================================================== 8. Z-INDEX — jedna skala dla całej strefy edukacyjnej ========================================================================== Duże skoki między poziomami = miejsce na warianty bez przenumerowania. Zasada: komponent bierze token, nigdy własną liczbę. */ --pt-z-base: 1; /* zawartość ekranu */ --pt-z-dropdown: 100; /* dropdowny, popovery, lightbox rysunku */ --pt-z-sticky: 200; /* sticky: górny pasek quizu, panel „Tekst źródłowy" */ --pt-z-fab: 300; /* FAB pomocy (na ekranie zadania FAB ZNIKA — wzorzec) */ --pt-z-sheet: 900; /* bottom sheet: feedback odpowiedzi, klawiatura mat. */ --pt-z-modal: 1000; /* modale + backdrop (np. „Na pewno przerwać?") */ --pt-z-toast: 2000; /* toasty, banery Live Activity */ --pt-z-tooltip: 3000; /* tooltipy — zawsze na wierzchu */ /* ========================================================================== 9. POWIERZCHNIE POMOCNICZE ========================================================================== */ /* Backdrop modala/sheeta: przyciemnienie ciepłą czernią + blur nakłada komponent (backdrop-filter: blur(8px) saturate(1.3)) */ --pt-backdrop: rgba(26, 23, 19, 0.45); /* Zaznaczenie tekstu (::selection) — złote, sygnatura marki */ --pt-selection-bg: rgba(249, 200, 67, 0.40); /* ========================================================================== 10. WARSTWA DOPAMINY (append 2026-07-21 — Prawo Dominika pkt 1) ========================================================================== Żywe kolory feedbacku i celebracji. Warm Gold zostaje BAZĄ tożsamości (tło, chrome, CTA); poniższe tokeny wolno używać WYŁĄCZNIE w momentach nagrody: poprawna odpowiedź, combo, konfetti, ekran wyniku. Zieleń żywa celowo NIE #58CC02 (zakaz kopiowania skórki Duolingo 1:1). */ --pt-success-vivid: #17C964; /* żywa, soczysta zieleń sukcesu */ --pt-success-vivid-deep: #0E9F4C; /* ciemniejszy stopień: tekst/ikony na soft */ --pt-success-vivid-soft: #E2F9EC; /* tło karty poprawnej odpowiedzi (żywe) */ --pt-success-vivid-border: rgba(23, 201, 100, 0.60); /* obrys karty poprawnej odpowiedzi */ --pt-glow-success: 0 0 24px rgba(23, 201, 100, 0.35); /* zielony glow celebracji */ /* Flash overlay całego ekranu (opacity animowane przez komponent) */ --pt-flash-success: radial-gradient(ellipse at 50% 42%, rgba(23, 201, 100, 0.26) 0%, rgba(249, 200, 67, 0.16) 55%, rgba(23, 201, 100, 0.05) 100%); --pt-flash-error: radial-gradient(ellipse at 50% 42%, rgba(192, 69, 47, 0.16) 0%, rgba(192, 69, 47, 0.05) 100%); /* Flash STRONG (append 2026-07-21, runda 1 poprawek): puls musi być ODCZUWALNY jak w starym silniku lang (flashOverlay), nie formalny. Zieleń wyraźnie mocniejsza; błąd nadal łagodniejszy (zero karania). */ --pt-flash-success-strong: radial-gradient(ellipse at 50% 42%, rgba(23, 201, 100, 0.42) 0%, rgba(249, 200, 67, 0.26) 55%, rgba(23, 201, 100, 0.10) 100%); --pt-flash-error-strong: radial-gradient(ellipse at 50% 42%, rgba(192, 69, 47, 0.24) 0%, rgba(192, 69, 47, 0.08) 100%); /* Mix kolorów konfetti (canvas czyta te tokeny przez getComputedStyle) */ --pt-confetti-1: #F9C843; /* złoto marki */ --pt-confetti-2: #F07020; /* pomarańcz marki */ --pt-confetti-3: #17C964; /* żywa zieleń */ --pt-confetti-4: #8B5CF6; /* fiolet celebracji */ --pt-confetti-5: #3B82F6; /* błękit celebracji */ --pt-confetti-6: #EC4899; /* róż celebracji */ /* Combo pill — eskalacja serii */ --pt-combo-fire-glow: 0 0 20px rgba(240, 112, 32, 0.55); } /* ============================================================================ GLOBALNE DETALE MARKI (bezpieczne — działają dopiero na elementach .pt-*) ========================================================================== */ /* Złote zaznaczenie tekstu w komponentach systemu PT */ [class^="pt-"] ::selection, [class^="pt-"]::selection { background: var(--pt-selection-bg); color: var(--pt-ink); } /* Złoty pierścień focus zamiast domyślnego niebieskiego */ [class^="pt-"]:focus-visible { outline: none; box-shadow: var(--pt-focus-ring); }