/* ============================================
   Premiere — wartości bazowe

   Kotwice przepisane z makiet: monitor 1920×8767 (Figma 417:4766),
   telefon 393×4412 (Figma 417:1671).
   Kolory wstrzykuje panel przez wd_palette_css() — tutaj są tylko
   wartości zapasowe, na wypadek braku ustawienia.
   ============================================ */

:root {
  /* === Kolory (nadpisywane przez paletę) === */
  --c-ink: #45121b;      /* głęboki burgund: tło sekcji ciemnych i tekst */
  --c-paper: #e9e3d5;    /* kremowe tło sekcji jasnych                  */
  --c-soft: #ab958e;     /* podpisy i drobny tekst na ciemnym tle       */
  --c-line: #8c6b66;     /* linia osi czasu                            */
  --c-gold: #dcc9a8;     /* złocenia ekranu RSVP: napisy i pastylki     */

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

  /* === Kroje ===
     Makieta używa Palace Script MT do tytułów. Tego kroju nie ma
     w Google Fonts i nie obsługuje polskich znaków — zastąpiony
     Pinyon Script: ten sam formalny angielski okrągły charakter,
     pełny latin-ext. Newsreader jest w makiecie i zostaje. */
  --font-script: 'Pinyon Script', 'Apple Chancery', cursive;
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* === Skala pisma — monitor ===
     Wartości z makiety są dla 1920 px; poniżej tej szerokości skalują
     się proporcjonalnie (1 px makiety = 1/1920 szerokości okna), więc
     układ działa też na laptopie i tablecie, a nie tylko na pełnym HD. */
  --fs-names: clamp(72px, 9.90vw, 190px);   /* imiona na zdjęciu powitalnym */
  --fs-display: clamp(52px, 6.67vw, 128px); /* nagłówek powitania           */
  --fs-script: clamp(40px, 5.00vw, 96px);   /* nagłówki sekcji              */
  --fs-lead: clamp(17px, 1.25vw, 24px);     /* tekst wiodący                */
  --fs-body: clamp(15px, 1.04vw, 20px);     /* tekst treści                 */
  --fs-nav: clamp(13px, 1.09vw, 21px);      /* pasek odnośników             */
  --fs-small: clamp(13px, 0.89vw, 17px);    /* podpisy                      */

  --lh-tight: 1.05;
  --lh-body: 1.5;
  --ls-wide: 0.34em;     /* rozstrzelenie daty ozdobnej */
  --ls-nav: 0.02em;

  /* === Wymiary płótna === */
  --canvas-w: 1920px;
  --wide-w: min(1520px, 92vw);   /* pełna kolumna treści     */
  --prose-w: min(1250px, 88vw);  /* kolumna tekstu powitania */

  /* === Sekcje (wysokości z makiety) === */
  --hero-band-h: 950px;  /* pas ze zdjęciem: 34 + 916 (Figma 0–950) */
  --nav-h: 130px;        /* pasek odnośników domyka pas do 1080 */
  --hero-inset: 38px;    /* margines zdjęcia w pasie              */
  --hero-photo-h: 916px;
  --acts-band-h: 717px;
  --ceremony-h: 1070px;
  --info-band-h: 1307px;
  --invite-h: 1938px;
  --footer-h: 420px;     /* w makiecie pas jest pusty i wysoki;
                            treść stopki bierzemy z wersji mobilnej */

  --lace-crown-h: 216px;
  --swatch-size: 108px;
}

/* === Telefon (Figma 417:1671, 393×4412) ===
   Wymiary podane w procentach, żeby układ pasował także do ekranów
   szerszych niż 393 px — iPhone 16 Pro Max ma 440 px i przy sztywnym
   płótnie zostawały paski po bokach. */
@media (max-width: 767px) {
  :root {
    --fs-names: 58px;
    --fs-display: 44px;
    --fs-script: 44px;
    --fs-lead: 15px;
    --fs-body: 14px;
    --fs-nav: 14px;
    --fs-small: 13px;

    --ls-wide: 0.3em;

    --canvas-w: 100%;
    --wide-w: 79.6%;      /* 313 / 393 */
    --prose-w: 79.6%;

    --hero-band-h: 794px;
    --nav-h: 58px;
    --hero-inset: 5.3%;   /* 21 / 393 */
    --hero-photo-h: 762px;
    --acts-band-h: 550px;
    --ceremony-h: 559px;
    --info-band-h: 859px;
    --invite-h: 416px;
    --footer-h: 395px;

    --lace-crown-h: 57px;
    --swatch-size: 55px;
  }
}