@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg-limestone: #F4F1EC;
  --bg-alabaster: #FAF8F5;
  --bg-charcoal: #161513;
  --ink-primary: #181715;
  --ink-muted: #5F5B53;
  --accent-bronze: #8B7355;
  --border-hairline: rgba(24, 23, 21, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-limestone);
  color: var(--ink-primary);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.font-editorial {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-mono-arch {
  font-family: 'JetBrains Mono', monospace;
}

/* Subtelne linie architektoniczne w tle */
.arch-grid-lines {
  background-image: linear-gradient(to right, rgba(24, 23, 21, 0.045) 1px, transparent 1px);
  background-size: 25% 100%;
}

/* Karty edytorskie */
.editorial-card {
  background-color: var(--bg-alabaster);
  border: 1px solid var(--border-hairline);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.35s ease;
}

.editorial-card:hover {
  border-color: rgba(139, 115, 85, 0.45);
  box-shadow: 0 24px 48px -28px rgba(22, 21, 19, 0.22);
}

.editorial-card img.zoom-img {
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.editorial-card:hover img.zoom-img {
  transform: scale(1.035);
}

/* Główny ciemny przycisk */
.btn-charcoal {
  background-color: var(--bg-charcoal);
  color: #FAF8F5;
  transition: background-color 0.22s ease, transform 0.2s ease;
}

.btn-charcoal:hover {
  background-color: #2A2824;
  transform: translateY(-1px);
}

/* Stylowanie suwaka metrażu */
input[type='range'].arch-range {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(24, 23, 21, 0.16);
  border-radius: 999px;
  outline: none;
}

input[type='range'].arch-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #161513;
  border: 3px solid #FAF8F5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

input[type='range'].arch-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #161513;
  border: 3px solid #FAF8F5;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  cursor: pointer;
}