/* ==========================================================================
   ChatFIT (nazwa robocza) — tokens.css
   Wariant C v2 „Skład”, paczka do implementacji, 27 paź 2026.
   Wszystkie wartości projektu jako CSS custom properties.
   Kolejność plików: tokens.css → components.css. Bez kroku budowania.
   ========================================================================== */

/* ---- 00-core.css ------------------------------------------------------- */
/* ==========================================================================
   1. KOLORY
   Dwie warstwy: paleta (--palette-*) i role (--color-*).
   Komponenty używają WYŁĄCZNIE ról. Paletę zmieniamy tylko przy zmianie marki.
   Kontrasty par tekst/tło: DESIGN_SYSTEM.md, sekcja „Kontrast”.
   ========================================================================== */
:root {
  /* 1a. Paleta */
  --palette-ink-900: #1A1712;      /* atrament: tekst, ramki, wypełnienia „Skład” */
  --palette-ink-700: #3F3B34;      /* ciemny tekst drugoplanowy */
  --palette-ink-600: #5B574E;      /* tekst pomocniczy */
  --palette-stone-500: #8F8A7F;    /* kreskowanie braku danych, uchwyt arkusza */
  --palette-stone-300: #D9D6CC;    /* linie podziału, siatka wykresu */
  --palette-stone-200: #E7E4DA;    /* szkielet ładowania */
  --palette-paper-100: #F6F5F0;    /* papier: tło aplikacji */
  --palette-white: #FFFFFF;
  --palette-teal-700: #006C76;     /* morski: akcent */
  --palette-teal-800: #00535C;     /* morski ciemny: hover/pressed */
  --palette-mint-200: #BFE6E1;     /* mięta: pas „Dzisiaj”, akcent na atramencie */
  --palette-lavender-200: #DCD8FF; /* lawenda: pas „Podsumowania” */
  --palette-peach-200: #FFCFAE;    /* brzoskwinia: Dzień luzu */
  --palette-butter-200: #FFEFB8;   /* masło: ostrzeżenie, które nie blokuje */
  --palette-red-700: #B42318;      /* czerwień: tylko błędy formularzy i usunięcie konta */
  --palette-red-300: #FFB4A8;      /* czerwień jasna: ikona błędu na atramencie */
  --palette-red-100: #FDE4E1;      /* czerwień miękka: tło błędu */

  /* 1b. Role — powierzchnie i tekst */
  --color-bg: var(--palette-paper-100);
  --color-surface: var(--palette-white);
  --color-surface-muted: var(--palette-paper-100);   /* wnętrza kart: notatka, podgląd komentarza */
  --color-surface-inverse: var(--palette-ink-900);   /* toast, wybrany dzień, aktywna zakładka */
  --color-text: var(--palette-ink-900);
  --color-text-secondary: var(--palette-ink-700);    /* dłuższe opisy */
  --color-text-muted: var(--palette-ink-600);        /* godzina, jednostki, makro posiłku */
  --color-text-inverse: var(--palette-white);        /* tekst na atramencie */
  --color-text-on-accent: var(--palette-white);
  --color-text-danger: var(--palette-red-700);

  /* 1c. Role — linie */
  --color-border: var(--palette-ink-900);            /* ramki kart, przycisków, pól */
  --color-border-subtle: var(--palette-stone-300);   /* podziały w listach, siatka wykresu */
  --color-border-danger: var(--palette-red-700);

  /* 1d. Role — akcent i pasy */
  --color-accent: var(--palette-teal-700);           /* główna akcja, pasek kcal, „kompletny” */
  --color-accent-hover: var(--palette-teal-800);
  --color-accent-soft: var(--palette-mint-200);      /* akcent na atramencie, tło informacji */
  --color-band-today: var(--palette-mint-200);       /* pas nagłówka ekranu Dzisiaj */
  --color-band-summary: var(--palette-lavender-200); /* pas nagłówka Podsumowań */

  /* 1e. Role — stany domenowe (zawsze razem z kształtem lub tekstem, nigdy sam kolor) */
  --color-state-complete: var(--palette-teal-700);        /* kółko z ptaszkiem */
  --color-state-complete-on-inverse: var(--palette-mint-200);
  --color-state-unconfirmed: var(--palette-ink-900);      /* kropka „•”, ramka przerywana */
  --color-state-unconfirmed-on-inverse: var(--palette-mint-200);
  --color-state-flex-day: var(--palette-peach-200);       /* Dzień luzu: chip ↑ / ∞ */
  --color-state-missing: var(--palette-stone-500);        /* kreskowanie: brak danych, nie zero */
  --color-state-over: var(--palette-ink-900);             /* nadwyżka ponad limit: atrament, nie czerwień */

  /* 1f. Role — komunikaty */
  --color-info-bg: var(--palette-mint-200);
  --color-warning-bg: var(--palette-butter-200);
  --color-danger: var(--palette-red-700);
  --color-danger-bg: var(--palette-red-100);
  --color-danger-on-inverse: var(--palette-red-300);

  /* 1g. Role — interakcja */
  --color-focus: var(--palette-teal-700);
  --color-focus-on-inverse: var(--palette-mint-200);
  --color-scrim: rgb(26 23 18 / 0.58);
  --color-skeleton: var(--palette-stone-200);
  --color-handle: var(--palette-stone-500);
}

