/* ========================================
   KAMIENIARSTWO GŁOWIŃSCY – GLOBAL BASE STYLES
   ======================================== */

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

:root {
  /* ── Baza – ciepła kremowa ── */
  --color-bg:       #F2EDE6;        /* ciepły kremowy */
  --color-bg-alt:   #EDE7DF;        /* nieco ciemniejszy krem dla sekcji */
  --color-text:     var(--color-navy);
  --color-surface:  #FDFAF6;
  --color-muted:    #7A7166;
  --color-border:   #DDD6CC;
  --color-shadow:   rgba(28, 25, 21, 0.07);

  /* ── Ciemne tło TYLKO header + footer ── */
  --color-navy:     #1A2433;
  --color-navy-mid: #24304A;

  /* ── Paleta z harmonii ── */
  --color-gold:       #A39281;      /* taupe z logo */
  --color-gold-light: #BFB09F;
  --color-gold-soft:  #EDE8E1;

  --color-steel:      #818FA3;      /* stalowy — usunięty z tła sekcji */
  --color-steel-soft: #E8EBF0;

  --color-sage:       #81A3A1;
  --color-sage-soft:  #E4EDEC;

  --color-umber:      #33271A;      /* ciemny brąz — tylko akcenty tekstowe */

  /* ── Aliasy ── */
  --color-primary:       var(--color-gold);
  --color-primary-hover: #8C7D6E;
  --color-stone:         var(--color-gold);
  --color-stone-soft:    var(--color-gold-soft);
  --color-sand:          var(--color-gold-light);
  --color-sand-soft:     var(--color-gold-soft);


  /* ── kolory loga ── */
  --color-logo-light: #A39280;
  --color-logo-smid: #8E7A67;
  --color-logo-dmid: #766556;
  --color-logo-dark: #5F5145;

  /* ── Typografia ── */
  --font-body:    'DM Sans', sans-serif;
  --font-heading: 'Cormorant Garamond', serif;

  --container-width: 1200px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 16px;
  line-height: 1.15;
  font-weight: 500;
}

h1 { font-size: clamp(36px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(18px, 2vw, 24px); }

p { margin: 0 0 16px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.65,.3,1),
              transform .8s cubic-bezier(.2,.65,.3,1);
  will-change: opacity, transform;
}
.reveal.is-inview { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .container { padding-left: var(--space-lg); padding-right: var(--space-lg); }
}