/* WILGA — tokens: kolory, typografia, skala, cienie.
   Paleta studyjna: jasne tło, grafitowa scena produktu, jeden kwasowy akcent.
   @font-face są w css/fonts.css (HTTP) i css/fonts-file.css (file://). */

:root {
  /* powierzchnie */
  --paper:        #F2F1ED;   /* tło strony */
  --card:         #FFFFFF;   /* karty */
  --line:         #E4E3DD;   /* linie, obramowania */
  --graphite:     #0E1013;   /* scena produktu, nagłówek koszyka, stopka */
  --lime:         #CCFF3C;   /* jedyny akcent */
  --lime-deep:    #B8E82B;   /* akcent w stanie hover (nadal z ciemnym tekstem) */

  /* tekst */
  --ink:          #14161A;   /* na jasnym */
  --ink-2:        #5C6066;   /* wtórny na jasnym */
  --ink-3:        #63676E;   /* drobne opisy; 5.03:1 na papierze, 5.68:1 na karcie */
  --on-dark:      #F2F2EF;   /* na grafitcie */
  --on-dark-2:    #A8ACB3;   /* wtórny na grafitcie */
  --on-lime:      #0E1013;   /* zawsze ciemny tekst na limonce */

  /* stany */
  --danger:       #B23A2E;   /* na jasnym tle 5.25:1 */
  --danger-on-dark: #EE8579; /* ta sama rola na grafidzie, 7.5:1 */
  --focus:        #0E1013;
  --focus-on-dark:#CCFF3C;

  /* typografia */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* skala */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.0625rem, 0.99rem + 0.28vw, 1.1875rem);
  --step-2:  clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2.125rem, 1.65rem + 2vw, 3.4rem);
  --step-5:  clamp(2.6rem, 1.55rem + 4.6vw, 5.5rem);

  /* rytm */
  --gap:      clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --pad-x:    clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem);
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* kształty */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;

  /* cienie — subtelne, chłodne */
  --shadow-1: 0 1px 2px rgba(14, 16, 19, 0.05), 0 2px 8px rgba(14, 16, 19, 0.04);
  --shadow-2: 0 2px 4px rgba(14, 16, 19, 0.06), 0 12px 30px rgba(14, 16, 19, 0.07);
  --shadow-3: 0 24px 60px rgba(14, 16, 19, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}