/* ============================================
   Wedding Landing — Design Tokens
   Źródło: Figma "Untitled" 7L7QU3b6ZZHwyRYZ2nRcgu
   Plik nie definiuje zmiennych Figma — nazwy ról
   wyprowadzone z warstw i eksportów SVG.
   ============================================ */

:root {
  /* === Kolory === */
  --c-burgundy: #430918;          /* tła sekcji, nagłówki na kremie */
  --c-burgundy-soft: #683c46;     /* pigułki wyboru w formularzu RSVP */
  --c-cream: #ebeae6;             /* tło strony, tekst na bordo */
  --c-slate: #8e8e8e;             /* kafelki licznika (desktop) */
  --c-white: #ffffff;

  /* Licznik wygląda inaczej na obu makietach: desktop ma pełne szare
     kafelki z białym tekstem, mobile półprzezroczyste z kremowym. */
  --countdown-tile-bg: var(--c-slate);
  --countdown-tile-fg: var(--c-white);

  /* Paleta dress code */
  --c-rose: #c88c9b;
  --c-sage: #5d7051;
  --c-gold: #c1ab7f;

  /* === Role === */
  --bg-page: var(--c-cream);
  --text-on-cream: var(--c-burgundy);
  --text-on-burgundy: var(--c-cream);

  /* === Typografia === */
  --font-body: 'Magra', 'Trebuchet MS', sans-serif;
  --font-script: 'Mea Culpa', 'Snell Roundhand', cursive;

  /* Skala z Figmy @1920.
     Kaligrafia ma osobny token na rolę, bo makieta mobilna skaluje każdą
     inaczej (sekcje ×0.375, koperta ×0.25, stopka ×0.28) — jeden wspólny
     rozmiar nie da się przeliczyć jednym mnożnikiem. */
  --fs-eyebrow: 48px;         /* SAVE THE DATE */
  --fs-eyebrow-date: 48px;    /* July 24, 2027 pod nim */
  --fs-option: 32px;          /* pigułki wyboru */
  --fs-countdown-digit: 48px; /* cyfry licznika */
  --fs-countdown-label: 24px; /* podpis pod cyframi */
  --fs-body: 36px;            /* akapity, etykiety pól */
  --fs-heading: 40px;         /* THE DATE, TRAVEL, May 24, 2027 */
  --fs-script-date: 64px;     /* data kaligrafią w karcie */
  --fs-script-section: 96px; /* Dress Code, Registry, Rsvp, Days until I do */
  --fs-script-cta: 128px;     /* Rsvp na kopercie */
  --fs-script-footer: 96px;  /* imiona w stopce */
  --fs-display: 250px;        /* imiona w hero */

  /* Zmierzone na renderze Figmy: pitch 58px przy foncie 48px.
     Uwaga: przeglądarka liczy `normal` dla Magry jako 1.146 — stąd
     line-height musi być podany jawnie, inaczej rytm rozjeżdża się z makietą. */
  --lh-body: 1.21;
  --lh-script: 1.15;
  --lh-display: 320px;

  --fw-regular: 400;
  --fw-bold: 700;

  /* === Spacing === */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 34px;    /* nagłówek -> treść w karcie details */
  --sp-4: 35.23px;   /* odstęp między serduszkami */
  --sp-5: 74px;    /* gap w liczniku */
  --sp-6: 90px;    /* treść -> kolejny nagłówek */
  --sp-7: 116px;
  --sp-8: 164px;

  /* === Promienie === */
  --r-hero-arch: 2000px;   /* łuk pod zdjęciem hero */
  --r-arch: 1213px;        /* łuk bordowej karty (details i formularz) */
  --c-card: #e9e8e4;      /* kartka w kopercie */

  /* === Animacja koperty ====================================
     Jeden blok na całą choreografię. Strona /anim pozwala kręcić
     tymi wartościami z podglądem na żywo i zapisać je tutaj.
     Kolejność: koperta wjeżdża → klapka się otwiera → kartka
     wysuwa → kartka rośnie i wpuszcza na stronę.
     ======================================================== */
  --env-size: 330px;        /* szerokość koperty w intro       */
  --env-t-in: 0.6s;         /* wjazd koperty                   */
  --env-t-hold: 0.9s;       /* koperta stoi zamknięta z pieczęcią */
  --env-t-open: 0.85s;      /* otwieranie klapki               */
  --env-t-slide: 0.8s;      /* wysuw kartki                    */
  --env-t-exit: 0.75s;      /* wejście na stronę               */
  --env-overlap: 0.55;      /* jak wcześnie kartka rusza (0–1) */
  --env-flap-angle: 180deg; /* kąt klapki zamkniętej           */
  --env-card-lift: 46%;     /* jak wysoko wyjeżdża kartka      */
  --env-rise-from: 26px;    /* z jakiej wysokości wjazd        */
  --env-exit-scale: 1.6;    /* przybliżenie kartki na wyjściu  */
  --env-perspective: 1200px;
  --env-seal-size: 16%;     /* pieczęć — 133 px przy kopercie 841 px  */
  --env-seal-y: 76%;        /* wysokość, na której leży czubek klapki */
  --r-pill: 194px;         /* pola i pigułki formularza */

  /* === Layout === */
  --canvas-w: 1920px;      /* szerokość projektowa desktopu */
  --content-w: 1520px;     /* bordowa karta */
  --text-w: 1030px;        /* kolumna tekstu w formularzu */
  --prose-w: 1175px;       /* kolumna akapitów */

  /* Rytm bloków w karcie „details” */
  --sp-detail-block: 70px;    /* treść -> kolejny nagłówek */
  --sp-detail-script: 10px;   /* nagłówek -> data kaligrafią */

  /* Odstępy w stopce — mobile skaluje je inaczej niż resztę */
  --sp-footer-names: 16px;
  --sp-footer-sign: 42px;

  /* === Ruch === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;
}

/* ============================================
   Mobile — Figma 54:777 „Strona głowna moblie” (393×3140)

   Makieta nie skaluje projektu jednym mnożnikiem: nagłówki maleją
   ×0.25, akapity ×0.29, imiona w hero ×0.23. Dlatego każdy rozmiar
   jest przepisany z makiety, a nie przeliczony.
   ============================================ */
@media (max-width: 767px) {
  :root {
    --fs-eyebrow: 20px;
    --fs-eyebrow-date: 24px;
    --fs-option: 14px;
    --fs-countdown-digit: 14px;
    --fs-countdown-label: 12px;
    --fs-body: 14px;
    --fs-heading: 16px;
    --fs-script-date: 32px;
    --fs-script-section: 48px;
    --fs-script-cta: 32px;
    --fs-script-footer: 36px;
    --fs-display: 80px;

    --lh-display: 112px;

    --r-hero-arch: 250px;
    --r-arch: 250px;
    --r-pill: 40px;

    --canvas-w: 100%;
    --content-w: 313px;
    --text-w: 313px;
    --prose-w: 242px;

    --sp-detail-block: 21px;
    --sp-detail-script: 4px;

    --sp-3: 9px;     /* nagłówek -> treść w karcie details */
    --sp-4: 12px;    /* odstęp między serduszkami */
    --sp-6: 21px;    /* treść -> kolejny nagłówek */

    --sp-footer-names: 10px;
    --sp-footer-sign: 16px;

    /* Figma 54:814 — kafelki licznika na mobile */
    --countdown-tile-bg: rgba(217, 217, 217, 0.6);
    --countdown-tile-fg: var(--c-cream);
  }
}