/* ============================================================
 * OMNIRA - TOKENY
 * Kierunek: Minerva x Palantir. Strona jest bielą, czernią
 * i szarościami. Hierarchię niosą skala typografii, siatka,
 * whitespace i kreska - nie kolor.
 *
 * Nadpisuje Master Spec 2.3/2.4 (pastelowa semantyka produktów).
 * Sześć produktów odróżnia numer porządkowy, etykieta systemowa,
 * status i realny fragment UI.
 * ============================================================ */

:root {
  /* Powierzchnie */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f0f0f2;

  /* Pasy negatywowe. Palantir używa ich rzadko i przez to mocno:
     maksymalnie dwa razy na całej stronie. */
  --panel: #121214;
  --panel-2: #1c1c1f;

  /* Tusz */
  --text: #0e0e10;
  --text-dim: #5e5e66;
  --text-faint: #83838c;
  --text-invert: #f5f5f6;

  /* Linie */
  --border: #d7d7dc;
  --border-strong: #a9a9b2;
  --hairline: #e4e4e8;

  /* Akcja. CTA jest czarne na bieli albo białe na czerni. Bez wyjątków. */
  --accent: var(--text);
  --on-accent: #ffffff;

  /* ZNAK MARKI - jedyne miejsce koloru na całej stronie.
     Wolno go użyć w logotypie i nigdzie indziej. */
  --brand-mark: #c81e38;

  --shadow-card: 0 1px 2px rgb(14 14 16 / 0.04), 0 8px 24px -10px rgb(14 14 16 / 0.08);
  --shadow-lift: 0 2px 4px rgb(14 14 16 / 0.05), 0 18px 44px -18px rgb(14 14 16 / 0.16);

  /* Promienie. Spec rozdz. 7 zakazuje "wszystko rounded-24". */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* Rytm sekcji - najważniejszy pojedynczy parametr strony. */
  --section: 160px;
  --section-sm: 88px;
  --gutter: 40px;
  --maxw: 1360px;
  --maxw-text: 62ch;

  /* Typografia */
  /* Manrope zamiast Space Grotesk. Znak marki to monolinia oparta na
     idealnym okregu, z plasko scietymi zakonczeniami. Space Grotesk mial
     cechy odwrotne: zwezone owale i skosne ciecia, wiec krój walczyl ze
     znakiem o rolę sygnatury. Manrope ma bowls blisko okregu i poziome
     zakonczenia - rymuje sie ze znakiem i schodzi mu z drogi. */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --t-h1: clamp(38px, 5.5vw, 76px);
  --t-h2: clamp(29px, 3.8vw, 51px);
  --t-h3: clamp(22px, 2.4vw, 32px);
  --t-h4: clamp(18px, 1.6vw, 21px);
  --t-num: clamp(46px, 7.2vw, 98px);
  --t-ledger: clamp(33px, 5.1vw, 72px);
  --t-lead: clamp(16px, 1.3vw, 20px);
  --t-body: 16px;
  --t-meta: 12px;
  --t-label: 11px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* Scope negatywu. Sekcja na ciemnym tle przełącza TOKENY zamiast
   nadpisywać kolory w komponentach - ten sam komponent działa
   na bieli i na czerni bez ani jednego wariantu. */
[data-invert] {
  --bg: var(--panel);
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --text: var(--text-invert);
  --text-dim: #a8a8b0;
  --text-faint: #83838c;
  --border: #33333a;
  --border-strong: #4c4c55;
  --hairline: #282830;
  --accent: var(--text-invert);
  --on-accent: var(--panel);
  --shadow-card: none;
  --shadow-lift: none;

  background: var(--panel);
  color: var(--text);
  color-scheme: dark;
}

/* ============================================================
 * RESET
 * ============================================================ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` zamiast `hidden`: hidden robi z body kontener scrolla,
     co psuje position: sticky w sekcji "Co dajemy" i myli
     pomiar wysokosci dokumentu. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }

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

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

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

/* Liczby zawsze tabularne, żeby kolumny nie skakały. */
.mono, .num, [class*="mono"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * SKALA TYPOGRAFICZNA
 * ============================================================ */

.h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.026em;
  font-weight: 600;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: 1.12;
  letter-spacing: -0.021em;
  font-weight: 600;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.006em;
  font-weight: 500;
}

.num {
  font-family: var(--font-display);
  font-size: var(--t-num);
  line-height: 0.9;
  letter-spacing: -0.022em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: var(--maxw-text);
}

.meta {
  font-size: var(--t-meta);
  line-height: 1.45;
  color: var(--text-dim);
}

/* Etykieta systemowa. W monochromie to informacja, nie ozdoba. */
.label {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 500;
}

.label--ink { color: var(--text-dim); }

/* Marker `//` przed etykietą - mikrocopy systemowe, nigdy w kolorze. */
.marker::before {
  content: "// ";
  color: var(--text-faint);
}

/* ============================================================
 * REDUCED MOTION - globalny wyłącznik.
 * Stany renderują się KOŃCOWE, nic nie znika.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
 * ZIARNO
 * Jedna wspolna warstwa dla calej strony. Spina monochromatyczny
 * interfejs ze skanami fotografii, ktore same w sobie sa ziarniste.
 * Fixed + pointer-events:none, zeby nie repaintowac przy scrollu.
 * ============================================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}