/* DP3D — tokeny projektu (2026-10-14). Źródło: Figma „DP3D · projekt”, sekcje 01–06. * Desktop projektowany na 1440, mobile na 390. Breakpointy (nie da się ich użyć jako zmiennych w @media): * < 768 układ mobilny (siatka 4 kol., margines 24) * < 1200 header mobilny (logo + menu) * ≥ 1200 header desktop; ≥ 1440 kontener 1440 wyśrodkowany */ :root { /* ---------- kolory: paleta ---------- */ --dp-graphite: #131210; /* tekst główny, tło sekcji grafitowych, przycisk główny */ --dp-white: #ffffff; --dp-paper: #f2f0ec; /* tło sekcji „papier” */ --dp-cream: #f2efe9; /* tekst na grafit */ --dp-grey-600: #615e59; /* tekst drugorzędny (kontrast 6,5:1 na bieli) */ --dp-grey-500: #6f6b64; /* etykiety mono, podpisy (5,3:1 na bieli; 4,66:1 na papierze — minimum projektu) */ --dp-grey-450: #76726b; /* placeholder w polach */ --dp-grey-400: #8c877e; /* tekst przygaszony na grafit, linia pola */ --dp-grey-300: #b9b3a9; /* znak „/” w przełączniku języka */ --dp-rule: #ddd9d2; /* linie na bieli */ --dp-rule-paper: #d8d4cc; /* linie na papierze */ --dp-rule-header: #eae6e0; /* dolna linia headera */ --dp-rule-dark: #2a2723; /* linie i ramki na grafit */ --dp-error: #b0453a; /* błąd pola (5,6:1) */ --dp-logo-blue: #0f75bd; /* tylko w logo — nie używać w interfejsie */ /* ---------- kolory: znaczenie ---------- */ --color-bg: var(--dp-white); --color-bg-paper: var(--dp-paper); --color-bg-dark: var(--dp-graphite); --color-text: var(--dp-graphite); --color-text-secondary: var(--dp-grey-600); --color-label: var(--dp-grey-500); --color-placeholder: var(--dp-grey-450); --color-text-on-dark: var(--dp-cream); --color-text-on-dark-muted: var(--dp-grey-400); --color-rule: var(--dp-rule); --color-rule-on-paper: var(--dp-rule-paper); --color-rule-on-dark: var(--dp-rule-dark); --color-field-line: var(--dp-grey-400); --color-field-line-on-dark: var(--dp-grey-500); --color-error: var(--dp-error); --color-focus: var(--dp-graphite); --color-focus-on-dark: var(--dp-cream); --color-scrim-menu: rgba(19, 18, 16, .22); /* pod otwartym panelem Oferta */ --color-scrim-gate: rgba(19, 18, 16, .74); /* pod oknem bramki */ /* przyciski */ --btn-primary-bg: var(--dp-graphite); --btn-primary-bg-hover: #2e2b27; --btn-primary-bg-active: #000000; --btn-disabled-bg: #e4e1da; --btn-disabled-text: var(--dp-grey-400); --btn-on-dark-bg: var(--dp-cream); --btn-on-dark-bg-hover: #ffffff; --btn-on-dark-bg-active: #e2ddd3; /* ---------- typografia ---------- */ --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; /* 300 Light, 400 Regular, 500 Medium */ --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace; /* 400 Regular, 500 Medium */ /* rozmiar / interlinia / światło — desktop 1440 */ --type-display: 300 76px/1.00 var(--font-sans); --type-display-ls: -0.032em; /* hero strony głównej */ --type-h1: 300 64px/1.12 var(--font-sans); --type-h1-ls: -0.028em; /* H1 podstron, zdania sceny C */ --type-footer-h: 300 56px/1.14 var(--font-sans); --type-footer-h-ls: -0.026em; /* „Prześlij przypadek.” w stopce Home */ --type-quote: 300 52px/1.30 var(--font-sans); --type-quote-ls: -0.024em; /* cytat autorytetu */ --type-h2: 300 46px/1.14 var(--font-sans); --type-h2-ls: -0.024em; --type-statement: 300 40px/1.26 var(--font-sans); --type-statement-ls: -0.018em; --type-h3: 300 36px/1.16 var(--font-sans); --type-h3-ls: -0.020em; --type-element: 300 22px/1.30 var(--font-sans); --type-element-ls: 0; --type-lead-masthead: 300 19px/1.58 var(--font-sans); --type-lead: 300 17px/1.52 var(--font-sans); --type-body: 300 15px/1.50 var(--font-sans); --type-small: 300 14px/1.40 var(--font-sans); --type-small-2: 300 13px/1.60 var(--font-sans); --type-link: 300 15px/1.33 var(--font-sans); --type-button: 500 15px/1.33 var(--font-sans); --type-nav: 400 15px/1.33 var(--font-sans); /* aktywna: 500 + podkreślenie */ --type-label: 400 11px/1.45 var(--font-mono); --type-label-ls: 0.08em; /* WERSALIKI */ --type-label-lg: 400 12px/1.33 var(--font-mono); --type-label-lg-ls: 0.08em; /* ---------- siatka i odstępy ---------- */ --container: 1440px; --margin: 72px; /* desktop; 24px mobile */ --gutter: 48px; /* 4 kolumny 288 px: x = 72 / 408 / 744 / 1080 */ --col-2: 760px; /* druga kolumna układu 2-kolumnowego (x = 760) */ --text-col: 420px; /* etykieta + tekst: tekst od x = 420, szer. 780 */ --section-y: 96px; /* odstęp sekcji góra/dół (desktop 96–112); mobile 64 */ --space-block: 40px; /* między blokami (mobile) */ --space-heading: 24px; /* nagłówek → treść */ --space-para: 16px; /* akapity, wiersze listy */ --space-label: 12px; /* etykieta → nagłówek */ --header-h: 80px; /* mobile 64px */ --tap: 44px; /* minimalny cel dotyku */ --radius: 0; /* wszystkie narożniki ostre */ --rule: 1px; /* ---------- ruch ---------- */ --dur-color: 150ms; /* hover, zmiany kolorów */ --dur-in: 180ms; /* panel Oferta, przyciemnienie */ --dur-out: 120ms; --dur-sheet: 200ms; /* menu mobilne, rozwijanie Oferty */ --ease-out: ease-out; --ease-panel: cubic-bezier(.2, 0, 0, 1); --hover-intent: 120ms; /* opóźnienie otwarcia Oferty najechaniem */ --hover-leave: 250ms; /* opóźnienie zamknięcia po opuszczeniu */ /* ---------- fokus ---------- */ --focus-ring: 2px solid var(--color-focus); --focus-offset: 3px; } /* Mobile 390 — style „Mobile/…” z Figmy */ @media (max-width: 767px) { :root { --margin: 24px; --gutter: 16px; --section-y: 64px; --header-h: 64px; --type-display: 300 40px/46px var(--font-sans); --type-display-ls: -0.02em; --type-h1: 300 40px/46px var(--font-sans); --type-h1-ls: -0.02em; --type-footer-h: 300 40px/46px var(--font-sans); --type-footer-h-ls: -0.02em; --type-quote: 300 24px/30px var(--font-sans); --type-quote-ls: -0.01em; --type-h2: 300 30px/36px var(--font-sans); --type-h2-ls: -0.02em; --type-statement: 300 24px/30px var(--font-sans); --type-statement-ls: -0.01em; --type-h3: 300 24px/30px var(--font-sans); --type-h3-ls: -0.01em; --type-element: 300 20px/26px var(--font-sans); --type-lead-masthead: 300 17px/27px var(--font-sans); --type-lead: 300 17px/27px var(--font-sans); --type-body: 300 16px/25px var(--font-sans); --type-small: 300 14px/21px var(--font-sans); --type-small-2: 300 14px/21px var(--font-sans); --type-nav: 400 20px/28px var(--font-sans); /* pozycje menu mobilnego */ } } @media (prefers-reduced-motion: reduce) { :root { --dur-color: 0ms; --dur-in: 0ms; --dur-out: 0ms; --dur-sheet: 0ms; } }