/* * Tanie Kasy - tokeny designu. * * Wartosci wyciagniete z projektu Figma "Tanie kasy" (node 1:675, makieta 1920px). * Projekt nie uzywa zmiennych Figmy, wiec kolory i skala sa zmapowane z surowych * wartosci uzytych w makiecie. Zrodlo prawdy dla calego motywu - nie wpisuj * hexow bezposrednio w main.css, dodaj token tutaj. */ :root { /* --- Kolory --- */ --tk-color-ink: #141414; /* tekst podstawowy, stopka */ --tk-color-brand: #2e61b5; /* granatowy niebieski - CTA, banery, nagl. */ --tk-color-accent: #55c6f2; /* jasny blekit - akcenty, ikony, podkreslenia */ --tk-color-surface: #f0fbff; /* tlo sekcji (bardzo jasny blekit) */ --tk-color-border: #cedfe6; /* obramowania kart i separatory */ --tk-color-sale: #f25050; /* badge "Promocja", ceny promocyjne */ --tk-color-white: #ffffff; /* --- Typografia --- */ --tk-font-base: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --tk-weight-normal: 400; --tk-weight-bold: 700; /* Skala z makiety */ --tk-text-xs: 0.75rem; /* 12px - drobny tekst, metki */ --tk-text-sm: 0.875rem; /* 14px - nawigacja, opisy */ --tk-text-base: 1rem; /* 16px - tekst podstawowy */ --tk-text-md: 1.125rem; /* 18px - lead */ --tk-text-lg: 1.3125rem; /* 21px - nazwy produktow */ --tk-text-xl: 1.5rem; /* 24px - naglowki kart */ --tk-text-2xl: 2rem; /* 32px - naglowki sekcji */ --tk-text-3xl: 3rem; /* 48px - naglowek hero */ /* --- Zaokraglenia --- */ --tk-radius-sm: 25px; /* przyciski, karty produktow, inputy */ --tk-radius-md: 40px; --tk-radius-lg: 50px; --tk-radius-xl: 72px; /* duze bloki: hero, baner leasingowy */ --tk-radius-full: 9999px; /* --- Odstepy --- */ --tk-space-3xs: 5px; --tk-space-2xs: 8px; --tk-space-xs: 10px; --tk-space-sm: 15px; --tk-space-md: 20px; --tk-space-lg: 30px; --tk-space-xl: 40px; --tk-space-2xl: 60px; --tk-space-3xl: 100px; --tk-space-4xl: 140px; /* --- Layout --- */ --tk-container: 1420px; /* szerokosc tresci w makiecie 1920px */ --tk-gutter: 20px; } /* * Zmienne Blocksy nadpisane tokenami - motyw maluje nimi przyciski w calym * sklepie (koszyk, zamowienie, konto). Kolory ida z palety ustawionej * skryptem design/set-color-palette.php. * * Deklarujemy je na body, nie na :root: dynamiczny CSS Blocksy drukuje sie * w po naszych arkuszach, wiec na :root by nas przebil. Wartosc * odziedziczona z body wygrywa u potomkow niezaleznie od kolejnosci regul. */ body { --theme-button-font-size: 1rem; --theme-button-font-weight: 700; --theme-button-min-height: 50px; }