/* ==========================================================================
   2. TYPOGRAFIA
   Jeden font: Archivo (zmienny, osie wght 100–900 i wdth 62–125 %).
   Charakter „Składu” robi oś szerokości: wąskie, czarne liczby i nagłówki,
   szerokie etykiety WERSALIKAMI. font-stretch zawsze z tokenu.
   ========================================================================== */
:root {
  --font-family-base: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --font-stretch-display: 62%;         /* duże liczby: 1 204, 2 267, 5/5 */
  --font-stretch-heading: 70%;         /* tytuły ekranów, sekcji i arkuszy */
  --font-stretch-title: 72%;           /* miesiąc w nagłówku, numer dnia, zakres dat */
  --font-stretch-compact: 75%;         /* etykiety w dolnej nawigacji, liczby makro */
  --font-stretch-semicondensed: 87.5%; /* nazwy posiłków, „/ 1 900 kcal” */
  --font-stretch-normal: 100%;
  --font-stretch-label: 112.5%;        /* etykiety WERSALIKAMI: KALORIE, PN, WT */

  /* rozmiary w rem (1rem = 16px); w komentarzu px */
  --font-size-micro: 0.6875rem;       /* 11px — dzień tygodnia, oś wykresu */
  --font-size-label: 0.75rem;         /* 12px — etykiety WERSALIKAMI, chipy w listach */
  --font-size-caption: 0.8125rem;     /* 13px — godzina, podpowiedzi, podgląd komentarza */
  --font-size-small: 0.875rem;        /* 14px — makro posiłku, opisy */
  --font-size-body: 1rem;             /* 16px — tekst, pola formularzy */
  --font-size-button: 1.0625rem;      /* 17px — przyciski, wiersze list */
  --font-size-lead: 1.125rem;         /* 18px — „Zostało 696 kcal”, kcal posiłku */
  --font-size-item: 1.1875rem;        /* 19px — nazwa posiłku, „/ 1 900 kcal” */
  --font-size-title-sm: 1.375rem;     /* 22px — miesiąc w nagłówku, zakres dat */
  --font-size-title-md: 1.625rem;     /* 26px — „Posiłki”, „Dni” */
  --font-size-title-lg: 1.875rem;     /* 30px — tytuł arkusza */
  --font-size-title-xl: 2.125rem;     /* 34px — tytuł ekranu */
  --font-size-display-sm: 2.75rem;    /* 44px — kcal w arkuszu posiłku, bilans */
  --font-size-display-md: 3.5rem;     /* 56px — „5/5” */
  --font-size-display-lg: 5.25rem;    /* 84px — suma kcal dnia, średnia okresu */
  --font-size-approx: 2.5rem;         /* 40px — znak ≈ przed sumą dnia */

  --line-height-display: 0.84;        /* duże liczby: zwarty blok */
  --line-height-heading: 1.08;
  --line-height-snug: 1.25;
  --line-height-body: 1.45;
  --line-height-single: 1;

  --letter-spacing-label: 0.05em;     /* etykiety WERSALIKAMI */
  --letter-spacing-caps-tight: 0.03em; /* nazwy makro WERSALIKAMI (węższe) */
  --letter-spacing-tight: -0.01em;    /* znak słowny */

  --font-numeric: tabular-nums;       /* każda liczba w interfejsie */

  /* rozmiary płynne (liczone od szerokości kontenera .app, cqi = 1 % jego szerokości) */
  --font-size-header-month: clamp(var(--font-size-lead), 5.6cqi, var(--font-size-title-sm)); /* „Październik 2026” */
  --font-size-nav: clamp(0.625rem, 3.1cqi, var(--font-size-label));                          /* etykiety dolnej nawigacji 10–12px */
}

