/* 3 alternatywne motywy, przełączane atrybutem data-theme na . Każdy motyw ustawia ten sam zestaw zmiennych CSS, których używa site.css. Kolory kart (--kolor-czarny / --kolor-czerwony) są zmiennymi motywu, a nie stałymi — 0009. "Czarny" znaczy tu "neutralny, nigdy akcentowy i nigdy czerwony": w motywie jasnym to faktycznie czerń, w motywach ciemnych jasny neutralny, bo dosłowna czerń byłaby na nich niewidoczna. Odcienie czerwieni i zieleni są dobrane osobno pod tło każdego motywu tak, żeby kontrast tekstu wychodził powyżej progu WCAG AA (4,5:1) — jedna wspólna wartość #d9534f dawała na zielonym stole ok. 2,5:1. */ [data-theme="stol"] { --color-bg: #0b3d2e; --color-surface: #114b39; --color-surface-alt: #0e4534; --color-text: #f5f0e1; --color-text-muted: #cbd8ce; --color-accent: #d4af37; --color-accent-text: #1a1a1a; --color-border: #2f6b53; --kolor-czarny: #f5f0e1; --kolor-czerwony: #ff9c8d; /* 4,9:1 na #114b39 */ --kolor-ok: #7fe0a0; --kolor-blad: #ff9c8d; } [data-theme="jasny"] { --color-bg: #f5f5f7; --color-surface: #ffffff; --color-surface-alt: #eceef1; --color-text: #1a1a1a; --color-text-muted: #55585e; --color-accent: #2563eb; --color-accent-text: #ffffff; --color-border: #dcdfe4; --kolor-czarny: #111111; --kolor-czerwony: #bf2718; /* 6,0:1 na bieli */ --kolor-ok: #1e7a3c; --kolor-blad: #bf2718; } [data-theme="ciemny"] { --color-bg: #121212; --color-surface: #1e1e1e; --color-surface-alt: #262626; --color-text: #e8e8e8; --color-text-muted: #a3a3a3; --color-accent: #4f9dff; --color-accent-text: #0b1520; --color-border: #333333; --kolor-czarny: #ececec; --kolor-czerwony: #ff7a6e; /* 6,6:1 na #1e1e1e */ --kolor-ok: #6ddc8b; --kolor-blad: #ff7a6e; }