/* ============================================================ Книжкова знижка — Design Tokens (light default + dark override) Підключати ПЕРЕД components.css і style.css. Шрифт Manrope підключається через Google Fonts у . ============================================================ */ /* ---- Світла тема (default) ---- */ :root { /* --- Бренд --- */ --kz-ink: #16181C; --kz-green: #1F9D5B; --kz-green-600: #198A4F; --kz-green-700: #15743F; --kz-green-300: #5FD198; --kz-green-50: #EAF6EF; /* --- Нейтралі --- */ --kz-bg: #F3F2EE; --kz-surface: #FFFFFF; --kz-surface-2: #FAF9F6; --kz-border: #E7E5DF; --kz-border-strong:#D8D6CE; /* --- Текст --- */ --kz-text: #16181C; --kz-text-2: #55554F; --kz-text-3: #8A8A82; --kz-text-inv:#FFFFFF; /* --- Семантика --- */ --kz-down: #1F9D5B; --kz-up: #CF4438; --kz-warning: #C98A1E; --kz-star: #E0A100; /* --- Типографіка --- */ --kz-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Радіуси --- */ --kz-r-sm: 8px; --kz-r-md: 12px; --kz-r-lg: 16px; --kz-r-xl: 22px; --kz-r-pill:999px; /* --- Тіні --- */ --kz-shadow-sm: 0 1px 2px rgba(22,24,28,.05); --kz-shadow-md: 0 6px 20px rgba(22,24,28,.08); --kz-shadow-lg: 0 14px 44px rgba(22,24,28,.16); /* --- Відступи (крок 8 px) --- */ --kz-s1:4px; --kz-s2:8px; --kz-s3:12px; --kz-s4:16px; --kz-s5:20px; --kz-s6:24px; --kz-s8:32px; --kz-s10:40px;--kz-s14:56px;--kz-s18:72px; } /* ---- Темна тема ---- */ [data-bs-theme="dark"] { --kz-ink: #E8E6E0; --kz-green: #3FB950; --kz-green-600: #2EA043; --kz-green-700: #5FD198; --kz-green-300: #5FD198; --kz-green-50: rgba(63,185,80,.12); --kz-bg: #0F1117; --kz-surface: #1C2128; --kz-surface-2: #161B22; --kz-border: #2D333B; --kz-border-strong: #3D444C; --kz-text: #CDD9E5; --kz-text-2: #ADBAC7; --kz-text-3: #768390; --kz-text-inv:#16181C; --kz-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --kz-shadow-md: 0 6px 20px rgba(0,0,0,.6); --kz-shadow-lg: 0 14px 44px rgba(0,0,0,.8); } /* ---- База ---- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--kz-font); font-weight:500; line-height:1.55; color:var(--kz-text); background:var(--kz-bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* ---- Типографічна шкала ---- */ h1,h2,h3,h4{ margin-top:0; margin-bottom:.5rem; color:var(--kz-ink); font-weight:800; letter-spacing:-0.02em; line-height:1.08; } h1{ font-size:40px; } h2{ font-size:30px; } h3{ font-size:22px; font-weight:700; letter-spacing:-0.015em; } h4{ font-size:18px; font-weight:700; letter-spacing:-0.01em; } .kz-display{ font-size:56px; font-weight:800; letter-spacing:-0.03em; line-height:1.0; color:var(--kz-ink); } .kz-lead { font-size:18px; line-height:1.55; color:var(--kz-text-2); } .kz-small { font-size:14px; line-height:1.5; } .kz-caption{ font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--kz-text-3); } .kz-price { font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; } a{ color:var(--kz-green-700); text-decoration:none; } a:hover{ text-decoration:underline; } :focus-visible{ outline:none; box-shadow:0 0 0 4px var(--kz-green-50), 0 0 0 1px var(--kz-green); border-radius:var(--kz-r-sm); }