/* ==========================================================================
   3. ODSTĘPY (siatka 2/4 px)
   ========================================================================== */
:root {
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --gutter: var(--space-4);          /* margines boczny ekranu do 767 px */
  --gutter-tablet: var(--space-8);   /* od 768 px */
  --gutter-desktop: var(--space-10); /* od 1024 px */
  --stack-gap: var(--space-2-5);     /* odstęp kart w liście posiłków */
  --section-gap: var(--space-5);     /* odstęp sekcji na ekranie */
}

/* ==========================================================================
   4. PROMIENIE
   ========================================================================== */
:root {
  --radius-xs: 4px;     /* próbka kreskowania */
  --radius-sm: 10px;    /* wnętrza kart, segment przełącznika */
  --radius-md: 12px;    /* przycisk ikony 44×44 */
  --radius-lg: 14px;    /* komórka dnia, przełącznik, pole, toast, komunikat */
  --radius-xl: 16px;    /* przyciski */
  --radius-2xl: 18px;   /* wiersz posiłku, lista dni */
  --radius-3xl: 20px;   /* karty */
  --radius-4xl: 24px;   /* górne rogi arkusza */
  --radius-pill: 999px; /* chipy */
  --radius-round: 50%;  /* kropki i kółka */

  --radius-button: var(--radius-xl);
  --radius-control: var(--radius-lg);
  --radius-icon-button: var(--radius-md);
  --radius-card: var(--radius-3xl);
  --radius-row: var(--radius-2xl);
  --radius-sheet: var(--radius-4xl);
  --radius-chip: var(--radius-pill);
}

/* ==========================================================================
   5. LINIE
   ========================================================================== */
:root {
  --border-width-hairline: 1px;   /* podziały w listach */
  --border-width-thin: 1.5px;     /* chipy, mini-paski makro, znaczniki dni */
  --border-width: 2px;            /* ramki kart, przycisków, pól */
  --border-width-heavy: 6px;      /* linia pod tytułem landingu */
  --border-width-rule: 8px;       /* gruba linia „Skład” w karcie kcal */

  --underline-offset: 3px;        /* podkreślenie linków i przycisków tekstowych */
  --border-style-unconfirmed: dashed;  /* niepotwierdzone, brak danych, komentarz sprzed zmiany */
  --border-style-leader: dotted;       /* linia prowadząca nazwa ……… kcal */

  --pattern-missing: repeating-linear-gradient(135deg, var(--color-state-missing) 0 1.5px, transparent 1.5px 4px);
  --pattern-missing-lg: repeating-linear-gradient(135deg, var(--color-state-missing) 0 2px, transparent 2px 6px);
}

/* ==========================================================================
   6. CIENIE (twarde, bez rozmycia — „druk”)
   ========================================================================== */
:root {
  --shadow-offset-sm: 3px;
  --shadow-offset: 4px;
  --shadow-hard-sm: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--color-border);  /* przycisk Dodaj */
  --shadow-hard: var(--shadow-offset) var(--shadow-offset) 0 var(--color-border);           /* przycisk główny */
  --shadow-hard-accent: var(--shadow-offset) var(--shadow-offset) 0 var(--color-accent);    /* toast */
  --shadow-pressed: 1px 1px 0 var(--color-border);                                          /* :active */
}

