/* DamTorty v2: tokeny (SPEC-v2-home, sekcja 2). Pastelowy róż prowadzi, Kakao jako jeden tusz.
   Punkty łamania (w media queries nie da się użyć zmiennych): sm 480, md 768, lg 1024, xl 1280.
   Skala clamp(): minimum przy 390 px, maksimum przy 1440 px. Jedyne miejsce z literałami kolorów. */

:root {
  /* 2.1 Kolory */
  --c-pink: #F8D0DE;          /* Róż pastelowy: kolor wiodący (hero, pasy, panele) */
  --c-pink-deep: #F0B4C9;     /* Róż pastelowy głęboki: tylko dekoracje na różu */
  --c-tint: #F8E4EA;          /* Cukier puder: hover drugorzędnych, komórek nawigacji */
  --c-bg: #FBF6F3;            /* Mąka: neutralny grunt */
  --c-white: #FFFFFF;         /* Biel: karty, ramki, pasek nawigacji */
  --c-ink: #3A2A30;           /* Kakao: tekst, obrysy, doodle, przyciski główne, stopka */
  --c-muted: #5F5459;         /* Popiół ciemny: noty, meta, placeholdery */
  --c-hair: rgba(58, 42, 48, .2); /* Włos: linie wewnątrz tabel i list */
  --c-accent: #B82E63;        /* Malina: linki na kremie i bieli, fokus */
  --c-accent-deep: #A0264F;   /* Malina ciemna: hover przycisku głównego, linki na różu */
  --c-accent-2: #7D5417;      /* Karmel: ceny, stawki, numery kroków */
  --c-brand: #EC78A5;         /* Róż DamTorty: naklejka, wstęga, kropka; nigdy tekst */
  --c-butter: #F8E7BE;        /* Masło: pigułki-etykiety, plakietka sezonu, pasek roboczy */
  --c-status: #357055;        /* Szałwia: tylko stan „Dostępne dziś” */
  --c-status-tint: #DCEDE3;
  --c-error: #A4262C;
  --c-ink-dark: #FBF6F3;      /* Mąka na tuszu */
  --c-pink-on-ink: #F4C9D6;   /* etykiety kolumn stopki */
  --c-muted-dark: #CDBFC6;    /* dopiski w stopce */

  /* Pochodne (te same barwy z kryciem) */
  --c-backdrop: rgba(58, 42, 48, .4);        /* przyciemnienie pod podglądem zdjęcia (galeria) */
  --c-line-on-ink: rgba(251, 246, 243, .5);  /* podkreślenia linków w stopce */
  /* Kakao z kryciem dla obrysów niosących informację (formularz). Gotowe rgba zamiast color-mix(),
     żeby w przeglądarkach bez color-mix (Safari < 16.2) obrysy pól i pudełek nie znikały. */
  --c-ink-06: rgba(58, 42, 48, .06);  /* koła ikon w docku kroków formularza */
  --c-ink-40: rgba(58, 42, 48, .4);   /* kropkowane linie streszczenia */
  --c-ink-50: rgba(58, 42, 48, .5);   /* ramka strefy upuszczania plików */
  --c-ink-55: rgba(58, 42, 48, .55);  /* linia pola, pudełka radio i checkbox (3,36:1 na bieli) */
  --c-ink-60: rgba(58, 42, 48, .6);   /* przerywane linie sekcji paragonu */
  --c-ink-62: rgba(58, 42, 48, .62);  /* ramka pól wielowierszowych, pola na Cukrze pudrze (4,09:1 na bieli) */

  /* Strzałka pola select (Kakao) */
  --i-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%233A2A30' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

  /* Kolory kontekstowe (na różu i tuszu podmieniane w site.css) */
  --link: var(--c-accent);
  --script: var(--c-accent);
  --focus: var(--c-accent);

  /* 2.2 Typografia */
  --ff-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  /* Nagłówek jak u Bernice (decyzja 2026-10-01): Apfel Grotezk, Collletttivo, SIL OFL 1.1, pliki w assets/fonts */
  --ff-nav: "Apfel Grotezk", "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ff-text: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-script: Caveat, "Segoe Script", "Bradley Hand", cursive;

  --fs-h1: clamp(38px, 3.24vw + 25.4px, 72px);
  --fs-h2: clamp(32px, 2.29vw + 23.1px, 56px);
  --fs-h3: clamp(22px, .38vw + 20.5px, 26px);
  --fs-h4: clamp(18px, .19vw + 17.3px, 20px);
  --fs-script: clamp(34px, 1.33vw + 28.8px, 48px);
  /* Caveat w H1: 1,12 × (po przeglądzie; 1,25 łamało linię przy 360 px i przerastało H1 na desktopie) */
  --fs-script-h1: calc(var(--fs-h1) * 1.12);
  --fs-script-h1-xs: calc(var(--fs-h1) * 1.05);   /* telefon węższy niż 380 px */
  --fs-quote: clamp(28px, 1.52vw + 22.1px, 44px);
  --fs-review: clamp(19px, .29vw + 17.9px, 22px);
  --fs-lead: clamp(18px, .19vw + 17.3px, 20px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-meta: 14px;
  --fs-label: 13px;
  --fs-btn: 15px;
  --fs-nav: 16px;             /* linki nagłówka wersalikami od lg (SPEC-v2-naglowek) */
  --fs-nav-xl: 17px;          /* linki nagłówka od xl */
  --fs-menu: clamp(28px, 4.5vh, 44px);   /* pozycje menu pełnoekranowego (Bernice 4,5vh) */
  --tr-nav: 0;                /* wersaliki linków nagłówka bez rozstrzelenia (Bernice) */
  --tr-menu: .01em;           /* wersaliki menu pełnoekranowego */
  --fs-pill: 13px;
  --fs-pill-sm: 12px;         /* pigułki na telefonie */
  --fs-tag: 12px;             /* etykieta „Tu zdjęcie…” */
  --fs-tag-sm: 11px;
  --fs-bar: 12px;             /* pasek kontaktu, pasek roboczy na telefonie */
  --fs-logo: 20px;
  --fs-card-title: 17px;      /* karta tortu (od md), fakt, wiersz witryny */
  --fs-card-title-sm: 16px;
  --fs-tile-title: 22px;      /* karta-łuk okazji */
  --fs-tile-title-sm: 18px;
  --fs-bridge: 22px;
  --fs-bridge-sm: 19px;
  --fs-footer-phone: 24px;
  --fs-mark: 72px;            /* cudzysłów w karcie opinii */
  --fs-mark-sm: 56px;         /* cudzysłów przy manifeście */
  /* Teksty w SVG (jednostki viewBox) */
  --fs-arch: 24px;
  --fs-ribbon: 18px;
  --fs-ribbon-sm: 28px;
  --fs-sticker: 17px;
  --fs-sticker-sm: 20px;
  --fs-stamp: 17px;
  --fs-seal: 11.5px;
  --fs-price: clamp(20px, .19vw + 19.3px, 22px);
  --fs-number: clamp(36px, 1.14vw + 31.5px, 48px);
  --fs-words: clamp(72px, 5.33vw + 51.2px, 128px);
  --fs-echo: clamp(48px, 4.57vw + 30.2px, 96px);

  --lh-h1: 1;
  --lh-h2: 1;
  --lh-h3: 1.15;
  --lh-h4: 1.25;
  --lh-quote: 1.15;
  --lh-review: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-meta: 1.4;
  --lh-label: 1.2;
  --lh-price: 1.1;

  --tr-h1: -.02em;
  --tr-h2: -.01em;
  --tr-label: .1em;
  --tr-btn: .08em;

  --measure: 62ch;
  --measure-lead: 52ch;

  /* 2.3 Siatka i odstępy */
  --container: 1200px;
  --gutter: 16px;
  --gap: 16px;
  --gap-tight: 12px;
  --header-h: 64px;           /* do lg: 44 px celów plus 10 px góry i dołu (nagłówek Bernice, SPEC-v2-naglowek) */
  --header-offset: 0px;       /* od nagłówka Bernice zawsze 0; zostaje w rachunkach site.css i page-*.css */
  --nav-link-x: 12px;         /* poziomy padding linku nagłówka od lg: miejsce na pigułkę aktywnej sekcji */
  --nav-link-x-xl: 16px;      /* od xl */
  --menu-circle: 300vmax;     /* średnica koła menu: promień 1,5 vmax kryje przekątną okna ze środkiem w rogu */
  --contact-bar-h: 64px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --section-y: 64px;
  --section-head-gap: 32px;
  --panel-pad: 32px;
  --panel-pad-x: 20px;
  --frame-pad: 24px;
  --arch-pad: 10px;
  --card-pad: 20px;
  /* 5.10 Opinie: przesuwający się rząd kart (SPEC-v2-opinie, decyzja 2026-10-03; Bernice Testimonials) */
  --review-w: min(320px, calc(100vw - 2 * var(--gutter) - var(--s-6)));   /* karta do md (Bernice 320 px pod 768); poniżej 384 px okna węższa, żeby skrawek następnej karty w stanie bez ruchu miał co najmniej 32 px */
  --review-pad: var(--s-6);        /* wnętrze karty do md (Bernice 3rem na każdej szerokości; przy 320 px to za dużo) */
  --review-gap: max(var(--gutter), 4vw);   /* odstęp między kartami (Bernice 4vw); nie mniej niż gutter, żeby szew pętli był pusty (site.css 5.10) */
  --review-grid-min: 320px;        /* minimalna szerokość karty w siatce stanu bazowego od md (bez JS, ograniczony ruch, wydruk) */
  --review-lines: 8;               /* line-clamp cytatu tylko w karcie z linkiem „Zobacz w Google” (całość do doczytania w Mapach) */
  --review-avatar: 40px;           /* awatar autora po podpięciu Google (zasady Maps nie podają rozmiaru; przy braku miejsca awatar to minimum atrybucji) */
  --r-review: 40px;                /* promień karty do md (Bernice 42 px na telefonie) */

  /* 2.4 Promienie, obrysy, cienie */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --r-arch: 999px 999px 24px 24px;
  --r-arch-flat: 999px 999px 0 0;
  --r-photo: 40px;

  --bw-hair: 1px;
  --bw-arch: 2px;
  --bw-btn: 1.5px;

  --sh-1: 0 1px 2px rgba(58, 42, 48, .06);
  --sh-lift: 0 10px 30px -12px rgba(58, 42, 48, .18);
  --sh-sticker: 0 12px 28px -14px rgba(58, 42, 48, .45);
  --sh-up: 0 -6px 24px -12px rgba(58, 42, 48, .25);

  /* 2.5 Ruch */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 560ms;
  --dur-dot: 200ms;
  --dur-draw: 1200ms;         /* Doodle: kreska rysuje się raz przy wejściu w widok (decyzja 2026-09-26) */
  --dur-ribbon: 150s;
  --dur-sticker: 30s;
  --dur-stamp: 20s;
  --marquee-speed: 60;             /* px na sekundę, bez jednostki; JS liczy czas z szerokości zestawu. Bernice: 40 s na pół toru (ok. 145 px/s desktop, 84 telefon), za szybko na przeczytanie dwóch linii */

  /* Pojawianie i hover w stylu Bernice Bakery (SPEC-v2-animacje 1.2, decyzja 2026-09-29) */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);   /* GSAP expo.out: pojawianie */
  --ease-fill: cubic-bezier(.25, 1, .5, 1);   /* Bernice „ulu”: rozlewanie hovera, pas nagłówka, koło menu */
  --ease-letter: cubic-bezier(0, 0, .58, 1);  /* CSS ease-out: link i litery nagłówka (Bernice Grow_Anim) */
  --dur-link: 100ms;          /* link nagłówka: kolor i skala */
  --dur-letter: 3000ms;       /* litera: wolny powrót ze skali */
  --dur-letter-in: 250ms;     /* litera: szybkie urośnięcie pod kursorem (u Bernice 3 s w obie strony; przy zwykłym ruchu myszy litera ledwie drgała) */
  --dur-band: 800ms;          /* biały pas nagłówka zjeżdża od góry */
  --dur-menu: 800ms;          /* koło menu rośnie od przycisku */
  --delay-menu: 600ms;        /* treść menu pojawia się po kole */
  --scale-link: .95;
  --scale-letter: 1.22;
  --lamp-dur: 380ms;          /* pigułka aktywnej sekcji jedzie do linku (dawna lampka „tubelight”, decyzja 2026-10-01) */
  --lamp-ease: cubic-bezier(.3, 1.18, .45, 1);   /* sprężyna z lekkim przerzutem */
  --dur-words: 1500ms;        /* słowa i linie nagłówków */
  --dur-fade: 1000ms;         /* fade, stagger, grow */
  --dur-pop: 1500ms;          /* koło „Zamów” */
  --dur-fill: 1200ms;         /* rozlewanie hovera */
  /* Opóźnienia krótsze niż u Bernice (300 i 500 ms): u nas ruch rusza, gdy element wejdzie w okno, a przy zwykłym
     tempie przewijania na telefonie dłuższe czekanie zostawiało puste pola (kontrola 2026-09-30, SPEC-v2-animacje 0.5) */
  --delay-words: 100ms;
  --delay-fade: 150ms;
  --stagger-words: 500ms;     /* łącznie na wszystkie słowa H1 */
  --stagger-lines: 120ms;     /* na każdą kolejną linię H2 */
  --stagger-group: 250ms;     /* łącznie na paczkę dzieci */
  --anim-y: 4rem;             /* dystans fade */
  --anim-word-y: 140%;        /* słowo startuje pod swoim polem przycięcia (101% u Bernice; u nas pole ma zapas na ogonki) */
  --anim-rot: 12deg;
  --anim-scale: .6;
  --anim-word-clip: inset(-.2em -.1em -.3em);  /* pole przycięcia słowa: zapas na akcenty (Ś, Ż) i ogonki (ą, ę) */
  --fill-size: 220%;          /* średnica koła hovera pigułek (200% u Bernice; zapas na róg szerokiej pigułki) */
  --fill-r-max: 150%;         /* promień wypełnienia koła „Zamów” (bok 100%, przekątna 141%) */
  --scrub-lead: 40px;         /* tytuł po łuku rusza, gdy stage jest 40 px pod dolną krawędzią okna */
  --scrub-end: 200px;         /* okno kończy się otwierać, gdy dół stage jest 200 px pod środkiem okna */

  /* 2.6 Ikony i doodle */
  --icon-sm: 14px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-fact: 28px;
  --icon-step: 32px;
  --icon-sticker: 40px;

  /* Warstwy */
  --z-deco: 0;
  --z-content: 1;
  --z-ribbon: 2;
  --z-sticker: 3;
  --z-contact: 30;
  --z-header: 40;
  --z-skip: 100;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --gap: 24px;
    --review-w: 520px;             /* karta opinii od md (Bernice 520 px, 3rem, 3rem) */
    --review-pad: var(--s-7);
    --r-review: 48px;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-h: 80px;
    --section-y: 96px;
    --section-head-gap: 40px;
    --panel-pad: 64px;
    --panel-pad-x: 48px;
    --frame-pad: 48px;
    --arch-pad: 16px;
    --card-pad: 24px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 48px;
  }
}