/* @font-face for the self-hosted fonts (/static/fonts, `make fonts`) followed by design/tokens.css verbatim.
   Change tokens in design/tokens.css and copy them here; tests/test_static.py checks both stay equal. */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/static/fonts/inter-800.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/static/fonts/inter-900.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/courier-prime-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/courier-prime-700.woff2") format("woff2"); }

/* Furzy: tokeny i komponenty bazowe portalu partnera.
   Zebrane z makiet (docs/makiety-inwentarz.md, sekcja 15) i ujednolicone: jedna definicja każdej klasy.
   Fonty: Inter 400–900 i Courier Prime 400/700 jako pliki woff2 z własnego serwera (bez Google Fonts, SPEC sekcja 10).
   Ramki pól są ciemniejsze niż w makietach (#878D96 zamiast #D5D9DE) ze względu na kontrast WCAG. */

:root {
  /* Marka */
  --c-lime: #E2E663;          /* żółty marki: nagłówki, FAB, Partner Plus, status należna */
  --c-lime-hover: #D6DB4C;
  --c-lime-soft: #FBFBE8;     /* ramka kodu, KSeF */
  --c-purple: #6A40D2;        /* akcent: karta salda, linki, wykresy, focus */
  --c-purple-hover: #4F2DA8;
  --c-purple-soft: #F4F0FD;   /* ramki informacyjne */
  --c-purple-ink: #4A3A73;    /* tekst w ramkach informacyjnych */
  --c-purple-line: #8C6BE0;   /* separator na fiolecie */
  --c-purple-muted: #E9E2FB;  /* tekst drugorzędny na fiolecie */
  --c-red: #E5383B;           /* Hip & Joint, alerty */
  --c-red-ink: #A11E21;
  --c-red-soft: #FDE4E4;
  --c-red-bg: #FFF6F6;

  /* Neutralne */
  --c-ink: #010101;
  --c-btn: #121212;
  --c-btn-hover: #343434;
  --c-ink-2: #343434;
  --c-muted: #555555;
  --c-on-dark: #C8C8C8;
  --c-line: #E3E5E8;
  --c-line-strong: #D5D9DE;   /* ramki dekoracyjne i chipy z tekstem */
  --c-field-border: #878D96;  /* ramki pól: kontrast 3,3:1 z bielą (WCAG 1.4.11) */
  --c-soft: #F0F2F4;
  --c-bg: #FFFFFF;

  /* Typografia */
  --f-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Courier Prime", ui-monospace, monospace;

  /* Kształty i odstępy */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --tap: 44px;                /* minimalny cel dotyku */
  --btn-h: 52px;              /* telefon */
}
@media (min-width: 1024px) { :root { --btn-h: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font-family: var(--f-sans); }
a { color: var(--c-purple); }
a:hover { color: var(--c-purple-hover); }
:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 2px; }