/* ==========================================================================
   7. ROZMIARY
   ========================================================================== */
:root {
  --size-touch: 44px;            /* minimalny cel dotyku */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --size-icon-xs: 14px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 22px;
  --size-icon-xl: 26px;
  --icon-stroke: 2.2;            /* grubość linii ikon (Lucide domyślnie 2) */
  --icon-stroke-bold: 2.6;
  --icon-stroke-heavy: 3;
  --icon-stroke-mark: 4;         /* ptaszek w znaczniku „kompletny” 10px */

  --size-icon-button: 44px;
  --size-fab: 54px;
  --size-nav-item: 52px;
  --size-nav-bar: 70px;          /* wysokość dolnej nawigacji: 2 + 8 + 52 + 8 */
  --size-nav-indicator-width: 56px;  /* pigułka aktywnej pozycji (za ikoną) */
  --size-nav-indicator-height: 30px;
  --size-logo-header: 30px;      /* znak w nagłówku Dzisiaj */
  --size-logo-nav: 40px;         /* znak w szynie i panelu bocznym */
  --size-day-cell: 66px;
  --size-day-mark: 16px;
  --size-day-mark-lg: 18px;
  --size-day-dot: 7px;
  --size-check-in-mark: 10px;
  --size-bar-kcal: 18px;
  --size-bar-macro: 9px;
  --size-bar-limit-label: 24px;  /* wiersz podpisu „limit 1 900” nad paskiem przekroczenia */
  --size-bar-gap: 3px;           /* biała szczelina na granicy limitu */
  --size-macro-min: 76px;        /* minimalna kolumna makro: B/T/W w jednym rzędzie od 320 px */
  --size-swatch: 16px;
  --size-swatch-sm: 14px;
  --size-swatch-lg: 30px;
  --size-handle-width: 44px;
  --size-handle-height: 5px;
  --size-button: 52px;
  --size-button-lg: 56px;
  --size-row: 52px;
  --size-chip: 28px;
  --size-chip-sm: 24px;
  --size-step-badge: 28px;
  --size-approx-button: 44px;    /* przycisk ≈ przy sumie dnia */
  --size-approx-badge: 24px;     /* ≈ w legendzie szacunku */
  --size-empty-box: 70px;        /* pole „Brak wpisów” w karcie kcal */
  --size-skeleton-line: 14px;
  --size-skeleton-number: 64px;
}

/* ==========================================================================
   8. UKŁAD
   Breakpointy (CSS nie pozwala użyć var() w @media/@container,
   więc w components.css są wpisane literalnie):
     768px  — tablet: nawigacja w pionowej szynie po lewej; arkusze jako okna na środku
     1024px — desktop: panel boczny z nazwami; Dzisiaj i podsumowania w dwóch kolumnach
   Zapytania dotyczą kontenera .app / .page (container-name: app / page),
   który w aplikacji ma szerokość okna — działa jak @media, a w podglądzie
   pozwala pokazać 390 px obok 1440 px na jednej stronie.
   ========================================================================== */
:root {
  --layout-content-max: 960px;     /* treść na desktopie */
  --layout-content-narrow: 720px;  /* treść na tablecie, formularze */
  --layout-sheet-max: 520px;       /* arkusz jako okno od 768 px */
  --layout-dialog-max: 440px;      /* potwierdzenia */
  --layout-rail-width: 96px;       /* szyna nawigacji 768–1023 */
  --layout-sidebar-width: 248px;   /* panel boczny od 1024 */
  --layout-sheet-max-height: 92dvh;
  --layout-viewport-height: 100dvh; /* pełna wysokość okna (dynamiczna na telefonach) */
}

/* ==========================================================================
   9. RUCH I WARSTWY
   ========================================================================== */
:root {
  --duration-instant: 0.01ms;    /* prefers-reduced-motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-sheet: 260ms;
  --duration-pulse: 1.4s;        /* szkielet ładowania */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --press-offset: 2px;             /* przesunięcie przycisku z cieniem przy wciśnięciu */
  --rotate-open: 180deg;           /* chevron otwartego akordeonu */

  --z-sticky: 10;
  --z-nav: 20;
  --z-toast: 30;

  --opacity-disabled: 0.5;
}

