/* ============================================
   Meadow — wartości bazowe
   Kotwice przepisane z makiet: desktop 1920×10176 (Figma 304:106),
   telefon 393×4419 (Figma 303:546).
   Kolory wstrzykuje panel przez wd_palette_css() — tutaj są tylko
   zapasowe wartości palety łąkowej, na wypadek braku ustawienia.
   ============================================ */

:root {
  /* === Kolory (nadpisywane przez paletę) === */
  --c-ink: #343419;      /* tekst, obrysy, tło przycisków   */
  --c-paper: #eae7e2;    /* jasne tło strony                */
  --c-band: #c9ceb6;     /* pasy sekcji                     */
  --c-accent: #848443;   /* dni tygodnia, serce przy dacie  */
  --c-dark: #3b3724;     /* stopka i ekran powitalny        */

  --c-swatch-1: #e1d9c6;
  --c-swatch-2: #c9ceb6;
  --c-swatch-3: #5b534d;
  --c-swatch-4: #343419;

  /* Role wyprowadzone — widoki sięgają po nie, nie po surowe kolory. */
  --text-on-paper: var(--c-ink);
  --text-on-dark: var(--c-paper);
  --text-on-band: var(--c-ink);
  --text-on-cta: var(--c-paper);

  /* === Kroje ===
     Makieta używa Peddana do tekstu, ale ten krój nie ma polskich
     znaków (tylko telugu i latin). Zastąpiony Cormorant Garamond —
     ten sam charakter klasycznego szeryfu, pełny latin-ext. */
  --font-script: 'Pinyon Script', 'Apple Chancery', cursive;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* === Skala pisma — desktop === */
  --fs-display: 128px;   /* imiona pary na ekranie powitalnym */
  --fs-hero: 98px;       /* imiona na zdjęciu powitalnym      */
  --fs-count: 98px;      /* cyfry odliczania                  */
  --fs-script: 40px;     /* nagłówki sekcji pisane skryptem   */
  --fs-heading: 32px;    /* nagłówki drukowane                */
  --fs-lead: 24px;       /* motto                             */
  --fs-body: 20px;       /* tekst treści                      */
  --fs-small: 16px;      /* podpisy, kalendarz                */
  --fs-tiny: 14px;       /* drobne                            */

  --lh-tight: 1.05;
  --lh-body: 1.6;
  --ls-wide: 0.24em;     /* rozstrzelenie daty ozdobnej */

  /* === Szerokości === */
  --hero-h: min(1230px, 88vh);
  --canvas-w: 1920px;
  --prose-w: 1050px;     /* kolumna tekstu w sekcjach informacyjnych */
  --wide-w: 1520px;      /* pełna kolumna treści                    */

  /* === Galeria (slider) ===
     Taśma jest szersza niż strona: sąsiednie zdjęcia podglądają
     zza krawędzi, środkowe jest wyśrodkowane. */
  --slide-gap: 24px;
  --slide-1-w: 819px;
  --slide-1-ar: 819 / 1045;
  --slide-2-w: 694px;
  --slide-2-ar: 694 / 1043;

  /* === Kształty === */
  --r-pill: 999px;
  --scallop-period: 485px;  /* okres festonu, zmierzony z makiety */
  --scallop-depth: 205px;   /* łuk jest spłaszczony, nie półokrągły */

  /* === Ruch === */
  --dur: 0.35s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 767px) {
  :root {
    --fs-display: 40px;
    --fs-hero: 36px;
    --fs-count: 32px;
    --fs-script: 32px;
    --fs-heading: 20px;
    --fs-lead: 16px;
    --fs-body: 14px;
    --fs-small: 12px;
    --fs-tiny: 11px;

    --hero-h: min(590px, 78vh);

    /* Makieta jest rysowana na 393 px, ale telefony bywają szersze
       (iPhone Pro Max ma 440). Wymiary idą więc w procentach szerokości
       ekranu — inaczej po bokach zostawały jasne pasy. */
    --canvas-w: 100%;
    --prose-w: 79.6%;   /* 313 / 393 */
    --wide-w: 79.6%;

    /* Makieta daje slajdom 44% szerokości ekranu, ale na telefonie
       zdjęcia wychodzą wtedy za małe. Środkowe zajmuje teraz większość
       kadru, sąsiednie nadal podglądają zza krawędzi. */
    --slide-gap: 3.05%; /* 12 / 393 */
    --slide-1-w: 66%;
    --slide-1-ar: 173 / 260;
    --slide-2-w: 66%;
    --slide-2-ar: 173 / 260;

    --scallop-period: 156px;
    --scallop-depth: 78px;
  }
}