/* ============================================================
   SiteVerse — base.css
   Reset + design tokens. Kierunek: atrament na papierze,
   praca (portfolio) jest jedynym kolorem strony.
   ============================================================ */

:root {
  /* Papier — ciepły, nie sterylny */
  --paper:        #F4F1EA;
  --paper-2:      #EBE7DD;
  --paper-3:      #E2DDD0;

  /* Atrament */
  --ink:          #16150F;
  --ink-2:        #45433B;
  --muted:        #7A766A;

  /* Ciemne sekcje — ciepła czerń */
  --void:         #12110D;
  --void-2:       #1A1914;
  --paper-on-dark:#F1EEE6;
  --muted-on-dark:#989487;

  /* Hairlines — echo siatki globu */
  --line:         rgba(22, 21, 15, 0.14);
  --line-strong:  rgba(22, 21, 15, 0.30);
  --line-on-dark: rgba(241, 238, 230, 0.14);

  /* Akcent — wyłącznie mikro (focus, selekcja). Nie dekoracja. */
  --signal:       #6E59C7;

  /* Typografia */
  --font-display: "Syne", "Hanken Grotesk", sans-serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-sans:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Skala (fluid) */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.14rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.60rem, 1.40rem + 1.00vw, 2.30rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.60rem);
  --step-4:  clamp(2.80rem, 2.10rem + 3.60vw, 5.40rem);
  --step-5:  clamp(3.40rem, 2.20rem + 6.20vw, 8.20rem);

  /* Przestrzeń */
  --section-y: clamp(104px, 11vw, 200px);
  --gutter:    clamp(20px, 4.5vw, 72px);
  --maxw:      1440px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

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

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul, ol { list-style: none; }

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* ---------- Typografia bazowa ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 em, h2 em, h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}

.eyebrow--dark { color: var(--muted-on-dark); }
.eyebrow--dark::before { background: var(--line-on-dark); }

/* ---------- Grain — faktura papieru ---------- */

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}