@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('fonts/dmsans.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dmmono.woff2') format('woff2'); }


:root {
  
  --terakota: #c4582f;
  --turkus: #3f8f9c;
  --krem: #efe0c2;
  --musztarda: #dca23a;
  --zolty: #ffe680;         
  --kakao: #3b2420;          

  
  --ink: #1b1918;
  --papier-baza: #f4f2ee;
  --pistacja: #c9dda8;       
  --pomarancz: #e8743b;      
  
  --special: #5b1f25;        
  --exclusive: #1d1b1a;      
  --original: #2e6b3c;       

  
  --papier: #faf5ea;
  --papier-2: #f3ead7;
  --tusz: #231815;
  --tusz-2: #5c4a42;

  --f-display: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;
  --f-tekst: 'DM Sans', system-ui, sans-serif;
  --f-reka: 'Allura', cursive;

  --r-pill: 999px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--tusz); font: 400 17px/1.6 var(--f-tekst); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; margin: 0; letter-spacing: -0.01em; word-spacing: 0.04em; }
.reka { font-family: var(--f-reka); font-weight: 400; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.etykieta { font: 400 12px/1 var(--f-tekst); letter-spacing: 0;  }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: var(--r-pill); font: 400 15px/1 var(--f-tekst); text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-glowny { background: var(--terakota); color: #fff; }
.btn-glowny:hover { background: #ad4924; }
.btn-jasny { background: var(--krem); color: var(--tusz); }
.btn-obrys { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }


.intensywnosc { display: inline-flex; gap: 5px; }
.intensywnosc i { width: 11px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px currentColor; position: relative; }
.intensywnosc i.on { background: currentColor; }
.intensywnosc i::after { content: ''; position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1.4px; margin-left: -.7px; background: var(--papier); border-radius: 2px; transform: rotate(8deg); opacity: .9; }
.intensywnosc i:not(.on)::after { background: currentColor; }


b, strong, .mocne { font-weight: 400; }