/* ==========================================================================
   SYRENA — main.css
   Estetyka: Quiet Bridal Luxury (krem + szampańskie złoto + ciepły espresso)
   Fonty: Fraunces (display) + Albert Sans (body)
   ========================================================================== */

/* ---------- TOKENY ---------- */
:root {
  /* Paleta (OKLCH z fallbackiem hex) */
  --sy-ivory:      #F8F5EF;   /* tło główne */
  --sy-cream:      #EFEADF;   /* tło ciepłe / karty (krem marki) */
  --sy-gold:       #C7A269;   /* akcent — szampańskie złoto */
  --sy-gold-deep:  #A8854E;   /* hover / active */
  --sy-blush:      #E7D3C9;   /* whisper akcent */
  --sy-ink:        #2B2622;   /* tekst główny — ciepły espresso */
  --sy-mocha:      #3A322B;   /* sekcje ciemne */
  --sy-muted:      #6E655A;   /* tekst drugorzędny — taupe (WCAG AA ~4.6:1) */
  --sy-line:       #DED7C9;   /* hairline */
  --sy-white:      #FFFFFF;

  @supports (color: oklch(0 0 0)) {
    --sy-ivory:     oklch(0.97 0.008 85);
    --sy-cream:     oklch(0.93 0.016 88);
    --sy-gold:      oklch(0.73 0.075 75);
    --sy-gold-deep: oklch(0.62 0.080 72);
    --sy-blush:     oklch(0.88 0.030 45);
    --sy-ink:       oklch(0.25 0.012 60);
    --sy-mocha:     oklch(0.32 0.015 65);
    --sy-muted:     oklch(0.47 0.014 70);
    --sy-line:      oklch(0.88 0.012 85);
  }

  /* Fonty */
  --sy-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --sy-font-body: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Skala typografii (fluid clamp) — czytelna, powściągliwa */
  --fs-display: clamp(2rem, 1.55rem + 2vw, 3.1rem);
  --fs-h1:      clamp(1.9rem, 1.55rem + 1.6vw, 2.85rem);
  --fs-h2:      clamp(1.55rem, 1.32rem + 1.05vw, 2.25rem);
  --fs-h3:      clamp(1.22rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h4:      clamp(1.08rem, 1.02rem + 0.28vw, 1.25rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-sm:      clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --fs-eyebrow: clamp(0.7rem, 0.68rem + 0.1vw, 0.76rem);

  /* Spacing (8px grid) */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-6: 1.5rem;   --space-8: 2rem;
  --space-10: 2.5rem;  --space-12: 3rem;    --space-16: 4rem;
  --space-20: 5rem;    --space-24: 6rem;

  /* Sekcje (fluid) */
  --section-sm: clamp(2.25rem, 4vw, 3.25rem);
  --section-md: clamp(2.5rem, 4.5vw, 4rem);
  --section-lg: clamp(3rem, 5.5vw, 5rem);

  /* Szerokości (JEDEN system — bez hardkodów per sekcja) */
  --w-prose:   68ch;
  --w-content: clamp(20rem, 92vw, 72rem);   /* ~1152px */
  --w-wide:    clamp(20rem, 95vw, 88rem);   /* ~1408px */
  --w-full:    100%;

  /* Padding inline responsywny */
  --px: clamp(1.25rem, 5vw, 4rem);

  /* Cienie (miękkie, premium) */
  --shadow-sm: 0 2px 10px rgba(43, 38, 34, 0.05);
  --shadow-md: 0 14px 40px -12px rgba(43, 38, 34, 0.14);
  --shadow-lg: 0 30px 70px -20px rgba(43, 38, 34, 0.22);

  /* Ruch */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms; --dur: 380ms; --dur-slow: 800ms;

  --radius: 2px;     /* powściągliwie — luksus = ostre, czyste krawędzie */
  --radius-img: 4px;
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@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; }
}

body {
  margin: 0;
  font-family: var(--sy-font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sy-ink);
  background: var(--sy-ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--sy-gold); color: var(--sy-white); }

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

/* ---------- TYPOGRAFIA ---------- */
h1, h2, h3, h4 {
  font-family: var(--sy-font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--sy-ink);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0; }
p { text-wrap: pretty; }

.sy-display { font-family: var(--sy-font-display); font-size: var(--fs-display); line-height: 1.02; font-weight: 300; }
.sy-italic { font-style: italic; }
.sy-eyebrow {
  font-family: var(--sy-font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sy-gold-deep);
}
.sy-eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.7rem;
  opacity: 0.55;
}
.sy-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--sy-ink); }
.sy-muted { color: var(--sy-muted); }

/* ---------- LAYOUT / CONTAINERY ---------- */
.sy-container { width: var(--w-content); max-width: 100%; margin-inline: auto; padding-inline: var(--px); }
.sy-container--wide  { width: var(--w-wide); }
.sy-container--prose { width: var(--w-prose); }
.sy-container--full  { width: var(--w-full); padding-inline: 0; }

.sy-section { padding-block: var(--section-md); }
.sy-section--sm { padding-block: var(--section-sm); }
.sy-section--lg { padding-block: var(--section-lg); }
.sy-section--cream { background: var(--sy-cream); }
.sy-section--mocha { background: var(--sy-mocha); color: var(--sy-ivory); }
.sy-section--mocha h1, .sy-section--mocha h2, .sy-section--mocha h3 { color: var(--sy-ivory); }
.sy-section--mocha .sy-eyebrow { color: var(--sy-gold); }
.sy-section--mocha, .sy-section--mocha p { color: var(--sy-ivory); }
.sy-section--mocha .sy-lead { color: var(--sy-ivory); }
.sy-section--mocha .sy-muted { color: var(--sy-blush); }

/* ---------- PRZYCISKI ---------- */
.sy-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--sy-font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1.05em 2.1em; border-radius: var(--radius);
  background: var(--sy-ink); color: var(--sy-ivory);
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
  will-change: transform;
}
.sy-btn:hover { background: var(--sy-gold-deep); transform: translateY(-2px); }
.sy-btn--gold { background: var(--sy-gold); color: var(--sy-white); }
.sy-btn--gold:hover { background: var(--sy-gold-deep); }
.sy-btn--ghost {
  background: transparent; color: var(--sy-ink);
  box-shadow: inset 0 0 0 1px var(--sy-line);
}
.sy-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--sy-gold); background: transparent; color: var(--sy-gold-deep); }

/* Link z podkreśleniem rosnącym (złoto) */
.sy-link {
  position: relative; color: var(--sy-ink); font-weight: 500;
  background-image: linear-gradient(var(--sy-gold), var(--sy-gold));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 1px;
}
.sy-link:hover { background-size: 100% 1px; }

/* ---------- ANIMACJE (scroll reveal) ---------- */
.sy-anim { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease) var(--d, 0ms), transform .55s var(--ease) var(--d, 0ms); }
.sy-anim.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sy-anim { opacity: 1; transform: none; } }

/* ---------- UTIL ---------- */
.sy-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sy-hairline { height: 1px; background: var(--sy-line); border: 0; }
.sy-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }