/* ==========================================================================
   VetPuls – design tokens (źródło: Claude Design „VetPuls sklep v2”).
   Wszystkie komponenty vp-* używają WYŁĄCZNIE tych zmiennych.
   Nowy kolor/rozmiar? Najpierw dopisz token tutaj, potem użyj.
   ========================================================================== */
:root {
  /* --- Kolory: tło i powierzchnie --- */
  --vp-bg:            #FAF8F4;  /* tło strony */
  --vp-surface:       #FFFFFF;  /* karty, boksy */
  --vp-cream:         #F1EBDF;  /* miękkie tła, plakietki, aktywny wariant */
  --vp-cream-soft:    #F0ECE2;  /* separatory w tabelach */
  --vp-sand:          #F1EDE2;  /* placeholdery zdjęć, sekcja "Dorzuć" */
  --vp-border:        #E7E1D4;  /* obramowania kart i pól */
  --vp-border-strong: #D8D2C0;

  /* --- Kolory: tekst --- */
  --vp-ink:           #161616;  /* nagłówek, ciemne sekcje, przycisk ciemny */
  --vp-ink-deep:      #0F0F0F;  /* top bar */
  --vp-text:          #1A1A1A;  /* tekst podstawowy */
  --vp-text-2:        #3A3733;  /* tekst akapitów w boksach */
  --vp-muted:         #6E6961;  /* tekst drugorzędny, etykiety */
  --vp-muted-2:       #8A857B;  /* okruszki, meta */

  /* --- Kolory: złoto (akcent marki) --- */
  --vp-gold:          #C9A86A;  /* akcent na ciemnym, gwiazdki, aktywne menu */
  --vp-gold-cta:      #B9975B;  /* tło głównego CTA, badge koszyka */
  --vp-gold-hover:    #A3824A;  /* hover CTA i linków */
  --vp-gold-text:     #96794A;  /* złoty tekst na jasnym tle */

  /* --- Kolory: ciemne sekcje (header, stopka, Premium) --- */
  --vp-on-dark:        #F5F1E8;
  --vp-on-dark-2:      #F1EBDF;
  --vp-on-dark-muted:  #B5B0A6;
  --vp-on-dark-muted-2:#A39D90;
  --vp-dark-line:      #3A352A;
  --vp-dark-line-2:    #2A2A26;
  --vp-dark-field:     #4E483E;  /* obramowanie wyszukiwarki w headerze */
  --vp-dark-surface:   #332F27;

  /* --- Stany --- */
  --vp-success:  #2E7D46;  /* dostępny, darmowa dostawa */
  --vp-warning:  #C9A86A;  /* ostatnie sztuki, na zamówienie */
  --vp-danger:   #B3432B;  /* brak, błędy */
  --vp-disabled: #A39D90;  /* nieaktywny CTA */

  /* --- Typografia --- */
  --vp-font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --vp-font-body:    'Source Sans 3', system-ui, sans-serif;
  --vp-stretch-hero: 84%;   /* H1/H2 duże */
  --vp-stretch-head: 86%;   /* H3, ceny */
  --vp-stretch-ui:   88%;   /* nazwy produktów, etykiety Archivo */
  --vp-stretch-btn:  90%;   /* przyciski, zakładki */

  --vp-fs-display:   68px;  /* hero H1 (home) */
  --vp-fs-h1:        60px;  /* H1 kategorii */
  --vp-fs-h1-sm:     40px;  /* H1 produktu */
  --vp-fs-h2-xl:     54px;  /* H2 sekcji Premium */
  --vp-fs-h2:        42px;  /* H2 sekcji */
  --vp-fs-h3:        22px;
  --vp-fs-h4:        18px;  /* nazwa produktu w karcie, tytuły kart */
  --vp-fs-price-xl:  44px;  /* cena na karcie produktu */
  --vp-fs-lead:      17px;
  --vp-fs-body:      15px;
  --vp-fs-ui:        14.5px; /* menu, większość UI */
  --vp-fs-small:     13.5px;
  --vp-fs-xs:        12px;   /* plakietki, eyebrow */

  --vp-lh-tight:  1;
  --vp-lh-head:   1.04;
  --vp-lh-body:   1.6;
  --vp-ls-head:   -0.025em;
  --vp-ls-eyebrow: 0.1em;

  --vp-fw-regular: 400;
  --vp-fw-semi:    600;
  --vp-fw-bold:    700;
  --vp-fw-heavy:   800;
  --vp-fw-black:   850;

  /* --- Promienie --- */
  --vp-radius-xs: 4px;
  --vp-radius-sm: 6px;   /* plakietki, chipy */
  --vp-radius:    8px;   /* przyciski, pola, miniatury */
  --vp-radius-lg: 10px;  /* karty, boksy */
  --vp-radius-xl: 12px;  /* logo, duże boksy */

  /* --- Odstępy / siatka --- */
  --vp-container:    1240px; /* szerokość z paddingiem */
  --vp-gutter:       48px;   /* padding boczny kontenera (desktop) */
  --vp-section-y:    84px;   /* pionowy padding sekcji (desktop) */
  --vp-gap-xs: 4px; --vp-gap-sm: 8px; --vp-gap: 12px; --vp-gap-md: 20px; --vp-gap-lg: 24px; --vp-gap-xl: 56px;

  /* --- Komponenty --- */
  --vp-btn-h:        56px;   /* CTA karty produktu */
  --vp-btn-pad:      17px 32px;
  --vp-chip-pad:     5px 10px;
}

/* Skalowanie na mniejszych ekranach – szczegóły w docs/responsywnosc.md */
@media (max-width: 1199px) {
  :root { --vp-gutter: 32px; --vp-section-y: 64px; --vp-fs-display: 56px; --vp-fs-h1: 48px; --vp-fs-h2-xl: 44px; --vp-fs-h2: 36px; }
}
@media (max-width: 959px) {
  :root { --vp-gutter: 24px; --vp-section-y: 48px; --vp-fs-display: 44px; --vp-fs-h1: 38px; --vp-fs-h1-sm: 32px; --vp-fs-h2-xl: 34px; --vp-fs-h2: 30px; --vp-fs-price-xl: 36px; }
}
@media (max-width: 639px) {
  :root { --vp-gutter: 16px; --vp-section-y: 40px; --vp-fs-display: 36px; --vp-fs-h1: 32px; --vp-fs-h1-sm: 28px; --vp-fs-h2-xl: 28px; --vp-fs-h2: 26px; --vp-fs-h3: 20px; }
}