/* ========================================================================== ALDAR FARMA — variables.css Design tokens. Jedyne miejsce z surowymi wartościami. Komponenty korzystają wyłącznie z tokenów semantycznych (sekcja 2). ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PALETA BAZOWA Skala zieleni jest wyprowadzona z koloru logotypu: #41880f (barwa 95°, nasycenie 80%, jasność 30%). To zieleń trawiasta, wpadająca w żółć — wyraźnie inna od chłodnej zieleni „leśnej". Cała skala trzyma tę samą barwę, żeby interfejs nie rozjeżdżał się z logotypem. Kluczowa konsekwencja kontrastu: sam kolor logo (--green-500) daje z bielą tylko 4.42:1, czyli poniżej progu AA dla tekstu. Dlatego tłem przycisków z białym napisem jest --green-600 (5.09:1), a --green-500 pełni rolę akcentu graficznego. --------------------------------------------------------------------- */ --green-950: #0f2103; /* stopka, najciemniejsze sekcje */ --green-900: #183404; /* sekcje odwrócone */ --green-800: #234a07; --green-700: #30660a; /* tekst i nagłówki w kolorze marki (6.9:1 na bieli) */ --green-600: #3b7d0c; /* tło przycisków z białym tekstem (5.1:1) */ --green-500: #41880f; /* ★ KOLOR LOGOTYPU — akcenty, ikony, obramowania */ --green-400: #5ba527; /* jasny akcent na ciemnym tle */ --green-300: #90cc66; /* tekst akcentowany na ciemnym tle (8.9:1) */ --green-200: #c3e0ae; --green-100: #e4f1da; /* tło informacyjne */ --green-50: #f3f9ee; /* Wheat — drugi akcent, do wyróżnień i sekcji maszynowej. Ta sama zasada co przy zieleni: nigdy jako tło pod białym tekstem. */ --wheat-700: #8c7029; --wheat-600: #a98a34; --wheat-500: #cdaa4c; --wheat-300: #e3cd94; --wheat-100: #f7f0dc; /* Neutralne — ciepłe, dostrojone do bieli z logotypu (#f7f7f7). Zimna szarość gryzie się z żółtawą zielenią marki. */ --white: #ffffff; --sand-50: #f7f7f5; --sand-100: #efefec; --sand-200: #e2e2dd; --sand-300: #cfcfc8; --gray-600: #55554f; --gray-500: #6b6b66; --gray-400: #8f8f88; --graphite: #222222; /* tekst główny; logotyp używa #030303 */ /* Wariant kolorystyczny paneli — prawie czarny z chłodnym, morskim odcieniem (nie zielony). Używany wyłącznie tam, gdzie potrzeba wizualnej odmiany od zielonych paneli (np. sekcja marek własnych), żeby strona złożona z samych zielonych bloków nie zlewała się w jedną plamę. --ink-950 to punkt odniesienia (dokładny zadany kolor); --ink-900 to faktyczna baza panelu — o cień jaśniejsza, bo czysta czerń pod miękką poświatą (patrz layout.css) wygląda na dziurę, nie na głębię. */ --ink-950: #0d1313; --ink-900: #121b1b; /* Stany */ --success: #2f7d32; --error: #b3261e; --warning: #8c6d1f; /* --------------------------------------------------------------------- 2. TOKENY SEMANTYCZNE — tych używają komponenty --------------------------------------------------------------------- */ --bg: var(--sand-50); --bg-alt: var(--sand-100); --bg-elevated: var(--white); --bg-inverse: var(--green-900); --bg-inverse-deep: var(--green-950); --text: var(--graphite); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-inverse: var(--white); --text-on-dark-muted: rgba(255, 255, 255, 0.74); /* Podział ról: ZIELEŃ buduje strukturę (panele, nagłówki, tło), ZŁOTO oznacza akcję. Dzięki temu na stronie jest dokładnie jeden kolor, który znaczy „kliknij tutaj" — i użytkownik uczy się go po pierwszym ekranie. Złoto #cdaa4c z ciemnozielonym tekstem daje 7.6:1 (AAA) na panelu i 5.9:1 na jasnym tle. Nigdy nie stawiamy na nim białego napisu. */ --brand: var(--green-700); /* nagłówki i linki w kolorze marki */ --brand-solid: var(--green-600); /* zielone tło z białym tekstem (5.1:1) */ --brand-hover: var(--green-800); --accent: var(--green-500); /* kolor logotypu — akcent graficzny */ --accent-ink: var(--green-700); /* zieleń czytelna jako tekst na jasnym */ --accent-bright: var(--green-400); /* akcent na ciemnym tle */ --accent-light: var(--green-300); /* tekst akcentowany na ciemnym tle */ /* Akcent marki, nie złoto: cała strona trzyma się jednej rodziny barw. --cta to teraz TŁO Z TEKSTEM (przyciski, plakietki solidne) — dlatego stoi na --green-600, nie na dokładnym #41880f. Sam kolor logotypu (--green-500) z bielą daje 4.42:1, poniżej progu AA dla zwykłego tekstu; --green-600 daje 5.09:1 i jest z tej samej barwy, tylko o włos ciemniejszy — różnicy praktycznie nie widać, a przyciski zostają czytelne. Tam, gdzie kolor jest samym TEKSTEM/ikoną/obwódką na dużym, pogrubionym elemencie (nagłówki, plakietki liczb) — używać wprost --accent (= --green-500 = #41880f), bo tam wystarczy próg 3:1 dla dużego tekstu. */ --cta: var(--green-600); --cta-hover: var(--green-700); --cta-ink: var(--white); --highlight: var(--green-500); /* dokładny #41880f — wyróżnienia w nagłówkach */ --highlight-ink: var(--green-700); /* tekst na jasnozielonych plakietkach (5.9:1) */ --border: var(--sand-200); --border-strong: var(--sand-300); --border-inverse: rgba(255, 255, 255, 0.16); --focus-ring: var(--green-400); /* czytelny i na jasnym, i na ciemnym tle */ /* --------------------------------------------------------------------- 3. TYPOGRAFIA --------------------------------------------------------------------- */ --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Skala modularna 1.25, płynna przez clamp() */ --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: clamp(1.0625rem, 0.99rem + 0.35vw, 1.25rem); --text-xl: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --text-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem); --text-4xl: clamp(2.25rem, 1.75rem + 2.4vw, 3.5rem); --text-hero: clamp(2.625rem, 1.85rem + 3.9vw, 5rem); --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.35; --leading-base: 1.65; --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-widest: 0.14em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; /* --------------------------------------------------------------------- 4. PRZESTRZEŃ --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Uwaga: sąsiadujące sekcje sumują swoje odstępy (padding nie zlewa się jak margines), więc realna przerwa między nimi to 2 × --section-y. Stąd wartości niższe, niż mogłoby się wydawać przy „dużo światła". */ --section-y: clamp(2.75rem, 1.5rem + 4.5vw, 5.5rem); --section-y-tight: clamp(2rem, 1.25rem + 3vw, 3.5rem); --container: 1240px; --container-wide: 1440px; --container-text: 68ch; --gutter: clamp(1.25rem, 4vw, 2.5rem); /* --------------------------------------------------------------------- 5. KSZTAŁT I GŁĘBIA --------------------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-full: 999px; /* Panele — duże, zaokrąglone bloki wpuszczone w tło strony. To główny nośnik charakteru layoutu: zamiast sekcji rozciągniętych na pełną szerokość ekranu, treść siedzi w kartach z marginesem. */ --panel-inset: clamp(0.5rem, 0.9vw, 0.875rem); --radius-panel: clamp(18px, 2.2vw, 34px); --panel-pad: clamp(1.25rem, 3.5vw, 3.5rem); /* Odstęp boczny wewnątrz panelu pełnoszerokościowego. Panel idzie przez cały ekran, a sekcje wokół niego siedzą w kolumnie 1240 px. Żeby napisy w panelu stanęły w jednej linii z tymi sekcjami, odstęp musi pokryć połowę nadmiaru ponad kolumnę plus zwykły margines. • ekran wąski → wygrywa --panel-pad (zwykły odstęp od krawędzi), • ekran szeroki → wygrywa wyliczenie i treść trafia w kolumnę. PUŁAPKA: procent w `padding` liczy się od szerokości BLOKU NADRZĘDNEGO, a nie od samego elementu. Dlatego potrzebne są dwie wersje — różnią się o margines panelu, bo w każdej z nich 100% znaczy co innego. --panel-pad-x dla samego panelu; blok nadrzędny to sekcja o pełnej szerokości, więc trzeba odjąć margines, o który panel jest wpuszczony --panel-pad-x-inner dla treści WEWNĄTRZ panelu; blok nadrzędny to już sam panel, margines jest więc uwzględniony Pominięcie tej różnicy przesuwało treść panelu o kilkanaście pikseli względem sąsiednich sekcji — na tyle mało, że łatwo przeoczyć, i na tyle dużo, że widać krzywą kolumnę. */ --panel-pad-x: max( var(--panel-pad), calc((100% - var(--container)) / 2 + var(--gutter) - var(--panel-inset)) ); --panel-pad-x-inner: max( var(--panel-pad), calc((100% - var(--container)) / 2 + var(--gutter)) ); /* Cienie tonowane zielenią marki — czysta czerń na ciepłym tle brudzi */ --shadow-sm: 0 1px 2px rgba(24, 52, 4, 0.06), 0 1px 3px rgba(24, 52, 4, 0.09); --shadow-md: 0 4px 12px rgba(24, 52, 4, 0.08), 0 2px 4px rgba(24, 52, 4, 0.05); --shadow-lg: 0 12px 32px rgba(24, 52, 4, 0.10), 0 4px 8px rgba(24, 52, 4, 0.05); --shadow-xl: 0 24px 64px rgba(24, 52, 4, 0.14), 0 8px 16px rgba(24, 52, 4, 0.06); /* --------------------------------------------------------------------- 6. RUCH --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 560ms; /* --------------------------------------------------------------------- 7. WARSTWY --------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-menu: 400; --z-toast: 500; }