/* ==========================================================================
   Tokeny projektowe — jedyne miejsce, w którym zmienia się wygląd platformy
   ========================================================================== */

:root {

  /* ——— Marka Colberg ———————————————————————————————————————————
   * Paleta wzięta z colbergcoffee.pl: cyan #00BAF2 i pomarańcz #FF7300.
   * Układ jest wzorowany na b2b.coffeedesk.pl, ale kolory są wasze —
   * klient nie ma mieć wrażenia, że ogląda sklep konkurencji.
   */
  --cb-brand:            #06364A;   /* ciemny teal — paski, nagłówki, stopka */
  --cb-brand-700:        #0A4B66;
  --cb-brand-600:        #0093C0;
  --cb-brand-500:        #00BAF2;   /* cyan Colberga — linki, akcenty        */
  --cb-brand-050:        #EAF7FC;   /* tło sekcji, hover wierszy             */

  /* ——— Kolor akcji ———————————————————————————————————————————
   * Jeden kolor na całą stronę: przycisk „do koszyka" i cena klienta.
   *
   * Firmowy #FF7300 daje z bielą kontrast 2,7:1 — poniżej wymaganego 4,5:1,
   * więc jako tło przycisku z białym tekstem i jako kolor ceny jest
   * nieczytelny dla części osób. Do tych zastosowań używamy przyciemnionego
   * #C25100 (4,7:1), a pełnej jaskrawości tam, gdzie nie niesie tekstu:
   * paski postępu, obramowania, stany hover.
   */
  --cb-accent:           #C25100;   /* tekst i tła niosące tekst   */
  --cb-accent-hover:     #9E4200;
  --cb-accent-bright:    #FF7300;   /* akcenty bez tekstu          */

  /* ——— Neutralne ——————————————————————————————————————————— */
  --cb-ink:              #0A0A0A;
  --cb-ink-muted:        #6B7177;
  --cb-line:             #E3E5E8;
  --cb-line-strong:      #C7CBD0;
  --cb-surface:          #FFFFFF;
  --cb-surface-alt:      #F7F9FA;

  /* ——— Status ——————————————————————————————————————————————— */
  --cb-ok:               #1B7F4A;
  --cb-warn:             #B26A00;
  --cb-err:              #C0392B;

  /* ——— Typografia ——————————————————————————————————————————— */
  --cb-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  --cb-fs-micro:  0.6875rem;   /* 11px — etykiety tabel, EAN   */
  --cb-fs-small:  0.8125rem;   /* 13px — meta, breadcrumbs     */
  --cb-fs-body:   0.9375rem;   /* 15px — treść                 */
  --cb-fs-lead:   1.125rem;    /* 18px — cena                  */
  --cb-fs-h2:     1.5rem;
  --cb-fs-h1:     2.25rem;

  /* ——— Rytm ————————————————————————————————————————————————
   * Wszystkie odstępy są wielokrotnością 8px. Bez wyjątków — to, co wygląda
   * na „chaotyczny, ale ładny" layout, prawie zawsze jest siatką 8px.
   */
  --cb-space:     8px;
  --cb-radius:    4px;
  --cb-radius-lg: 6px;

  /* ——— Układ ———————————————————————————————————————————————— */
  --cb-sidebar:   260px;
  --cb-max:       1440px;
  --cb-gutter:    24px;
  --cb-topbar-h:  40px;
  --cb-header-h:  88px;
}

/* Cyfry tabelaryczne: jedna linijka, dzięki której kolumny cen wyrównują się
   do przecinka. W sklepie, w którym klient porównuje 40 cen naraz, widać to
   od razu. */
.cb-price__value,
.cb-row,
.cb-table,
.woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
}