/* =============================================================================
TERMBEE UI — system designu
Źródło prawdy wizualnej: out/embed-generator.html (ekran „Generator kodu")
+ BRANDING-termbee.md. Dashboard został do tego dociągnięty.
Zasada nadrzędna:
miód = AKCENT (tło przycisku, obwódka, plaster), NIGDY tekst na białym.
Karty białe na kremowym tle. Linie ciepłe (nie szare). Grafit na tekst.
Spis sekcji:
01. TOKENY — light
02. TOKENY — dark
03. TOKENY — paleta „navy" (wariant B)
04. RESET + typografia
05. Layout: tb-grid, tb-stack, tb-pane
06. tb-hexfield (znak wodny plastra)
07. tb-card
08. tb-step (numerowane kroki)
09. tb-btn
10. tb-chip / tb-pill / tb-badge
11. tb-field (formularze)
12. tb-switch
13. tb-seg (segmented control)
14. tb-tabs
15. tb-table
16. tb-kpi
17. tb-bar (progress)
18. tb-callout
19. tb-checklist
20. tb-code (snippet + kopiowanie)
21. tb-modal / tb-drawer / tb-popover
22. Narzędzia (utilities)
23. Dostępność: focus, reduced-motion, contrast, dotyk
Fonty: dołącz w (system NIE robi @import — blokowałby render):
========================================================================== */
/* =============================================================================
01. TOKENY — LIGHT (domyślne)
Kolory tekstowe (*-text) są policzone pod AA ≥4.5:1 na białym, kremowym
i na własnym tincie. Kolory „surowe" (--brand, --ok…) służą do WYPEŁNIEŃ,
kropek, pasków i obwódek — nie do tekstu.
UWAGA na selektor: blok jest przypięty także do [data-theme="light"], żeby
jasna „wyspa" wewnątrz ciemnej strony (podgląd, zagnieżdżony widget) mogła
odzyskać komplet tokenów. Bez tego dziedziczyłaby połowę wartości z dark.
========================================================================== */
:root,[data-theme="light"]{
/* --- marka --- */
--brand: #F6A81C; /* miód — wypełnienie CTA, obwódki, akcent graficzny */
--brand-deep: #C97F0A; /* ciemniejszy miód — hover wypełnienia (NIE tekst) */
--brand-text: #9C5C00; /* miód czytelny — tekst/ikona akcentowa (AA 5.3:1 / biel) */
--brand-tint: #FEF3DC; /* miodowy wash — tła kafli, zaznaczenie */
--brand-ring: rgba(246,168,28,.26); /* poświata focus/press */
--on-brand: #1C1B22; /* tekst NA miodzie — zawsze grafit (8.6:1) */
/* --- atrament / powierzchnie --- */
--ink: #1C1B22; /* tekst główny (17:1 na białym) */
--ink-2: #55505E; /* tekst drugorzędny (7.8:1) */
--ink-3: #6E6878; /* tekst pomocniczy: podpisy, nagłówki tabel (5.4:1) */
--surface: #FFFFFF; /* karty */
--surface-2: #FBF8F2; /* pola, wiersze hover, tła zagnieżdżone */
--bg: #FBF8F2; /* tło aplikacji — kremowa biel z nutą miodu */
--line: #ECE6DA; /* obramowania dekoracyjne — CIEPŁE, nie szare */
--line-2: #F4EFE6; /* separatory wewnątrz kart */
--line-strong: #948873; /* granica KONTROLKI (input, przełącznik) — 3.5:1
wobec bieli; WCAG 1.4.11 wymaga 3:1 tam, gdzie
obramowanie jest jedynym znakiem, że to pole */
--scrim: rgba(20,18,26,.5); /* przyciemnienie pod modalem/szufladą */
/* --- ciemny chrome (sidebar / pasek) — stały niezależnie od motywu --- */
--sb-bg: #1C1B22;
--sb-bg-2: #232128;
--sb-fg: #B9B3C2; /* 8.4:1 na sb-bg */
--sb-fg-strong: #F5F1E8;
--sb-line: rgba(255,255,255,.08);
--sb-hover: rgba(255,255,255,.06);
--sb-active-bg: rgba(246,168,28,.14);
--sb-active-fg: #F8C662; /* 10.8:1 na sb-bg */
/* --- semantyka stanu ---
-x wypełnienie / kropka / pasek
-x-text tekst na jasnym tle (AA)
-x-tint miękkie tło plakietki
-x-solid wypełnienie przycisku pod biały tekst (AA) */
--ok:#2E9E6B; --ok-text:#1F7C51; --ok-tint:#E4F4EC; --ok-solid:#1F7C51;
--warn:#E0A100; --warn-text:#7A5C00; --warn-tint:#FBF0D2; --warn-solid:#7A5C00;
--err:#D64545; --err-text:#C22F2F; --err-tint:#FBE4E4; --err-solid:#C22F2F;
--info:#3B7DD8; --info-text:#2C63B4; --info-tint:#E4EEFB; --info-solid:#2C63B4;
--on-solid:#FFFFFF; /* tekst na *-solid */
/* --- typografia --- */
--font-title:'Sora','Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
--fs-xs:11.5px; --fs-sm:12.5px; --fs-md:13.5px; --fs-base:14px; --fs-lg:15px;
--fs-h3:15px; --fs-h2:19px; --fs-h1:clamp(22px,3.2vw,30px);
--lh-tight:1.25; --lh:1.55;
--tracking-title:-.02em; --tracking-caps:.07em;
/* --- skala odstępów (4px) --- */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
--sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;
/* --- promienie --- */
--r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
--radius:var(--r-lg); /* alias zgodny z BRANDING-termbee.md */
/* --- cienie (ciepłe, na bazie grafitu) --- */
--shadow-sm:0 1px 2px rgba(28,27,34,.05),0 1px 3px rgba(28,27,34,.06);
--shadow-md:0 4px 12px rgba(28,27,34,.08),0 2px 4px rgba(28,27,34,.04);
--shadow-lg:0 12px 34px rgba(28,27,34,.15),0 4px 8px rgba(28,27,34,.07);
/* --- warstwy (z-index) --- */
--z-base:1; --z-sticky:30; --z-header:40; --z-popover:60; --z-scrim:80;
--z-drawer:90; --z-modal:100; --z-toast:120;
/* --- ruch --- */
--dur-1:.12s; --dur-2:.18s; --dur-3:.28s;
--ease:cubic-bezier(.4,0,.2,1);
/* --- plaster (znak wodny) --- */
--hex-opacity:.055; /* trzymaj 4–6%: ma być wyczuwalny, nie widoczny */
--hex-size:56px 64px;
/* --- wymiary --- */
--wrap:1320px; /* maksymalna szerokość treści */
--tap:44px; /* minimalny cel dotykowy */
--focus-w:3px;
}
/* =============================================================================
02. TOKENY — DARK
Dark NIE jest inwersją: osobno dobrane kroki jasności + własne tinty.
Miód zostaje ten sam (na ciemnym daje 8.3:1 → może być tekstem).
========================================================================== */
[data-theme="dark"]{
--brand:#F6A81C; --brand-deep:#E0900F; --brand-text:#F6A81C; --brand-tint:#2A2410;
--brand-ring:rgba(246,168,28,.32); --on-brand:#1C1B22;
--ink:#F3EFE6; --ink-2:#A9A2B2; --ink-3:#948DA1;
--surface:#1F1E25; --surface-2:#191820; --bg:#17161C;
--line:#2C2A33; --line-2:#242229; --line-strong:#767085; --scrim:rgba(0,0,0,.62);
--sb-bg:#141319; --sb-bg-2:#1F1E25; --sb-line:rgba(255,255,255,.07);
/* W dark wypełnienia są JAŚNIEJSZE od tła (inaczej przycisk ginie), więc
tekst na nich jest grafitowy — dokładnie jak na miodzie. */
--ok:#3FB985; --ok-text:#3FB985; --ok-tint:#13291F; --ok-solid:#3FB985;
--warn:#E8B62E; --warn-text:#E8B62E; --warn-tint:#2C2510; --warn-solid:#E8B62E;
--err:#E56A6A; --err-text:#E56A6A; --err-tint:#2E1717; --err-solid:#E56A6A;
--info:#5C97E6; --info-text:#5C97E6; --info-tint:#15202E; --info-solid:#5C97E6;
--on-solid:#17161C;
--shadow-sm:0 1px 2px rgba(0,0,0,.34);
--shadow-md:0 4px 14px rgba(0,0,0,.42);
--shadow-lg:0 16px 40px rgba(0,0,0,.56);
--hex-opacity:.05;
}
/* =============================================================================
03. TOKENY — PALETA „NAVY" (wariant B: miód + granat)
Przełączenie palety = podmiana kilku zmiennych. Nic więcej.
========================================================================== */
[data-palette="navy"]{
--ink:#1E2140; --ink-2:#4E5480; --ink-3:#666B94;
--bg:#F4F5FB; --surface-2:#F4F5FB; --line:#E2E4F0; --line-2:#EEF0F8; --line-strong:#8288AC;
--brand-tint:#FDF0D8;
--sb-bg:#1E2140; --sb-bg-2:#262A52; --sb-active-bg:rgba(246,168,28,.16);
--scrim:rgba(15,17,32,.55);
--shadow-sm:0 1px 2px rgba(30,33,64,.06),0 1px 3px rgba(30,33,64,.07);
--shadow-md:0 4px 12px rgba(30,33,64,.1),0 2px 4px rgba(30,33,64,.05);
--shadow-lg:0 12px 34px rgba(30,33,64,.18),0 4px 8px rgba(30,33,64,.08);
}
/* Granat + dark. Blok MUSI powtórzyć wszystko, co ustawia granat w wersji
jasnej (specyficzność 0,2,0 > 0,1,0) — inaczej jasne wartości przeciekają. */
[data-palette="navy"][data-theme="dark"]{
--ink:#EAECF7; --ink-2:#A8ADCE; --ink-3:#8B90B4;
--bg:#0F1120; --surface:#171A2E; --surface-2:#121424; /* w dashboardzie było #12142400 → alfa 00 = przezroczyste (błąd) */
--line:#282C48; --line-2:#20233C; --line-strong:#7A80A6;
--sb-bg:#12142A; --sb-bg-2:#1B1E38;
--brand-tint:#2A2410;
--scrim:rgba(0,0,0,.66);
--shadow-sm:0 1px 2px rgba(0,0,0,.34);
--shadow-md:0 4px 14px rgba(0,0,0,.42);
--shadow-lg:0 16px 40px rgba(0,0,0,.56);
}
/* =============================================================================
04. RESET + TYPOGRAFIA
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-title); margin:0; font-weight:700;
letter-spacing:var(--tracking-title); line-height:var(--lh-tight); color:var(--ink)}
h1{font-size:var(--fs-h1); font-weight:800}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--sp-3)}
p:last-child{margin-bottom:0}
a{color:var(--info-text); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; cursor:pointer; color:inherit}
small{font-size:var(--fs-sm)}
code,kbd,pre,samp{font-family:var(--font-mono)}
::selection{background:var(--brand-tint); color:var(--ink)}
hr,.tb-divider{height:1px; background:var(--line); border:0; margin:var(--sp-4) 0}
/* nagłówek sekcji ekranu — wspólny „head" generatora i dashboardu */
.tb-page{max-width:var(--wrap); margin:0 auto; padding:var(--sp-6) var(--sp-5) var(--sp-9)}
.tb-pagehead{position:relative; overflow:hidden; padding:var(--sp-6) 0 var(--sp-2)}
.tb-pagehead > *{position:relative}
.tb-pagehead p{color:var(--ink-2); max-width:62ch; margin:var(--sp-2) 0 0; font-size:var(--fs-md)}
.tb-eyebrow{font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
letter-spacing:var(--tracking-caps); color:var(--ink-3)}
.tb-muted{color:var(--ink-2)}
.tb-dim{color:var(--ink-3); font-size:var(--fs-sm)}
/* =============================================================================
05. LAYOUT — tb-grid / tb-stack / tb-pane
Mobile-first: domyślnie jedna kolumna, kolumny dokładane w górę.
========================================================================== */
.tb-stack{display:flex; flex-direction:column; gap:var(--sp-4)}
.tb-stack--sm{gap:var(--sp-2)}
.tb-stack--lg{gap:var(--sp-6)}
.tb-row{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.tb-row--end{justify-content:flex-end}
.tb-spacer{margin-left:auto}
.tb-grid{display:grid; gap:var(--sp-4); grid-template-columns:1fr}
/* wariant „auto" nie potrzebuje breakpointów — sam się dzieli */
.tb-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
@media(min-width:640px){
.tb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tb-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
.tb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tb-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tb-grid--sidebar{grid-template-columns:minmax(0,1fr) minmax(0,360px); align-items:start}
}
@media(min-width:1080px){
/* układ generatora: konfigurator + przyklejony podgląd */
.tb-grid--split{grid-template-columns:minmax(0,1fr) minmax(0,560px); align-items:start}
}
.tb-sticky{position:sticky; top:var(--sp-5)}
/* kontener zapytań kontekstowych — komponenty w środku reagują na SZEROKOŚĆ
rodzica, nie okna (kafle w szufladzie zachowują się jak na wąskim ekranie) */
.tb-pane{container-type:inline-size; min-width:0}
/* =============================================================================
06. tb-hexfield — znak wodny plastra
Jedna implementacja (maska) zamiast dwóch. Krycie sterowane --hex-opacity
(4–6%). Używać na nagłówkach sekcji i pustych stanach, nie na treści.
========================================================================== */
.tb-hexfield{position:relative; overflow:hidden}
.tb-hexfield::before{
content:""; position:absolute; inset:0; pointer-events:none;
color:var(--ink); background-color:currentColor; opacity:var(--hex-opacity);
-webkit-mask:var(--hex-mask); mask:var(--hex-mask);
-webkit-mask-size:var(--hex-size); mask-size:var(--hex-size);
}
:root{
--hex-mask:url("data:image/svg+xml;utf8,") repeat;
}
.tb-hexfield--brand::before{color:var(--brand); opacity:.12}
.tb-hexfield--dense{--hex-size:34px 39px}
/* heksagon jako kształt (slot / ikona) */
.tb-hex{--hex-s:34px; width:var(--hex-s); height:calc(var(--hex-s) * 1.12);
display:grid; place-items:center; flex:0 0 auto;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
background:var(--brand-tint); color:var(--brand-text);
font-family:var(--font-title); font-weight:800; font-size:var(--fs-sm)}
.tb-hex--fill{background:var(--brand); color:var(--on-brand)} /* slot zajęty */
.tb-hex--empty{background:var(--surface-2); color:var(--ink-3)} /* slot wolny */
/* =============================================================================
07. tb-card — biała karta na kremowym tle. Podstawa KAŻDEGO ekranu.
========================================================================== */
.tb-card{background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-sm); min-width:0}
.tb-card--flat{box-shadow:none}
.tb-card--raised{box-shadow:var(--shadow-md)}
.tb-card--brand{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));
background:linear-gradient(var(--brand-tint),var(--brand-tint)) padding-box,var(--surface)}
.tb-card + .tb-card{margin-top:var(--sp-4)}
.tb-card__head{display:flex; align-items:center; gap:var(--sp-3);
padding:var(--sp-4) var(--sp-4); border-bottom:1px solid var(--line)}
.tb-card__head h2,.tb-card__head h3{font-size:var(--fs-md); font-weight:700}
.tb-card__head .tb-sub{font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px}
.tb-card__actions{margin-left:auto; display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.tb-card__body{padding:var(--sp-4)}
.tb-card__foot{padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line);
display:flex; gap:var(--sp-2); align-items:center; background:var(--surface-2);
border-radius:0 0 var(--r-lg) var(--r-lg)}
/* numer kroku w nagłówku karty (wzór z generatora: miodowy kwadrat, grafit) */
.tb-card__num{width:24px; height:24px; border-radius:var(--r-xs); flex:0 0 auto;
background:var(--brand); color:var(--on-brand); display:grid; place-items:center;
font-family:var(--font-title); font-size:var(--fs-sm); font-weight:800}
.tb-card__num--hex{border-radius:0; width:26px; height:29px;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* =============================================================================
08. tb-step — numerowana instrukcja (kroki CMS w generatorze)
========================================================================== */
.tb-steps{margin:0; padding:0; list-style:none; counter-reset:tbstep}
.tb-step{counter-increment:tbstep; position:relative; padding:0 0 var(--sp-4) 40px;
font-size:var(--fs-md); line-height:1.6}
.tb-step:last-child{padding-bottom:0}
.tb-step::before{content:counter(tbstep); position:absolute; left:0; top:0;
width:26px; height:26px; border-radius:var(--r-sm);
background:var(--brand-tint); border:1px solid var(--brand); color:var(--brand-text);
display:grid; place-items:center; font-family:var(--font-title);
font-size:var(--fs-sm); font-weight:800}
/* pionowa nić łącząca kroki */
.tb-steps--linked .tb-step::after{content:""; position:absolute; left:13px; top:30px;
bottom:6px; width:1px; background:var(--line)}
.tb-steps--linked .tb-step:last-child::after{display:none}
/* wariant heksagonalny — mocniej „plastrowy" */
.tb-steps--hex .tb-step::before{border-radius:0; border:0; width:28px; height:31px;
background:var(--brand); color:var(--on-brand);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tb-step b{font-weight:700}
.tb-step code{font-size:var(--fs-sm); background:var(--surface-2);
border:1px solid var(--line); border-radius:var(--r-xs); padding:1px 5px}
.tb-step--done::before{content:"✓"; background:var(--ok-solid); border-color:var(--ok-solid);
color:var(--on-solid)}
/* =============================================================================
09. tb-btn — jeden przycisk dla całego produktu
Primary = miód + GRAFIT (nigdy biel: biel na miodzie ma 2,0:1).
========================================================================== */
.tb-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
border:1px solid transparent; border-radius:var(--r-md); padding:9px 15px;
min-height:38px; font-family:var(--font-body); font-size:var(--fs-md); font-weight:600;
white-space:nowrap; text-decoration:none; transition:background var(--dur-1),
border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1)}
.tb-btn:hover{text-decoration:none}
.tb-btn svg{width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tb-btn--primary{background:var(--brand); color:var(--on-brand); font-weight:700;
box-shadow:var(--shadow-sm)}
.tb-btn--primary:hover{background:var(--brand-deep); color:var(--on-brand)}
.tb-btn--primary:active{background:var(--brand-deep); box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.tb-btn--ghost{background:var(--surface); color:var(--ink); border-color:var(--line)}
.tb-btn--ghost:hover{background:var(--surface-2); border-color:var(--brand)}
.tb-btn--soft{background:var(--brand-tint); color:var(--brand-text)}
.tb-btn--soft:hover{background:var(--brand); color:var(--on-brand)}
.tb-btn--danger{background:var(--err-tint); color:var(--err-text)}
.tb-btn--danger:hover{background:var(--err-solid); color:var(--on-solid)}
.tb-btn--quiet{background:transparent; color:var(--ink-2)}
.tb-btn--quiet:hover{background:var(--surface-2); color:var(--ink)}
.tb-btn--sm{padding:6px 11px; min-height:32px; font-size:var(--fs-sm); border-radius:var(--r-sm)}
.tb-btn--sm svg{width:14px; height:14px}
.tb-btn--lg{padding:12px 20px; min-height:46px; font-size:var(--fs-lg); border-radius:var(--r-md)}
.tb-btn--icon{padding:0; width:38px; min-height:38px}
.tb-btn--block{width:100%}
.tb-btn[disabled],.tb-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; pointer-events:none}
/* =============================================================================
10. tb-chip / tb-pill / tb-badge
chip = klikalny filtr (ma stan) pill = status (nieklikalny)
badge = licznik / etykieta techniczna
========================================================================== */
.tb-chip{display:inline-flex; align-items:center; gap:var(--sp-2);
border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
border-radius:var(--r-pill); padding:6px 13px; font-size:var(--fs-sm); font-weight:500;
transition:var(--dur-1)}
.tb-chip:hover{border-color:var(--brand); color:var(--ink)}
.tb-chip[aria-pressed="true"],.tb-chip.is-on{background:var(--brand-tint);
border-color:var(--brand); color:var(--brand-text); font-weight:600}
.tb-chip[aria-pressed="true"]::before,.tb-chip.is-on::before{content:"✓"; font-weight:800}
.tb-pill{display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs);
font-weight:600; padding:3px 10px; border-radius:var(--r-pill); line-height:1.5;
white-space:nowrap; border:1px solid transparent}
.tb-pill__dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto}
.tb-pill svg{width:12px; height:12px}
.tb-pill--ok{color:var(--ok-text); background:var(--ok-tint)}
.tb-pill--warn{color:var(--warn-text); background:var(--warn-tint)}
.tb-pill--err{color:var(--err-text); background:var(--err-tint)}
.tb-pill--info{color:var(--info-text); background:var(--info-tint)}
.tb-pill--brand{color:var(--brand-text); background:var(--brand-tint)}
.tb-pill--muted{color:var(--ink-2); background:var(--surface-2); border-color:var(--line)}
.tb-badge{display:inline-flex; align-items:center; justify-content:center; gap:5px;
min-width:20px; padding:1px 7px; border-radius:var(--r-pill);
background:var(--brand); color:var(--on-brand);
font-size:var(--fs-xs); font-weight:700; line-height:1.6}
.tb-badge--err{background:var(--err-solid); color:var(--on-solid)}
.tb-badge--muted{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}
.tb-badge--tag{border-radius:var(--r-xs); background:var(--surface-2); color:var(--ink-2);
border:1px solid var(--line); font-weight:600}
/* =============================================================================
11. tb-field — etykieta + kontrolka + podpowiedź
========================================================================== */
.tb-field{display:block; margin-bottom:var(--sp-4)}
.tb-field:last-child{margin-bottom:0}
.tb-field__label{display:block; font-size:var(--fs-xs); font-weight:700;
text-transform:uppercase; letter-spacing:var(--tracking-caps);
color:var(--ink-2); margin:0 0 6px}
.tb-field__label--plain{text-transform:none; letter-spacing:0; font-size:var(--fs-md);
color:var(--ink); font-weight:600}
.tb-field__req{color:var(--err-text); margin-left:2px}
.tb-input,.tb-field input[type=text],.tb-field input[type=email],.tb-field input[type=number],
.tb-field input[type=url],.tb-field input[type=search],.tb-field select,.tb-field textarea{
width:100%; font-family:inherit; font-size:var(--fs-md); color:var(--ink);
background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-md);
padding:10px 12px; min-height:42px; transition:border-color var(--dur-1), box-shadow var(--dur-1)}
.tb-input::placeholder,.tb-field textarea::placeholder{color:var(--ink-3)}
.tb-input:focus,.tb-field input:focus,.tb-field select:focus,.tb-field textarea:focus{
outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring)}
.tb-field textarea{resize:vertical; min-height:88px; line-height:1.6}
.tb-field select,select.tb-input{appearance:none; cursor:pointer; padding-right:34px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 12px center}
[data-theme="dark"] .tb-field select,[data-theme="dark"] select.tb-input{
background-image:url("data:image/svg+xml;utf8,")}
.tb-field__hint{font-size:var(--fs-sm); color:var(--ink-2); margin-top:6px; line-height:1.5}
.tb-field__hint b{color:var(--ink); font-weight:600}
.tb-field__error{font-size:var(--fs-sm); color:var(--err-text); font-weight:600; margin-top:6px}
.tb-field--invalid .tb-input,.tb-field--invalid input,.tb-field--invalid select{
border-color:var(--err); background:var(--err-tint)}
.tb-fieldrow{display:grid; gap:var(--sp-3); grid-template-columns:1fr}
@container (min-width:520px){ .tb-fieldrow{grid-template-columns:1fr 1fr} }
@supports not (container-type:inline-size){
@media(min-width:560px){ .tb-fieldrow{grid-template-columns:1fr 1fr} }
}
/* =============================================================================
12. tb-switch — przełącznik z opisem (wzór generatora)
========================================================================== */
.tb-switch{display:flex; align-items:flex-start; gap:var(--sp-3);
padding:var(--sp-3) 0; border-top:1px solid var(--line-2); cursor:pointer}
.tb-switch:first-of-type{border-top:0}
.tb-switch__box{position:relative; width:40px; height:23px; flex:0 0 auto; margin-top:1px}
.tb-switch__box input{position:absolute; inset:0; width:100%; height:100%; margin:0;
opacity:0; cursor:pointer}
/* tor wyłączonego przełącznika ma obramowanie --line-strong: bez tego
„off" na białej karcie to plama 1.1:1, czyli niewidoczna kontrolka */
.tb-switch__track{position:absolute; inset:0; background:var(--line); border-radius:var(--r-pill);
transition:background var(--dur-2); pointer-events:none;
border:1px solid var(--line-strong)}
.tb-switch__track::after{content:""; position:absolute; left:2px; top:2px; width:17px; height:17px;
border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
transition:transform var(--dur-2) var(--ease)}
.tb-switch__box input:checked + .tb-switch__track{background:var(--brand); border-color:var(--brand-deep)}
.tb-switch__box input:checked + .tb-switch__track::after{transform:translateX(17px)}
.tb-switch__box input:focus-visible + .tb-switch__track{
outline:var(--focus-w) solid var(--brand); outline-offset:2px}
.tb-switch__box input[disabled] + .tb-switch__track{opacity:.5}
.tb-switch__tx{min-width:0}
.tb-switch__t{font-size:var(--fs-md); font-weight:600; display:block}
.tb-switch__d{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.45; display:block; margin-top:2px}
.tb-switch__d code{font-size:var(--fs-xs); background:var(--surface-2);
border:1px solid var(--line); border-radius:var(--r-xs); padding:1px 4px}
/* =============================================================================
13. tb-seg — segmented control
Obsługuje aria-pressed (grupa przycisków) ORAZ aria-selected (tablist).
========================================================================== */
.tb-seg{display:flex; gap:3px; background:var(--surface-2); border:1px solid var(--line);
border-radius:var(--r-md); padding:3px}
.tb-seg--block{width:100%}
.tb-seg button{flex:1 1 0; border:0; background:none; color:var(--ink-2);
font-size:var(--fs-sm); font-weight:600; padding:8px 12px; border-radius:var(--r-sm);
white-space:nowrap; transition:var(--dur-1); min-height:34px}
.tb-seg button:hover{color:var(--ink)}
.tb-seg button[aria-pressed="true"],.tb-seg button[aria-selected="true"]{
background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); font-weight:700}
.tb-seg--brand button[aria-pressed="true"],.tb-seg--brand button[aria-selected="true"]{
background:var(--brand); color:var(--on-brand)}
/* =============================================================================
14. tb-tabs — zakładki treści (instrukcje per CMS)
========================================================================== */
.tb-tabs{display:flex; gap:3px; padding:var(--sp-2) var(--sp-3) 0;
border-bottom:1px solid var(--line); flex-wrap:wrap}
.tb-tabs button{border:0; background:none; color:var(--ink-2); font-size:var(--fs-sm);
font-weight:600; padding:9px 13px; border-radius:var(--r-sm) var(--r-sm) 0 0;
border-bottom:2px solid transparent; margin-bottom:-1px; transition:var(--dur-1); min-height:38px}
.tb-tabs button:hover{color:var(--ink); background:var(--surface-2)}
.tb-tabs button[aria-selected="true"]{color:var(--brand-text); background:var(--brand-tint);
border-bottom-color:var(--brand); font-weight:700}
.tb-tabpanel{padding:var(--sp-4)}
.tb-tabpanel[hidden]{display:none}
/* =============================================================================
15. tb-table
========================================================================== */
.tb-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tb-table{width:100%; border-collapse:collapse; font-size:var(--fs-md)}
.tb-table th{text-align:left; font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
letter-spacing:.05em; color:var(--ink-3); padding:10px 14px; white-space:nowrap;
background:var(--surface-2); border-bottom:1px solid var(--line)}
.tb-table td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tb-table tbody tr{transition:background var(--dur-1)}
.tb-table tbody tr:hover{background:var(--surface-2)}
.tb-table tbody tr:last-child td{border-bottom:0}
.tb-table tr[data-href],.tb-table tr.is-clickable{cursor:pointer}
.tb-table--compact td{padding:8px 12px}
.tb-table .tb-num{text-align:right; font-variant-numeric:tabular-nums}
.tb-mono{font-family:var(--font-mono); font-size:var(--fs-sm)}
/* =============================================================================
16. tb-kpi — kafel z liczbą
========================================================================== */
.tb-kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
padding:var(--sp-4); box-shadow:var(--shadow-sm); position:relative; overflow:hidden}
.tb-kpi__top{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2)}
.tb-kpi__ic{width:30px; height:30px; border-radius:var(--r-sm); flex:0 0 auto;
background:var(--brand-tint); color:var(--brand-text); display:grid; place-items:center}
.tb-kpi__ic svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round}
.tb-kpi__lbl{font-size:var(--fs-sm); color:var(--ink-2); font-weight:500}
.tb-kpi__val{font-family:var(--font-title); font-size:26px; font-weight:800;
letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums}
.tb-kpi__val small{font-size:14px; color:var(--ink-3); font-weight:500}
.tb-kpi__foot{display:flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap}
.tb-delta{display:inline-flex; align-items:center; gap:3px; font-size:var(--fs-sm);
font-weight:600; padding:2px 7px; border-radius:var(--r-xs)}
.tb-delta--up{color:var(--ok-text); background:var(--ok-tint)}
.tb-delta--down{color:var(--err-text); background:var(--err-tint)}
.tb-delta--flat{color:var(--ink-2); background:var(--surface-2)}
/* w wąskim kontenerze KPI zbija się w jedną linię */
@container (max-width:220px){
.tb-kpi__val{font-size:22px}
.tb-kpi__ic{display:none}
}
/* =============================================================================
17. tb-bar — pasek postępu / wykorzystania
========================================================================== */
.tb-bar{height:8px; background:var(--surface-2); border:1px solid var(--line);
border-radius:var(--r-pill); overflow:hidden}
.tb-bar__fill{height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-deep));
border-radius:var(--r-pill); transition:width var(--dur-3) var(--ease)}
/* końcówki gradientów są dekoracyjne (nie niosą informacji ani tekstu),
dlatego jako jedyne w tym pliku zostają wartościami wprost */
.tb-bar--warn .tb-bar__fill{background:linear-gradient(90deg,var(--warn),#c98f00)}
.tb-bar--err .tb-bar__fill{background:linear-gradient(90deg,var(--err),#b83535)}
.tb-bar--ok .tb-bar__fill{background:linear-gradient(90deg,var(--ok),#1f7c51)}
.tb-bar--lg{height:12px}
.tb-barlabel{display:flex; justify-content:space-between; gap:var(--sp-3);
font-size:var(--fs-sm); color:var(--ink-2); margin-bottom:6px}
.tb-barlabel b{color:var(--ink); font-weight:600}
/* =============================================================================
18. tb-callout — komunikat kontekstowy w treści
Tekst zawsze grafitowy (--ink) na tincie → ~15:1. Kolor niesie ikona i ramka.
========================================================================== */
.tb-callout{display:flex; gap:var(--sp-3); padding:13px 15px; border-radius:var(--r-md);
font-size:var(--fs-sm); line-height:1.55; border:1px solid; color:var(--ink)}
.tb-callout svg{width:18px; height:18px; flex:0 0 auto; margin-top:1px; fill:none;
stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tb-callout b{font-weight:700}
.tb-callout__ic{flex:0 0 auto; display:grid; place-items:center}
.tb-callout--info{background:var(--info-tint); border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.tb-callout--info .tb-callout__ic{color:var(--info-text)}
.tb-callout--warn{background:var(--warn-tint); border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.tb-callout--warn .tb-callout__ic{color:var(--warn-text)}
.tb-callout--ok{background:var(--ok-tint); border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.tb-callout--ok .tb-callout__ic{color:var(--ok-text)}
.tb-callout--brand{background:var(--brand-tint); border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.tb-callout--brand .tb-callout__ic{color:var(--brand-text)}
/* =============================================================================
19. tb-checklist — postęp wdrożenia
========================================================================== */
.tb-checklist{display:flex; flex-direction:column}
.tb-check{display:flex; align-items:center; gap:13px; padding:13px 0;
border-bottom:1px solid var(--line-2)}
.tb-check:last-child{border-bottom:0}
.tb-check__mk{width:26px; height:26px; border-radius:50%; flex:0 0 auto; display:grid;
place-items:center; font-size:var(--fs-md); font-weight:700}
.tb-check--done .tb-check__mk{background:var(--ok-solid); color:var(--on-solid)}
.tb-check--now .tb-check__mk{background:var(--brand-tint); color:var(--brand-text); border:2px solid var(--brand)}
.tb-check--todo .tb-check__mk{background:var(--surface-2); color:var(--ink-3); border:1.5px solid var(--line)}
.tb-check__tx{min-width:0; flex:1}
.tb-check__tx b{font-size:var(--fs-md); font-weight:600; display:block}
.tb-check__tx span{font-size:var(--fs-sm); color:var(--ink-2)}
.tb-check--done .tb-check__tx b{color:var(--ink-3); text-decoration:line-through}
/* =============================================================================
20. tb-code — snippet z paskiem i kopiowaniem
========================================================================== */
.tb-code{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
background:var(--surface)}
.tb-code__bar{display:flex; align-items:center; gap:var(--sp-2); padding:10px var(--sp-3);
border-bottom:1px solid var(--line)}
.tb-code__bar h3{font-size:var(--fs-sm); flex:1 1 auto; font-weight:700}
.tb-code pre{margin:0; padding:14px 16px; overflow-x:auto; background:var(--surface-2);
font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.7; color:var(--ink)}
.tb-code pre:focus-visible{outline-offset:-3px}
/* kolory składni — wszystkie na --surface-2, wszystkie AA */
.tb-code .t{color:var(--info-text)} /* znacznik */
.tb-code .a{color:var(--brand-text)} /* atrybut */
.tb-code .s{color:var(--ok-text)} /* wartość */
.tb-code .c{color:var(--ink-2); font-style:italic} /* komentarz */
.tb-code--inline{display:inline-flex; padding:1px 6px; border-radius:var(--r-xs);
background:var(--surface-2); font-family:var(--font-mono); font-size:var(--fs-sm)}
/* =============================================================================
21. tb-modal / tb-drawer / tb-popover
========================================================================== */
.tb-scrim{position:fixed; inset:0; background:var(--scrim); backdrop-filter:blur(2px);
z-index:var(--z-scrim); opacity:0; visibility:hidden; transition:var(--dur-2)}
.tb-scrim.is-open{opacity:1; visibility:visible}
.tb-modal{position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center;
justify-content:center; padding:var(--sp-5); background:var(--scrim);
backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:var(--dur-2)}
.tb-modal.is-open{opacity:1; visibility:visible}
.tb-modal__box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
box-shadow:var(--shadow-lg); width:min(520px,96vw); max-height:88vh; overflow-y:auto;
transform:scale(.96); transition:transform var(--dur-2) var(--ease)}
.tb-modal.is-open .tb-modal__box{transform:none}
.tb-modal__head{padding:var(--sp-5) var(--sp-5) 0; display:flex; gap:var(--sp-3); align-items:flex-start}
.tb-modal__head h3{font-size:17px}
.tb-modal__head p{margin:4px 0 0; font-size:var(--fs-md); color:var(--ink-2)}
.tb-modal__ic{width:42px; height:42px; border-radius:var(--r-md); flex:0 0 auto; display:grid;
place-items:center; background:var(--brand-tint); color:var(--brand-text)}
.tb-modal__body{padding:var(--sp-4) var(--sp-5)}
.tb-modal__foot{padding:0 var(--sp-5) var(--sp-5); display:flex; gap:var(--sp-2); justify-content:flex-end}
.tb-close{margin-left:auto; border:0; background:transparent; color:var(--ink-2);
width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; flex:0 0 auto}
.tb-close:hover{background:var(--surface-2); color:var(--ink)}
.tb-drawer{position:fixed; top:0; right:0; height:100dvh; width:min(480px,94vw);
background:var(--bg); z-index:var(--z-drawer); box-shadow:var(--shadow-lg);
transform:translateX(100%); transition:transform var(--dur-3) var(--ease);
display:flex; flex-direction:column; border-left:1px solid var(--line)}
.tb-drawer.is-open{transform:none}
.tb-drawer__head{padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
display:flex; align-items:flex-start; gap:var(--sp-3); background:var(--surface)}
.tb-drawer__body{overflow-y:auto; padding:var(--sp-5); flex:1}
.tb-drawer__foot{padding:var(--sp-3) var(--sp-5); border-top:1px solid var(--line);
display:flex; gap:var(--sp-2); background:var(--surface)}
.tb-popover{position:absolute; top:calc(100% + 8px); right:0; min-width:280px;
background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
box-shadow:var(--shadow-lg); z-index:var(--z-popover); overflow:hidden;
opacity:0; visibility:hidden; transform:translateY(-6px); transition:var(--dur-2)}
.tb-popover.is-open{opacity:1; visibility:visible; transform:none}
.tb-popover__head{padding:11px 14px; border-bottom:1px solid var(--line);
font-weight:700; font-size:var(--fs-md); display:flex; align-items:center; justify-content:space-between}
.tb-popover__item{display:flex; gap:var(--sp-2); padding:10px 14px; align-items:center;
border-bottom:1px solid var(--line-2); font-size:var(--fs-md); color:var(--ink-2);
width:100%; border-left:0; border-right:0; border-top:0; background:none; text-align:left}
.tb-popover__item:last-child{border-bottom:0}
.tb-popover__item:hover{background:var(--surface-2); color:var(--ink)}
.tb-anchor{position:relative}
/* toast */
.tb-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:var(--r-md);
font-size:var(--fs-md); font-weight:600; opacity:0; pointer-events:none;
transition:var(--dur-2); z-index:var(--z-toast); box-shadow:var(--shadow-lg)}
.tb-toast.is-open{opacity:1; transform:translate(-50%,0)}
/* pusty stan */
.tb-empty{text-align:center; padding:var(--sp-8) var(--sp-5)}
.tb-empty__ic{width:56px; height:56px; margin:0 auto var(--sp-3); display:grid; place-items:center;
background:var(--brand-tint); color:var(--brand-text);
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tb-empty h3{font-size:16px}
.tb-empty p{color:var(--ink-2); font-size:var(--fs-md); margin:6px auto var(--sp-4); max-width:44ch}
/* =============================================================================
22. NARZĘDZIA
========================================================================== */
.tb-sr{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.tb-mt{margin-top:var(--sp-4)} .tb-mt-s{margin-top:var(--sp-2)}
.tb-mb{margin-bottom:var(--sp-4)}
.tb-hide{display:none!important}
@media(max-width:560px){ .tb-hide-sm{display:none!important} }
/* =============================================================================
23. DOSTĘPNOŚĆ
========================================================================== */
/* focus — jeden pierścień na wszystkim, co interaktywne */
:where(a,button,input,select,textarea,summary,[tabindex],.tb-chip,.tb-btn,.tb-card__body [role="button"]):focus-visible{
outline:var(--focus-w) solid var(--brand); outline-offset:2px; border-radius:var(--r-sm)
}
/* na miodowym tle pierścień miodowy ginie → grafit */
.tb-btn--primary:focus-visible,.tb-badge:focus-visible,.tb-seg--brand button[aria-pressed="true"]:focus-visible{
outline-color:var(--ink)
}
[data-theme="dark"] .tb-btn--primary:focus-visible{outline-color:var(--sb-fg-strong)}
/* cele dotykowe ≥44px: ekran dotykowy ALBO wąski ekran
(nie każda przeglądarka mobilna raportuje pointer:coarse — stąd dwa warunki,
a selektory powtarzają specyficzność z sekcji bazowej, żeby wygrać) */
@media (pointer:coarse),(max-width:640px){
.tb-btn,.tb-seg button,.tb-tabs button,.tb-chip,.tb-popover__item,.tb-close{min-height:var(--tap)}
.tb-btn--icon,.tb-close{min-width:var(--tap); width:var(--tap)}
.tb-input,.tb-field input[type=text],.tb-field input[type=email],.tb-field input[type=number],
.tb-field input[type=url],.tb-field input[type=search],.tb-field select,.tb-field textarea{
min-height:var(--tap)}
.tb-btn--sm{min-height:var(--tap); padding:8px 13px}
.tb-switch{padding:var(--sp-3) 0; min-height:var(--tap)}
.tb-switch__box{width:44px; height:26px}
.tb-switch__track::after{width:20px; height:20px}
.tb-switch__box input:checked + .tb-switch__track::after{transform:translateX(18px)}
}
/* mniej ruchu */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
transition-duration:.001ms!important; scroll-behavior:auto!important}
}
/* wyższy kontrast — mocniejsze linie, ciemniejszy tekst pomocniczy, bez cieni */
@media (prefers-contrast:more){
:root{--line:#C9BFAC; --line-2:#D8CFBE; --ink-2:#3D3947; --ink-3:#4A4553;
--shadow-sm:none; --shadow-md:none; --shadow-lg:0 0 0 1px var(--line);
--hex-opacity:.03; --focus-w:4px}
[data-theme="dark"]{--line:#4A4757; --line-2:#3A3846; --ink-2:#CFC9D8; --ink-3:#BDB6C7}
.tb-card,.tb-kpi,.tb-code{border-width:2px}
.tb-pill,.tb-badge{border-color:currentColor}
.tb-btn--soft,.tb-btn--danger{border-color:currentColor}
}
/* wymuszone kolory systemowe (Windows High Contrast) */
@media (forced-colors:active){
.tb-btn,.tb-card,.tb-chip,.tb-pill,.tb-input{border:1px solid ButtonBorder}
.tb-bar__fill{background:Highlight}
.tb-hexfield::before{display:none}
}