/* Typografia */
.h { font-family: var(--f-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.h--display { font-weight: 900; letter-spacing: -0.02em; }          /* strony publiczne */
.mono { font-family: var(--f-mono); }
.lbl { font-family: var(--f-mono); font-size: 13px; font-weight: 700; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
@media (min-width: 1024px) { .ico { width: 20px; height: 20px; } }

/* Przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 20px;
  border: 0; border-radius: var(--r-md); background: var(--c-btn); color: #FFFFFF; font: 600 15px/1.2 var(--f-sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--c-btn-hover); color: #FFFFFF; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.btn--lime { background: var(--c-lime); color: var(--c-ink); border: 2px solid var(--c-ink); }
.btn--lime:hover { background: var(--c-lime-hover); color: var(--c-ink); }
.btn--block { width: 100%; }
.btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 14px;
  border: 1.5px solid var(--c-ink); border-radius: var(--r-md); background: #FFFFFF; color: var(--c-ink); font: 600 14px/1.2 var(--f-sans); text-decoration: none; cursor: pointer; }
.btn2:hover { background: var(--c-soft); color: var(--c-ink); }
.btn2--on-dark { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.btn-ai { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border: 1.5px solid var(--c-purple);
  border-radius: var(--r-md); background: #FFFFFF; color: var(--c-purple); font: 700 14px var(--f-sans); cursor: pointer; }

/* Karty i ramki */
.card { background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.card--balance { background: var(--c-purple); color: #FFFFFF; border: 0; border-radius: var(--r-lg); padding: 20px; }
.card--plus { background: var(--c-lime); border-radius: var(--r-lg); padding: 16px 18px; }
.card--outline { border: 2px solid var(--c-ink); border-radius: var(--r-lg); background: #FFFFFF; }
.card--dark { background: var(--c-btn); color: #D0D0D0; border-radius: var(--r-lg); }
.card--dashed { border: 2px dashed var(--c-ink); border-radius: var(--r-lg); }
.note--info { border: 2px solid var(--c-purple); background: var(--c-purple-soft); color: var(--c-purple-ink); border-radius: var(--r-lg); }
.note--alert { border: 2px solid var(--c-red); background: var(--c-red-bg); border-radius: var(--r-lg); }
.note--wait { border: 1.5px dashed var(--c-muted); background: var(--c-soft); border-radius: var(--r-md); }
.copybox { background: var(--c-soft); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.bubble { background: var(--c-lime); border-radius: 16px 16px 4px 16px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }

/* Chipy: wybór (Polecenie, Konto) i filtr (Zamówienia) */
.chip { min-height: var(--tap); padding: 8px 14px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-md); background: #FFFFFF;
  color: var(--c-ink); font: 600 14px var(--f-sans); cursor: pointer; }
.chip:hover { border-color: var(--c-muted); }
.chip[aria-pressed="true"], .chip.on { border-color: var(--c-ink); background: var(--c-soft); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.chip--filter { white-space: nowrap; font-size: 13px; }
.chip--filter[aria-pressed="true"], .chip--filter.on { background: var(--c-btn); color: #FFFFFF; box-shadow: none; border-color: var(--c-btn); }
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }

/* Statusy */
.st { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font: 700 12px var(--f-mono); text-transform: uppercase; white-space: nowrap; color: var(--c-ink); }
.st--oczekujaca { background: var(--c-soft); border: 1.5px dashed var(--c-muted); }
.st--nalezna    { background: var(--c-lime); border: 1.5px solid var(--c-ink); }
.st--wyplacona  { background: #FFFFFF; border: 1.5px solid var(--c-ink); }
.st--anulowana  { background: var(--c-red-soft); border: 1.5px solid var(--c-red); color: var(--c-red-ink); }
.st--skorygowana { background: var(--c-purple-soft); border: 1.5px solid var(--c-purple); color: var(--c-purple-hover); }
.st--muted      { background: #FFFFFF; border: 1.5px solid var(--c-line-strong); color: var(--c-muted); }

/* Pola */
.field, .ta, select { width: 100%; min-height: 48px; border: 1.5px solid var(--c-field-border); border-radius: var(--r-md); padding: 12px 14px;
  font: 500 16px var(--f-sans); color: var(--c-ink); background: #FFFFFF; }
.ta { min-height: 120px; line-height: 1.5; resize: vertical; }
select { padding: 0 12px; font-weight: 600; font-size: 14px; }
.field:focus, .ta:focus, select:focus { outline: 2px solid var(--c-purple); outline-offset: 1px; border-color: var(--c-purple); }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--c-purple); }
.dropzone { min-height: 72px; border: 2px dashed var(--c-field-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--c-muted); cursor: pointer; }

/* Listy, tabele, paski */
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-line); font-size: 14px; }
.row:first-child { border-top: 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { padding: 10px 12px; border-bottom: 1.5px solid var(--c-ink); text-align: left; font: 700 12px var(--f-mono); text-transform: uppercase; color: var(--c-muted); white-space: nowrap; }
td { padding: 12px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
th.n, td.n { text-align: right; white-space: nowrap; }
.bar { height: 10px; border-radius: 5px; background: var(--c-soft); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--c-purple); border-radius: 5px; }

/* Nawigacja salonu: telefon */
.tabbar { display: flex; justify-content: space-around; align-items: center; background: #FFFFFF; border-top: 1px solid var(--c-line); padding: 6px 6px 20px; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 58px; min-height: 48px;
  font-size: 11px; font-weight: 600; color: var(--c-muted); text-decoration: none; }
.tab:hover, .tab[aria-current="page"] { color: var(--c-ink); }
.tab .pip { display: flex; align-items: center; justify-content: center; width: 48px; height: 28px; border-radius: 14px; }
.tab[aria-current="page"] .pip { background: var(--c-lime); }
.fab { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-top: -28px; border-radius: 30px;
  background: var(--c-lime); color: var(--c-ink); border: 2px solid var(--c-ink); }
.fab:hover { background: var(--c-lime-hover); color: var(--c-ink); }
.fab[aria-current="page"] { background: var(--c-ink); color: var(--c-lime); }

/* Nawigacja salonu: komputer */
.side-nav a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-md);
  color: var(--c-ink-2); text-decoration: none; font-size: 14px; font-weight: 600; }
.side-nav a:hover { background: var(--c-soft); }
.side-nav a[aria-current="page"] { background: var(--c-btn); color: #FFFFFF; }
.side-nav a[aria-current="page"] .ico { color: var(--c-lime); }

/* Nawigacja admina */
.admin-nav a { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-md);
  color: var(--c-on-dark); text-decoration: none; font-size: 14px; font-weight: 600; }
.admin-nav a:hover { color: #FFFFFF; background: #262626; }
.admin-nav a[aria-current="page"] { background: var(--c-lime); color: var(--c-ink); }
.badge { margin-left: auto; padding: 0 6px; border-radius: var(--r-sm); font: 700 12px var(--f-mono); background: var(--c-lime); color: var(--c-ink); }
.badge--alert { background: var(--c-red-ink); color: #FFFFFF; }   /* biel na #E5383B ma tylko 4,2:1 */

/* Awatary */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-btn); color: var(--c-lime); font-weight: 800; font-size: 15px; }