/* ============================================================ TOKENY — jedyne źródło kolorów, typografii i odstępów. xV-Bet / Muszkieterzy → TYPOWI.PL (on) + TYPOWA.PL (ona) Zasada: NIKT nie wpisuje kolorów na sztywno. Wszystko bierze się z tych zmiennych. Ten plik jest wspólny dla: • warstwy graficznej strony (obie skórki), • przyszłej aplikacji mobilnej (te same wartości jako motyw). Zmiana skórki = jeden atrybut na : albo ============================================================ */ :root{ --r-sm:8px; --r:14px; --r-lg:20px; --gap:16px; --pad:20px; --font:'Segoe UI',system-ui,-apple-system,Roboto,sans-serif; --serif:Georgia,'Times New Roman',serif; /* Liczby w aplikacji ida monospace'em z rowna szerokoscia cyfr — kursy, szanse i bilanse maja stac w kolumnie i dac sie porownac wzrokiem. */ --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; --tier-good:#2fb866; --tier-mid:#f0a63b; --tier-bold:#e8557f; } [data-motyw="on"]{ --bg:#0a111e; --bg2:#0d1626; --panel:#131d31; --panel2:#182338; --line:#243349; --tx:#eef3fb; --mut:#93a4bd; --akcent:#f5b544; --akcent-tx:#0a111e; --naglowek:var(--font); --hero-grad:linear-gradient(120deg,#0c1524,#0a111e 60%); /* rozszerzenia wizualne — nadal wyłącznie tokeny */ --hero-overlay:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 34%,color-mix(in srgb,var(--bg) 30%,transparent) 72%,color-mix(in srgb,var(--bg) 10%,transparent) 100%); --shadow:0 18px 60px color-mix(in srgb,var(--bg) 75%,transparent); --shadow-soft:0 10px 28px color-mix(in srgb,var(--bg) 55%,transparent); --glass:color-mix(in srgb,var(--panel) 88%,transparent); --glass-strong:color-mix(in srgb,var(--panel) 96%,transparent); --akcent-soft:color-mix(in srgb,var(--akcent) 16%,transparent); --line-soft:color-mix(in srgb,var(--line) 70%,transparent); --tx-soft:color-mix(in srgb,var(--tx) 82%,transparent); --mut-soft:color-mix(in srgb,var(--mut) 55%,transparent); --tier-good-soft:color-mix(in srgb,var(--tier-good) 15%,var(--panel)); --tier-mid-soft:color-mix(in srgb,var(--tier-mid) 15%,var(--panel)); --tier-bold-soft:color-mix(in srgb,var(--tier-bold) 15%,var(--panel)); } [data-motyw="ona"]{ --bg:#fbf6f1; --bg2:#ffffff; --panel:#ffffff; --panel2:#fdf3f0; --line:#f0e2e6; --tx:#2c2430; --mut:#6b5d6a; /* przyciemnione: #8a7d88 dawalo 3.6:1 na kremie, ponizej AA */ --akcent:#e84a7f; --akcent-tx:#ffffff; --naglowek:var(--serif); --hero-grad:linear-gradient(120deg,#fff5f2,#fbf1ee 60%); } /* ============================================================ WARSTWA APLIKACJI (strony po zalogowaniu) ------------------------------------------------------------ Do 08.2026 lib.php mial WLASNY :root z 13 kolorami wpisanymi na sztywno, a w regulach siedzialo jeszcze ~170 twardych hexow. Skorka damska jest JASNA (krem + ciemny tekst), wiec kazdy taki kolor by ja rozwalil. Ponizsze tokeny sa jedynym zrodlem prawdy dla obu skorek — i dla przyszlej apki mobilnej, ktora zaimportuje te same wartosci jako motyw. ZASADA: w CSS aplikacji nie ma prawa wystapic zaden #hex. ============================================================ */ /* --- tokeny pochodne: MUSZA byc w obu skorkach --------------- Custom property liczy sie na elemencie, na ktorym jest zapisana. Skoro data-motyw siedzi na , to formula z var(--bg) zapisana tylko w bloku "on" nigdy nie policzy sie dla "ona" — dlatego kazdy blok ma wlasny komplet. */ [data-motyw="on"],[data-motyw="ona"]{ --shadow:0 18px 60px color-mix(in srgb,var(--bg) 75%,transparent); --shadow-soft:0 10px 28px color-mix(in srgb,var(--bg) 55%,transparent); --glass:color-mix(in srgb,var(--panel) 88%,transparent); --glass-strong:color-mix(in srgb,var(--panel) 96%,transparent); --akcent-soft:color-mix(in srgb,var(--akcent) 16%,transparent); --line-soft:color-mix(in srgb,var(--line) 70%,transparent); --tx-soft:color-mix(in srgb,var(--tx) 82%,transparent); --mut-soft:color-mix(in srgb,var(--mut) 55%,transparent); --tier-good-soft:color-mix(in srgb,var(--tier-good) 15%,var(--panel)); --tier-mid-soft:color-mix(in srgb,var(--tier-mid) 15%,var(--panel)); --tier-bold-soft:color-mix(in srgb,var(--tier-bold) 15%,var(--panel)); /* wspolne dla obu skorek — liczone z kolorow skorki */ --rad:var(--r); --sh:var(--shadow); --sh2:var(--shadow-soft); --line2:color-mix(in srgb,var(--line) 70%,var(--tx)); --hover:color-mix(in srgb,var(--acc) 9%,transparent); --th-bg:color-mix(in srgb,var(--tx) 4%,transparent); --focus-ring:0 0 0 3px color-mix(in srgb,var(--acc) 28%,transparent); --panel-grad:linear-gradient(165deg, color-mix(in srgb,var(--panel) 88%,var(--tx) 4%), color-mix(in srgb,var(--panel) 94%,var(--bg))); /* Recepty stanow (przycisk/ok/blad/danger/avatar/pasek) NIE sa wyprowadzane wzorem. Mieszanie nasyconego koloru z granatowym panelem przesuwa odcien — czerwony komunikat wychodzil fioletowy. To sa decyzje projektowe, wiec kazda skorka podaje je wprost nizej. */ } /* --- skorka CIEMNA: wartosci 1:1 z dotychczasowego lib.php --- */ [data-motyw="on"]{ /* --acc = tlo przycisku --acc2 = akcent CZYTELNY JAKO TEKST na tle tej skorki --acc-hi = tlo przycisku po najechaniu Na ciemnym tle czytelny akcent jest JASNIEJSZY od tla przycisku, na jasnym MUSI byc ciemniejszy — dlatego to trzy osobne tokeny, a nie jeden „akcent" i jeden „akcent 2". */ /* Do 08.2026 warstwa po zalogowaniu stala na blekicie, a strona glowna na bursztynie — przejscie przez logowanie bylo zmiana marki. Teraz aplikacja uzywa tego samego akcentu co landing. --acc wypelnienie elementu interaktywnego (przycisk, awatar) --acc2 akcent JAKO TEKST (odnosnik, nadtytul) — musi trzymac AA --acc-hi wypelnienie po najechaniu */ --acc:#f5b544; --acc2:#f5b544; --acc-hi:#ffc763; --good:#3ddc84; --warn:#f5a623; --gold:#e0bd6a; --zle:#d4566b; --tx-mocny:#ffffff; --btn-tx:#0a111e; --ok-tx:#8ef0bd; --err-tx:#ffb4c0; --dgr-tx:#ff9aa8; --dgr-tx-hi:#ffb4c0; --ava-tx:#20160a; --top-bg:linear-gradient(180deg,rgba(18,28,48,.92),rgba(10,17,30,.72)); --top-cien:0 1px 0 rgba(224,189,106,.12),0 8px 24px rgba(0,0,0,.28); --btn-bg:var(--acc); --btn-cien:none; --ava-grad:linear-gradient(160deg,#f2d98a,#c69a3e); /* uzywane juz tylko przez stare reguly */ --ok-bg:linear-gradient(180deg,#153026,#122a21); --ok-line:#2f6b4f; --err-bg:linear-gradient(180deg,#3a1e24,#2e1820); --err-line:#6b2f3a; --dgr-line:#6b2f3a; --dgr-line-hi:#a2313f; --dgr-bg-hi:rgba(180,60,80,.16); --warn-bg:linear-gradient(180deg,#302a15,#2a2412); --warn-line:#6b5a2f; --warn-tx:#ffd694; --bar-grad:linear-gradient(90deg,#2fa968,#3ddc84); /* Dokladnie ta sama poswiata co przed przejsciem na tokeny — te granaty sa stonowane i nie da sie ich czysto wyprowadzic z --acc. */ --body-glow: radial-gradient(1200px 560px at 12% -12%, rgba(43,74,120,.55) 0%, transparent 60%), radial-gradient(1000px 560px at 100% -5%, rgba(224,189,106,.10) 0%, transparent 55%), radial-gradient(900px 700px at 90% 110%, rgba(43,74,120,.35) 0%, transparent 60%); } /* --- skorka JASNA (TYPOWA.PL): kontrasty dobrane pod krem ---- */ [data-motyw="ona"]{ /* #e84a7f na kremie daje 3.67:1 — ponizej AA dla tekstu tej wielkosci. Jako TEKST idzie wiec ciemniejszy rozowy (5.87:1), a #e84a7f zostaje tam, gdzie jest tlem (--akcent). Hover przycisku w jasnej skorce ciemnieje, a nie jasnieje — inaczej bialy napis na nim spadalby do 3.67:1. */ --acc:#c2185b; --acc2:#c2185b; --acc-hi:#a8134f; --good:#1b7a4b; --warn:#8a5600; --gold:#936823; --zle:#c02742; /* zloty przyciemniony: #b07d2a dawal 3.36:1 na kremie */ --tx-mocny:#150f19; /* Na kremowym tle cien liczony z --bg bylby kremowy, czyli zaden. Jasna skorka potrzebuje wlasnego, delikatnego i ciemnego. */ --shadow:0 12px 34px rgba(74,44,58,.13); --shadow-soft:0 4px 14px rgba(74,44,58,.09); --btn-tx:#ffffff; --ok-tx:#14663f; --err-tx:#a3253c; --dgr-tx:#b02338; --dgr-tx-hi:#8d1a2b; --ava-tx:#ffffff; --top-bg:linear-gradient(180deg,rgba(255,255,255,.94),rgba(253,243,240,.82)); --top-cien:0 1px 0 rgba(176,125,42,.14),0 8px 24px rgba(74,44,58,.08); --btn-bg:var(--acc); --btn-cien:none; --ava-grad:linear-gradient(160deg,#e8a0bd,#c2185b); --ok-bg:linear-gradient(180deg,#e9f7ef,#dff2e8); --ok-line:#a5d8bd; --err-bg:linear-gradient(180deg,#fdeef1,#fbe2e7); --err-line:#f0b4c0; --dgr-line:#e8aab5; --dgr-line-hi:#c9788a; --dgr-bg-hi:rgba(192,39,66,.10); --warn-bg:linear-gradient(180deg,#fdf3e0,#faedd6); --warn-line:#e0c48a; --warn-tx:#7a5200; --bar-grad:linear-gradient(90deg,#2fa968,#1b7a4b); --body-glow: radial-gradient(1200px 560px at 12% -12%, color-mix(in srgb,var(--akcent) 12%,transparent) 0%, transparent 60%), radial-gradient(1000px 560px at 100% -5%, color-mix(in srgb,var(--gold) 8%,transparent) 0%, transparent 55%); }