/* ══════════════════════════════════════════════════════════════ 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 { /* ── Ciemny motyw „walizka” (decyzja Artema, 2026-11-14) ── Jasny motyw: zieleń jest akcentem, brąz tuszem na kremowym papierze. Ciemny motyw nie jest jego negatywem, tylko zamienia role: butelkowa zieleń to TŁO, orzechowy brąz (skóra) to AKCENT, krem to tusz. Jeden brąz w trzech jasnościach (akcent, przeszycie, wypełnienie), żeby było spokojnie — mahoń i drugi odcień brązu odrzucone jako „pstre”. Zasady (palety tonalne, Material/Apple): bez czerni, karty o ton jaśniejsze od tła (uniesienie), akcent jaśniejszy niż w jasnym motywie, kontrast drobnego tekstu ≥ 4,5:1. Zastępuje jedną stałą zieleń #0a7a3e w obu motywach (decyzja z 2026-09-07). Nazwy --color-green* zostają, choć w ciemnym motywie to brąz: znaczą „kolor akcentu marki”, a ranking kopiuje te pliki i ma w swoim CSS własne odwołania do nich. AKCENTY (ta grupa, wypełnienie, przeszycie, gwiazdki, panel) mają tu zwykłe wartości jasnego motywu, a ciemne nadpisuje blok „Ciemny motyw: akcenty” na końcu pliku — NIE light-dark(). Panel marki i ciemne sekcje wymuszają color-scheme: dark, więc light-dark() wybrałby w nich wariant ciemny także w jasnym motywie (np. brązowe ikony w ciemnej sekcji jasnej strony). Tła, tekst i ramki zostają przy light-dark(), bo ciemne sekcje i tak nadpisują je wprost. */ --color-green: #0a7a3e; --color-green-hover: #05632a; --color-green-bright: #399a2e; --color-green-soft: #e8f2ea; /* Wypełnienie akcentem z napisem w środku (wciśnięty przełącznik, naklejka). W jasnym motywie to po prostu zieleń z bielą; w ciemnym jasny orzech nie uniósłby kremowego napisu (2,6:1), więc wypełnienie jest ciemnym orzechem, a napis kremowy (7,7:1). */ --color-fill: #0a7a3e; --color-on-fill: #ffffff; /* ── Brąz marki ── --color-ink to KOLOR TEKSTU nagłówków. --color-surface-deep to TŁO ciemnych sekcji (stopka, hero pakietu); w ciemnym motywie odrobinę głębsza zieleń niż tło strony, nie czerń. 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, #f1e7d2); --color-surface-deep: light-dark(#2a1d10, #051b11); --color-text: light-dark(#4a3f33, #d5c9b5); --color-text-muted: light-dark(#7a6d5e, #9f9884); --color-bg: light-dark(#faf8f5, #072317); --color-bg-alt: light-dark(#ffffff, #0f2c1f); /* Karta na sekcji --alt (2026-11-14): w kolorze --color-bg-alt zlewała się z sekcją. Jasny motyw: krem tła strony (jaśniej niż biel się nie da). Ciemny: o ton jaśniej niż sekcja, żeby każda karta na stronie była „uniesiona”, jak na zwykłej sekcji. */ --color-card-on-alt: light-dark(#faf8f5, #16382a); --color-white: #ffffff; /* Ramki w ciemnym motywie mają większy kontrast niż w jasnym (2026-10-17): przy ciemnym tle oko słabiej rozróżnia małe różnice jasności, więc dla tej samej widoczności ramka potrzebuje ok. 1,6:1 i 2,3:1 na karcie (wobec 1,4:1 i 1,8:1 w jasnym). Odcień: ciepły brąz, nie zieleń. */ --color-border: light-dark(#e0d8cc, #4f4430); --color-border-strong:light-dark(#cbbfae, #6b5a40); /* ── Przeszycie kart (.notch--stitched, 2026-11-14) ── Brązowa nić skóry w obu motywach: w jasnym ton tuszu, w ciemnym ciemny orzech. Krawędź przeszytej karty jest prawie niewidoczna — kształt karty niesie przeszycie. */ --color-stitch: #a8917a; --color-stitch-edge: #ebe5dc; --color-danger: light-dark(#b3261e, #ff8a80); --color-star: #c98a00; /* ── 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; /* Akcenty z :root to wartości dla jasnego tła — tu wersje na ciemne tło (dawniej dawał je light-dark() przy color-scheme: dark). W ciemnym motywie zastępuje je blok na końcu pliku. */ --color-green-bright: #4fb83f; --color-green-soft: rgba(22, 163, 85, 0.16); --color-star: #f4b400; --color-stitch: rgba(255, 255, 255, 0.3); --color-stitch-edge: rgba(255, 255, 255, 0.1); } /* ══════════════════════════════════════════════════════════════ CIEMNY MOTYW: AKCENTY Dwa razy ta sama treść, jak przy logo w layout.css: raz dla motywu systemowego (bez jawnego wyboru), raz dla jawnego data-theme="dark". Wartości na :root dziedziczą się jako gotowe kolory, więc ciemne sekcje (color-scheme: dark) dostają akcent swojego motywu, a nie zawsze ciemny. ══════════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-green: #bd815c; /* 4,6:1 na karcie, 5,1:1 na tle */ --color-green-hover: #d6a17d; --color-green-bright: #d6a17d; --color-green-soft: rgba(189, 129, 92, 0.16); --color-fill: #663c23; /* kremowy napis: 7,7:1 */ --color-on-fill: #f1e7d2; --color-stitch: #7d5237; --color-stitch-edge: #3d3020; --color-star: #bd815c; } /* Ciemne sekcje w ciemnym motywie: bez własnych bieli i zieleni z bloku wyżej — biorą tokeny motywu (inherit = wartość rodzica, rozwiązana w ich color-scheme: dark). */ :root:not([data-theme="light"]) :is(.on-deep, .pkg-hero, .home-section--dark, .site-footer) { --color-ink: inherit; --color-text: inherit; --color-text-muted: inherit; --color-border: inherit; --color-border-strong: inherit; --color-bg-alt: inherit; --color-green: inherit; --color-green-hover: inherit; --color-green-bright: inherit; --color-green-soft: inherit; --color-fill: inherit; --color-on-fill: inherit; --color-stitch: inherit; --color-stitch-edge: inherit; --color-star: inherit; } } :root[data-theme="dark"] { --color-green: #bd815c; --color-green-hover: #d6a17d; --color-green-bright: #d6a17d; --color-green-soft: rgba(189, 129, 92, 0.16); --color-fill: #663c23; --color-on-fill: #f1e7d2; --color-stitch: #7d5237; --color-stitch-edge: #3d3020; --color-star: #bd815c; } :root[data-theme="dark"] :is(.on-deep, .pkg-hero, .home-section--dark, .site-footer) { --color-ink: inherit; --color-text: inherit; --color-text-muted: inherit; --color-border: inherit; --color-border-strong: inherit; --color-bg-alt: inherit; --color-green: inherit; --color-green-hover: inherit; --color-green-bright: inherit; --color-green-soft: inherit; --color-fill: inherit; --color-on-fill: inherit; --color-stitch: inherit; --color-stitch-edge: inherit; --color-star: inherit; }