/* ---- 20-summary.css ---------------------------------------------------- */
/* ==========================================================================
   10. PODSUMOWANIA: WYKRES, KALENDARZ, STATYSTYKI
   ========================================================================== */
:root {
  --font-size-stat-card: 4.5rem;      /* 72px — średnia miesiąca w karcie „Październik do dziś” */
  --font-size-stat-row: 1.5rem;       /* 24px — „14 200 kcal” w wierszu „Zapisane łącznie” */
  --font-size-flex-badge: 0.625rem;   /* 10px — ↑ / ∞ w kółku Dnia luzu (kalendarz, legenda) */
  --font-size-chart-badge: 0.8125rem; /* 13px — ↑ / ∞ nad słupkiem */

  --font-size-balance-title: 1.5rem;  /* 24px — „Szacowany deficyt” (mieści się w jednym wierszu z liczbą przy 390 px) */

  --size-chart-height: 180px;         /* pole wykresu tygodnia */
  --size-chart-height-lg: 230px;      /* pole wykresu od 1024 px (wyrównane z kolumną liczb) */
  --size-chart-axis: 34px;            /* kolumna podpisów osi Y */
  --size-chart-limit: 3px;            /* grubość linii limitu */
  --size-chart-dash: 4 3;             /* kreska/przerwa obrysu słupka dnia niepotwierdzonego */
  --size-flex-badge: 16px;            /* kółko Dnia luzu w kalendarzu i legendzie */
  --size-legend-swatch: 12px;         /* kwadrat w legendzie wykresu */
  --size-legend-line: 16px;           /* odcinek „limit” w legendzie */
  --size-cal-cell: 52px;              /* minimalna wysokość komórki kalendarza */
  --size-segmented-pad: 3px;          /* wcięcie przełącznika Tydzień/Miesiąc */
  --size-segmented-max: 26rem;        /* 416px — przełącznik i zakres dat od 768 px nie rozciągają się na całą treść */
}

/* ---- 30-forms.css ------------------------------------------------------ */
/* ==========================================================================
   11. FORMULARZE, USTAWIENIA, KONTO (components.html)
   ========================================================================== */
:root {
  --size-input: 52px;                /* wysokość pola tekstowego i listy wyboru */
  --size-control-mark: 24px;         /* pole wyboru i przycisk radiowy */
  --size-control-dot: 10px;          /* kropka zaznaczonego przycisku radiowego */
  --size-switch-width: 52px;
  --size-switch-height: 32px;
  --size-switch-knob: 22px;
  --size-settings-row: 56px;         /* wiersz ustawień z wartością */
  --size-status-icon: 48px;          /* ikona w kółku na ekranie wyniku (OAuth) */
  --size-input-font: var(--font-size-button); /* ≥ 16px — iOS nie powiększa strony przy fokusie */

  --layout-form-max: 560px;          /* kolumna formularza i ustawień */
  --layout-auth-max: 440px;          /* karta logowania i zgody OAuth */

  --color-placeholder: var(--color-text-muted);
  --color-control-checked: var(--color-accent);   /* zaznaczony wybór: kształt + kolor */
  --color-choice-checked-bg: var(--color-accent-soft);

  --z-dialog: 40;                    /* okno potwierdzenia (w aplikacji górna warstwa) */
}

/* ---- 40-landing.css ---------------------------------------------------- */
/* ==========================================================================
   12. LANDING
   Wartości płynne liczone od szerokości kontenera .page (cqi = 1 % jego
   szerokości) — na stronie publicznej to szerokość okna.
   Progi jak w aplikacji: 768 px i 1024 px (@container page).
   ========================================================================== */
