/*
 * Tokeny projektowe NOFIL — wyciągnięte 1:1 z makiet w design/.
 * To jedyne miejsce, w którym zapisujemy wartości kolorów, gradientów i skoków typografii.
 * Nic poniżej tego pliku nie powinno zawierać surowego HEX-a.
 */

:root {
  /* --- kolory marki --- */
  --nofil-czarny:              #14100e;   /* tła sekcji ciemnych, przyciski główne */
  --nofil-krem:                #fffaf4;   /* tekst na ciemnym */
  --nofil-pomaranczowy:        #e8823c;   /* akcent, CTA, aktywne stany */
  --nofil-pomaranczowy-jasny:  #f3a469;   /* nadtytuły na ciemnym tle */
  --nofil-pomaranczowy-ciemny: #c2611f;   /* linki i akcenty na jasnym tle */
  --nofil-rdzawy:              #a8541a;   /* plakietki, nadtytuły na jasnym */

  /* --- tekst --- */
  --nofil-tekst:        #2b2723;
  --nofil-tekst-drugi:  #6f665b;
  --nofil-tekst-slaby:  #a29689;
  --nofil-tekst-sekcja: #56504a;

  /* --- powierzchnie --- */
  --nofil-biel:        #ffffff;
  --nofil-ramka:       #ece7df;
  --nofil-ramka-mocna: #e6e0d7;
  --nofil-tlo-jasne:   #faf6f1;
  --nofil-tlo-sekcji:  #f7f4ef;
  --nofil-tlo-chip:    #f9f7f3;
  --nofil-tlo-akcent:  #fdf1e6;   /* plakietki wysyłki, tło aktywnych pigułek */

  /* --- gradienty --- */
  --nofil-grad-ciemny: linear-gradient(105deg, #14100e 0%, #22150f 38%, #3d1e0c 70%, #5c2f0f 100%);
  --nofil-grad-jasny:  linear-gradient(100deg, #efebe4 0%, #e7e1d8 55%, #ded8cf 100%);
  --nofil-grad-szary:  linear-gradient(100deg, #dcd7ce 0%, #cdc8bf 55%, #bcb7ae 100%);
  --nofil-grad-cta:    linear-gradient(105deg, #c2611f 0%, #e8823c 55%, #f3a469 100%);
  --nofil-kreski:      repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, rgba(0,0,0,0) 1px 16px);
  --nofil-kreski-jasne: repeating-linear-gradient(115deg, rgba(90,74,54,0.05) 0 1px, rgba(0,0,0,0) 1px 16px);

  /* --- promienie --- */
  --nofil-r-mala:    9px;
  --nofil-r:         10px;
  --nofil-r-pole:    12px;
  --nofil-r-karta:   18px;
  --nofil-r-sekcja:  22px;
  --nofil-r-pigulka: 999px;

  /* --- cienie --- */
  --nofil-cien-karta:  0 18px 40px rgba(76,62,44,0.14);
  --nofil-cien-panel:  0 26px 54px rgba(76,62,44,0.18);
  --nofil-cien-modal:  0 40px 90px rgba(20,16,14,0.4);
  --nofil-cien-cta:    0 14px 30px rgba(232,130,60,0.32);

  /* --- układ --- */
  --nofil-max:       1440px;
  --nofil-padding-x: 48px;
  --nofil-naglowek-h: 92px;

  /* --- typografia --- */
  --nofil-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --nofil-ls-naglowek: -0.045em;   /* h1, h2 */
  --nofil-ls-karta:    -0.035em;   /* nazwy produktów, ceny */
  --nofil-ls-nadtytul:  0.2em;     /* SKLEP, KATEGORIE, BESTSELLERY */
  --nofil-ls-etykieta:  0.16em;    /* etykiety nad swatchami */

  --nofil-lh-naglowek: 0.92;

  /* --- przejścia --- */
  --nofil-przejscie:       all 0.18s ease;
  --nofil-przejscie-szybko: all 0.16s ease;
}

/*
 * Breakpoint mobilny 760 px wynika wprost z makiety (design/NOFIL Sklep.dc.html).
 * Referencja wizualna: design/Podglad mobilny 390px.html
 */
@media (max-width: 760px) {
  :root {
    --nofil-padding-x: 18px;
    --nofil-naglowek-h: auto;
  }
}