/* =========================================================
   TROSZOK WARZECHA - VARIABLES
   ========================================================= */


html,
body {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --color-bg: #0a0d12;
  --color-text: #d9d9d9;
  --color-accent: #78a78d;
  --color-muted: #6f6f71;

  --font-primary: "Inter", sans-serif;

  --fs-d: clamp(4.5rem, 4vw + 1rem, 5.7rem);
  --fs-l: clamp(3rem, 2vw + 1rem, 3.5rem);
  --fs-m: clamp(2rem, 1.5vw + 1rem, 2.5rem);
  --fs-n: clamp(0.9rem, 0.2vw + 0.85rem, 1rem);
  --fs-s: clamp(0.85rem, 0.15vw + 0.8rem, 0.92rem);

  --fw-thin: 100;
  --fw-extralight: 200;
  --fw-light: 300;
  --fw-regular: 400;

  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 2rem;
  --space-l: 4rem;
  --space-xl: 8rem;

  --container: 1600px;

  --transition-fast: 250ms ease;
  --transition-normal: 450ms ease;
  --transition-slow: 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   BASE
   ========================================================= */

html {
  font-size: 16px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-weight: var(--fw-light);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 0;
}

h1 {
  font-size: var(--fs-d);
  font-weight: var(--fw-light);
}

h2 {
  font-size: var(--fs-l);
  font-weight: var(--fw-light);
}

h3 {
  font-size: var(--fs-m);
  font-weight: var(--fw-light);
}

p,
li,
a {
  font-size: var(--fs-n);
  font-weight: var(--fw-light);
}

small {
  font-size: var(--fs-s);
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}