/* SILVER SHARKY — design tokens
   Zrodlo prawdy dla odwzorowania 1:1. Nie zmieniaj wartosci bez zgody projektanta. */
:root {
  /* --- Kolory: tekst --- */
  --ss-ink:            #2A2E45; /* naglowki, glowny tekst, granat marki */
  --ss-body:           #3F4460; /* tekst akapitowy na jasnym tle */
  --ss-body-2:         #4B5057; /* tekst pomocniczy, opisy */
  --ss-body-on-grad:   #4B5068; /* tekst pomocniczy na gradiencie */
  --ss-muted:          #8A9099; /* meta, daty, liczniki */
  --ss-muted-2:        #5A6078;

  /* --- Kolory: tlo i linie --- */
  --ss-bg:             #FFFFFF; /* tlo strony glownej */
  --ss-bg-soft:        #F5F6F8; /* pasy sekcji, kafle */
  --ss-bg-soft-2:      #F0F2F6; /* hover kafla, kolka ikon */
  --ss-bg-shop:        #F6F6F4; /* tlo podstron sklepowych (kategoria, koszyk, konto) */
  --ss-border:         #E2E5EC; /* ramki kart i tabel */
  --ss-border-strong:  #C9CDD2; /* ramki pol formularzy */

  /* --- Akcent --- */
  --ss-accent:         #2A72BF; /* przyciski glowne, linki aktywne */
  --ss-accent-hover:   #1F2438; /* hover przyciskow glownych */
  --ss-grad:           linear-gradient(135deg, #F1C6D0 0%, #A9D8F2 100%); /* gradient marki */
  --ss-grad-from:      #F1C6D0;
  --ss-grad-to:        #A9D8F2;

  /* --- Statusy --- */
  --ss-ok:             #16A34A;
  --ss-ok-bg:          #E7F6EC;
  --ss-ok-ink:         #166534;
  --ss-sale:           #E11D48;
  --ss-sale-bg:        #FDE7EC;
  --ss-star:           #F5A623;

  /* --- Typografia --- */
  --ss-font-display: "Schibsted Grotesk", system-ui, sans-serif; /* naglowki, ceny, liczby */
  --ss-font-text:    "Manrope", system-ui, sans-serif;           /* cala reszta */

  /* Skala naglowkow (desktop). Litery: letter-spacing obowiazkowy! */
  --ss-h1:      clamp(36px, 4vw, 54px); /* line-height 1.0;  ls -0.035em; 700 */
  --ss-h1-page: clamp(40px, 4.5vw, 56px);
  --ss-h2:      28px;                   /* line-height 1.15; ls -0.025em; 700 */
  --ss-h2-sec:  22px;                   /* naglowek sekcji z niebieska linia; ls -0.02em */
  --ss-h3:      19px;                   /* ls -0.015em; 700 */
  --ss-price-xl: 40px;                  /* ls -0.03em; 700; font-display */
  --ss-price-l:  26px;
  --ss-body-size: 16px;                 /* line-height 1.5 */
  --ss-small:     14px;
  --ss-tiny:      12.5px;
  --ss-kicker:    12px;                 /* 700; ls 0.12em; uppercase */

  /* --- Layout --- */
  --ss-container: 1280px;
  --ss-gutter:    24px;
  --ss-topbar-h:  33px;
  --ss-header-h:  72px;

  /* --- Promienie --- */
  --ss-r-sm:  8px;
  --ss-r-md:  10px;
  --ss-r-lg:  14px;
  --ss-r-xl:  16px;
  --ss-r-2xl: 20px;
  --ss-r-3xl: 24px;
  --ss-r-pill: 999px;

  /* --- Cienie --- */
  --ss-shadow-menu: 0 24px 48px rgba(18, 20, 23, .10);
  --ss-shadow-card: 0 24px 48px rgba(18, 20, 23, .10);
  --ss-shadow-modal: 0 30px 80px rgba(0, 0, 0, .35);

  /* --- Wysokosci kontrolek --- */
  --ss-h-input:  48px;
  --ss-h-btn:    52px;
  --ss-h-btn-sm: 42px;
  --ss-h-chip:   38px;
}