/* ══════════════════════════════════════════════════════════════ TOKENY MARKI — jedyne miejsce, gdzie zmienia się wygląd. Motyw: color-scheme na :root + light-dark() w każdym kolorze. Przełącznik ustawia [data-theme] na (serwerowo, z cookie), więc nie ma migotania przy ładowaniu i nie ma zdublowanego bloku @media prefers-color-scheme. ══════════════════════════════════════════════════════════════ */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ── Zieleń marki ── #0a7a3e — jeden, stały kolor marki w obu motywach (decyzja Artema, 2026-09-07). Wcześniej ciemny motyw miał jaśniejszy odcień (#16a355) celowo, dla kontrastu ≥ 5:1 na ciemnym tle — spójność koloru marki wygrała z tamtą regułą, patrz notatka niżej. */ --color-green: light-dark(#0a7a3e, #0a7a3e); --color-green-hover: light-dark(#05632a, #22bd66); --color-green-bright: light-dark(#399a2e, #4fb83f); --color-green-soft: light-dark(#e8f2ea, rgba(22, 163, 85, 0.16)); /* ── Brąz marki ── --color-ink to KOLOR TEKSTU nagłówków. --color-surface-deep to TŁO ciemnych sekcji. Rozdzielone celowo: dawne --color-dark pełniło obie role naraz, przez co ciemny motyw musiał hardkodować tła w trzech miejscach. */ --color-ink: light-dark(#332517, #f2ece4); --color-surface-deep: light-dark(#2a1d10, #120d08); --color-text: light-dark(#4a3f33, #ded5c9); --color-text-muted: light-dark(#7a6d5e, #9d9083); --color-bg: light-dark(#faf8f5, #1a140e); --color-bg-alt: light-dark(#ffffff, #241b13); --color-white: #ffffff; --color-border: light-dark(#e0d8cc, #382b1e); --color-border-strong:light-dark(#cbbfae, #4d3c2a); --color-danger: light-dark(#b3261e, #ff8a80); --color-star: light-dark(#c98a00, #f4b400); /* ── Zielony panel — nośnik marki ── Oba końce gradientu są na tyle ciemne, że biały tekst trzyma kontrast ≥ 5:1 na całej szerokości. */ --panel-green: linear-gradient(120deg, #064f22 0%, #1f7a2a 100%); /* ── Typografia ── */ --font-body: 'Roboto', sans-serif; --font-heading: 'Oswald', sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-md: 1.125rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-4xl: 3rem; /* Tracking wersalików — Oswald jest wąski, w wersalikach potrzebuje powietrza, inaczej zlewa się w blok. */ --tracking-caps: 0.06em; --tracking-caps-wide: 0.12em; /* ── Rytm ── */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 5rem; --space-4xl: 7rem; /* ── Geometria ── Zero zaokrągleń. Jedyny „miękki” kształt to ścięty prawy górny róg — rymuje się z low-poly misiem (same trójkąty). */ --radius-full: 9999px; --notch: 22px; --notch-sm: 12px; --notch-clip: polygon( 0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100% ); --transition: 0.15s ease; --transition-slow: 0.3s ease; --max-width: 1160px; --container-px: clamp(1rem, 4vw, 2rem); --header-height: 5.33rem; /* 4rem + 33% */ } /* Ciemne sekcje same w sobie są „ciemnym motywem” — wszystko w środku (tekst, ramki, ikony) ma się do nich dostosować bez osobnych reguł per komponent. */ .on-deep, .pkg-hero, .home-section--dark, .site-footer { color-scheme: dark; --color-ink: #f6f1ea; --color-text: rgba(255, 255, 255, 0.86); --color-text-muted: rgba(255, 255, 255, 0.55); --color-border: rgba(255, 255, 255, 0.14); --color-border-strong: rgba(255, 255, 255, 0.26); --color-bg-alt: rgba(255, 255, 255, 0.05); --color-green: #16a355; --color-green-hover: #22bd66; }