:root {
  /* układ */
  --landing-max: 1200px;                                         /* szerokość treści */
  --landing-faq-max: 860px;                                      /* kolumna FAQ */
  --landing-text-max: 31em;                                      /* lead w hero */
  --landing-gutter: clamp(var(--space-4), 4cqi, var(--space-12));            /* 16–48 px */
  --landing-section-pad: clamp(var(--space-12), 7cqi, 6.5rem);               /* 48–104 px */
  --landing-section-gap: clamp(var(--space-6), 3.5cqi, var(--space-12));     /* 24–48 px */
  --landing-hero-pad-top: clamp(var(--space-4), 3cqi, var(--space-10));      /* 16–40 px */
  --landing-hero-pad-bottom: clamp(var(--space-12), 6cqi, var(--space-24));  /* 48–96 px */
  --landing-hero-gap: clamp(var(--space-8), 4.5cqi, var(--space-16));        /* 32–64 px */
  --landing-hero-copy-gap: clamp(var(--space-4-5), 2.4cqi, var(--space-7));  /* 18–28 px */
  --landing-card-pad: clamp(var(--space-5), 2.4cqi, var(--space-7));         /* 20–28 px */
  --landing-row-pad: clamp(var(--space-5), 2.6cqi, var(--space-8));          /* 20–32 px */
  --landing-col-gap: clamp(var(--space-5), 3cqi, 2.75rem);                   /* 20–44 px */

  /* typografia */
  --font-size-landing-hero: clamp(2.75rem, 1rem + 4.6cqi, 5.25rem);      /* H1: 44–84 px */
  --font-size-landing-h2: clamp(2.5rem, 1rem + 5cqi, 4.75rem);           /* tytuły sekcji: 40–76 px */
  --font-size-landing-cta: clamp(2.75rem, 1rem + 5.6cqi, 6rem);          /* końcowe CTA: 44–96 px */
  --font-size-landing-lead: clamp(var(--font-size-lead), 1rem + 0.45cqi, 1.375rem); /* 18–22 px */
  --font-size-landing-brand: clamp(1.3125rem, 5.6cqi, var(--font-size-title-md));  /* 21–26 px */
  --font-size-landing-header-link: clamp(var(--font-size-small), 3.9cqi, 0.9375rem); /* 14–15 px */
  --font-size-landing-row-num: clamp(3.5rem, 7cqi, 5rem);                /* 1 / 2 / 3 w przykładzie: 56–80 px */
  --font-size-landing-step-num: 4.5rem;                                  /* numer kroku: 72 px */
  --font-size-landing-card-title: clamp(var(--font-size-title-md), 2.4cqi, var(--font-size-title-lg)); /* 26–30 px */
  --font-size-landing-faq: var(--font-size-item);                        /* pytanie FAQ: 19 px */
  --font-stretch-landing-display: 64%;
  --line-height-landing-display: 0.9;
  --line-height-landing-cta: 0.88;
  --line-height-landing-num: 0.82;
  --letter-spacing-landing-display: -0.005em;

  --font-size-landing-eyebrow: clamp(0.625rem, 3.25cqi, var(--font-size-label)); /* znacznik nad H1: 10–12 px */
  --font-size-landing-log-meal: clamp(var(--font-size-lead), 5.6cqi, 1.3125rem); /* „Śniadanie” w karcie przykładu: 18–21 px */
  --font-size-landing-log-item: 0.9375rem;                               /* pozycje w karcie przykładu: 15 px */
  --font-size-landing-saved-label: 0.65625rem;                           /* „ZAPISANO W …”: 10.5 px */
  --line-height-landing-card: 1.02;                                      /* tytuły kart korzyści */
  --landing-highlight-pad: 0.06em;                                        /* zakreślenie „w rozmowie.” */
  --landing-panel-pad: clamp(var(--space-4-5), 3cqi, 2.25rem);            /* panel hero: 18–36 px */
  --landing-trust-pad-block: clamp(var(--space-4-5), 2.4cqi, 1.625rem);   /* karta prywatności: 18–26 px */
  --landing-trust-pad-inline: clamp(var(--space-4-5), 2.6cqi, 1.875rem);  /* 18–30 px */
  --landing-cta-gap: var(--space-7) var(--space-12);                      /* końcowe CTA: 28 / 48 px */

  /* kształty */
  --radius-landing-panel: clamp(var(--radius-4xl), 3cqi, 2.25rem);       /* panel hero: 24–36 px */
  --radius-landing-bubble: var(--radius-2xl);                             /* dymek rozmowy: 18 px */
  --radius-landing-bubble-tail: var(--radius-xs);                         /* róg „ogonka”: 4 px */
  --radius-landing-shot: 2.125rem;                                        /* ramka zrzutu: 34 px */
  --border-width-landing-shot: 6px;                                       /* ramka zrzutu */
  --size-landing-shot: clamp(13.75rem, 26cqi, 16.25rem);                 /* szerokość zrzutu w hero: 220–260 px */
  --size-landing-bubbles: 16.25rem;                                       /* kolumna dymków w hero: 260 px */
  --size-landing-icon-badge: 48px;                                        /* kółko z ikoną w kartach */
  --size-landing-faq-toggle: 36px;                                        /* kółko z chevronem w FAQ */
  --size-landing-faq-summary: 64px;                                       /* min. wysokość pytania */
  --size-landing-arrow: 30px;                                             /* strzałka między dymkiem a zapisem */
  --size-landing-saved-icon: 32px;
  --size-landing-lang: 52px;                                              /* przycisk PL / EN */
  --size-landing-logo: 32px;                                              /* znak w nagłówku */
  --size-landing-logo-footer: 28px;                                       /* znak w stopce */
  --size-landing-chip: 30px;                                              /* chip „Przykład” */
  --size-landing-bubbles-basis: 12.5rem;                                  /* kolumna dymków: podstawa flex 200 px */
  --size-landing-text-cta: 32.5rem;                                       /* tytuł końcowego CTA: podstawa flex 520 px */
  --size-landing-footer-brand: 18.75rem;                                  /* stopka: kolumna marki 300 px */
  --radius-landing-attachment: 8px;                                       /* załącznik w dymku */
  --radius-landing-mark: var(--radius-xs);                                /* zakreślenie zmienionej wartości */
  --radius-landing-placeholder: 6px;                                      /* placeholder danych operatora */
  --size-landing-demo-label: clamp(10rem, 18cqi, 13.75rem);              /* kolumna „1 Dopisek” od 1024 px: 160–220 px */
  --size-landing-demo-card: clamp(17.5rem, 32cqi, 26.25rem);              /* kolumna karty „W ChatFIT” od 1024 px: 280–420 px */
  --size-landing-demo-card-max: 26.25rem;                                 /* karta „W ChatFIT”: maks. 420 px */
  --size-landing-hero-visual: 38.75rem;                                   /* panel hero: maks. 620 px */
  --size-landing-hero-visual-basis: 31.25rem;                             /* podstawa flex panelu: 500 px */
  --size-landing-hero-copy-basis: 28.75rem;                               /* podstawa flex tekstu hero: 460 px */
  --size-landing-ring-lg: 30rem;                                          /* ozdobne pierścienie w panelu */
  --size-landing-ring-md: 20rem;
  --size-landing-ring-sm: 12.5rem;
  --offset-landing-ring-lg: -9.375rem;
  --offset-landing-ring-lg-top: -10.625rem;
  --offset-landing-ring-md: -4.375rem;
  --offset-landing-ring-md-top: -5.625rem;
  --offset-landing-ring-sm: -3.75rem;
  --offset-landing-ring-sm-bottom: -4.375rem;
  --rotate-landing-saved: -1.5deg;                                        /* przechylona karta „Zapisano” */

  /* kolory (tylko na landingu) */
  --color-landing-ring: rgb(255 255 255 / 0.6);
  --color-landing-blob: rgb(255 255 255 / 0.35);
  --color-landing-chip-on-ink: #3A352C;                                   /* załącznik w ciemnym dymku */
  --color-landing-card-1: var(--palette-mint-200);                        /* karty „Co dostajesz” */
  --color-landing-card-2: var(--palette-lavender-200);
  --color-landing-card-3: var(--palette-peach-200);
  --landing-highlight: linear-gradient(to bottom, transparent 0 22%, var(--color-accent-soft) 22% 100%);

  /* cienie */
  --shadow-landing-shot: 6px 6px 0 var(--color-border);
  --shadow-landing-cta: 5px 5px 0 var(--color-accent-soft);
}