/* ==========================================================================
   YumiFit — tokens.css
   Kierunek F (3 lis 2026): ciemnomorski pas u góry każdej zakładki, pod nim biały
   arkusz w stylu etykiety wartości odżywczych. Kolory zmieniamy tylko tutaj.
   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: #857F73;    /* obrys pól, kreskowanie braku danych, uchwyt arkusza (3,98:1 na bieli) */
  --palette-stone-300: #D8D5CB;    /* linie podziału */
  --palette-stone-200: #E7E4DA;    /* szkielet ładowania */
  --palette-paper-100: #F6F5F0;    /* papier: tło stron publicznych */
  --palette-sand-100: #F1EFE9;     /* cicha powierzchnia: notatka, okrągły przycisk */
  --palette-white: #FFFFFF;
  --palette-teal-700: #006C76;     /* morski: akcent */
  --palette-teal-800: #00535C;     /* morski ciemny: hover/pressed */
  --palette-teal-900: #00474E;     /* pas zakładek */
  --palette-teal-100: #E3F1EF;     /* morski bardzo jasny: zaznaczony wiersz, aktywna pozycja panelu */
  --palette-mint-300: #7FE0CF;     /* akcent na pasie: wypełnienie paska, podkreślenie */
  --palette-band-200: #D8E9E7;     /* tekst drugoplanowy na pasie */
  --palette-band-300: #BCD6D3;     /* etykiety na pasie */
  --palette-band-400: #8FB3B0;     /* dni niedostępne na pasie */
  --palette-band-600: #2C6A70;     /* tor paska na pasie */
  --palette-mint-200: #BFE6E1;     /* mięta: akcent na atramencie (strony publiczne) */
  --palette-lavender-200: #DCD8FF; /* lawenda: tylko strony publiczne */
  --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);              /* strony publiczne; aplikacja jest biała */
  --color-surface: var(--palette-white);
  --color-surface-muted: var(--palette-sand-100);    /* notatka, komentarz, tło przełącznika */
  --color-surface-hover: var(--palette-sand-100);    /* przycisk ikony po najechaniu; na pasie przezroczysta biel */
  --color-surface-inverse: var(--palette-ink-900);   /* przycisk potwierdzenia usunięcia */
  --color-ink: var(--palette-ink-900);               /* tekst na brzoskwini, także wewnątrz pasa */
  --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);
  --color-disabled: var(--palette-stone-500);        /* przycisk ikony bez działania; na pasie --color-on-band-faint */

  /* 1c. Role — linie */
  --color-border: var(--palette-ink-900);            /* obrys przycisku drugorzędnego */
  --color-rule: var(--palette-ink-900);              /* linie etykiety: 8 px, 3 px, cienka atramentem, prowadząca */
  --color-border-control: var(--palette-stone-500);  /* obrys pola formularza */
  --color-border-subtle: var(--palette-stone-300);   /* podziały w listach */
  --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 (strony publiczne) */
  --color-accent-tint: var(--palette-teal-100);      /* zaznaczony wiersz, aktywna pozycja panelu */
  --color-accent-on-soft: var(--palette-teal-800);   /* tekst i ikona na --color-accent-tint */
  --color-nav-active: var(--color-accent);           /* aktywna pozycja nawigacji */
  --color-fab: var(--color-accent);                  /* okrągłe „Dodaj” */
  --color-bar-track: var(--palette-stone-200);       /* tor paska (makro, kalorie) */
  --color-bar-fill: var(--color-accent);             /* wypełnienie paska */
  --color-bar-gap: var(--color-surface);             /* szczelina na granicy limitu */

  /* 1d'. Role — pas: jeden kolor na wszystkich zakładkach, tekst biały */
  --color-band: var(--palette-teal-900);
  --color-on-band: var(--palette-white);             /* 10,4:1 */
  --color-on-band-soft: var(--palette-band-200);     /* 8,4:1 */
  --color-on-band-muted: var(--palette-band-300);    /* 6,8:1 */
  --color-on-band-faint: var(--palette-band-400);    /* 4,6:1 */
  --color-on-band-accent: var(--palette-mint-300);   /* 6,7:1 */
  --color-on-band-track: var(--palette-band-600);
  --color-on-band-hover: rgb(255 255 255 / 0.12);
  --color-on-band-line: rgb(255 255 255 / 0.6);      /* obrys dzisiejszego dnia na pasie */

  /* 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-on-complete: var(--palette-white);              /* ptaszek w kółku */
  --color-state-unconfirmed: var(--palette-ink-900);      /* kropka „•”, ramka przerywana */
  --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 (na pasie biel), nie czerwień */

  /* 1f. Role — komunikaty */
  --color-info-bg: var(--palette-sand-100);
  --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.42);
  --color-skeleton: var(--palette-stone-200);
  --color-handle: var(--palette-stone-300);
  --color-icon-button: var(--palette-sand-100);      /* tło okrągłego przycisku ikony; na pasie przezroczyste */
}

:root {
  color-scheme: light;
}

/* ==========================================================================
   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-figure: 66%;          /* wartości w wierszach etykiety */
  --font-stretch-compact: 75%;         /* etykiety w dolnej nawigacji, kcal w komórce dnia */
  --font-stretch-unit: 80%;            /* „/ 1 900 kcal”, gramy makro */
  --font-stretch-semicondensed: 87.5%; /* nazwy makro */
  --font-stretch-normal: 100%;
  --font-stretch-label: 100%;          /* 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 */
  --font-size-meal-summary: 0.9375rem; /* 15px — zdanie o posiłku, wiersze etykiety */
  --font-size-segment: 0.9375rem;     /* 15px — Tydzień / Miesiąc, zakres dat w pasie */
  --font-size-food-kcal: 1.0625rem;   /* 17px — kcal pozycji i dnia na liście */
  --font-size-meal-kcal: 1.25rem;     /* 20px — kcal posiłku, wartość w wierszu etykiety */
  --font-size-brand: 1.0625rem;       /* 17px — nazwa przy znaku w pasie */
  --font-size-band-title: 1.125rem;   /* 18px — tytuł zakładki w górnym wierszu pasa */
  --font-size-day: 1.3125rem;         /* 21px — numer dnia w pasku tygodnia */
  --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 — „Posiłki”, tytuł okna */
  --font-size-sheet-title: 2.375rem;  /* 38px — tytuł arkusza */
  --font-size-display-sm: 2.75rem;    /* 44px — „Brak wpisów” w pasie */
  --font-size-meal-number: 4.25rem;   /* 68px — kcal w arkuszu posiłku */

  --line-height-band: 0.95;           /* duża liczba w pasie */
  --line-height-comment: 1.38;        /* komentarz asystenta */
  --line-height-heading: 1.08;
  --line-height-snug: 1.25;
  --line-height-body: 1.45;
  --line-height-single: 1;

  --letter-spacing-label: 0.08em;     /* etykiety WERSALIKAMI */
  --letter-spacing-caps: 0.06em;      /* „SKŁADNIKI” */
  --letter-spacing-caps-tight: 0.07em; /* dni tygodnia w pasku */
  --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-nav: clamp(var(--font-size-micro), 3.1cqi, var(--font-size-label));            /* etykiety dolnej nawigacji 11–12px */
  --font-size-band-number: clamp(4.25rem, 31.4cqi - 1.75rem, 5.75rem);                       /* suma kcal dnia, średnia okresu: 68–92 px */
  --font-size-unit: clamp(1rem, 8cqi - 0.5rem, 1.3125rem);                                   /* „/ 1 900 kcal” przy dużej liczbie: 16–21 px */
}

/* ==========================================================================
   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-5);          /* margines boczny ekranu do 767 px (przy 320 px: 16 px) */
  --gutter-tablet: var(--space-8);   /* od 768 px */
  --gutter-desktop: var(--space-10); /* od 1024 px */
  --section-gap: var(--space-5);     /* odstęp sekcji na ekranie */
}

/* ==========================================================================
   4. PROMIENIE
   ========================================================================== */
:root {
  --radius-xs: 4px;     /* próbka kreskowania */
  --radius-sm: 10px;    /* przyciski, pola, komórka dnia */
  --radius-md: 12px;    /* notatka, komunikat, toast */
  --radius-xl: 16px;    /* okno potwierdzenia */
  --radius-2xl: 18px;   /* strony publiczne */
  --radius-4xl: 24px;   /* strony publiczne */
  --radius-pill: 999px; /* chipy */
  --radius-round: 50%;  /* kropki i kółka */

  --radius-button: var(--radius-sm);
  --radius-control: var(--radius-sm);
  --radius-seg: 8px;                   /* zaznaczony segment w przełączniku */
  --radius-icon-button: var(--radius-round);
  --radius-note: var(--radius-md);     /* notatka, komentarz, komunikat, toast */
  --radius-card: var(--radius-xl);     /* okno potwierdzenia */
  --radius-row: var(--radius-2xl);
  --radius-sheet: 22px;                /* górne rogi arkusza i białego arkusza pod pasem */
  --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;            /* linia prowadząca, oś wykresu */
  --border-width-meal: 3px;       /* linia nad każdym posiłkiem i listą */
  --border-width-rule: 8px;       /* gruba linia etykiety */

  --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
   W aplikacji tylko miękki cień tego, co unosi się nad treścią. Twarde cienie: tylko landing.
   ========================================================================== */
:root {
  --shadow-offset-sm: 3px;
  --shadow-hard-sm: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--color-border);  /* przycisk Dodaj */
  --shadow-float: 0 8px 28px rgb(26 23 18 / 0.18);                                          /* okno, toast, lista języków */
  --shadow-nav: 0 -1px 0 var(--color-border-subtle);                                        /* linia nad dolną nawigacją */
}

/* ==========================================================================
   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 */
  --icon-stroke-nav: 1.7;        /* nieaktywna pozycja nawigacji */

  --size-icon-mark: 12px;        /* znak planu */
  --size-icon-button: 44px;
  --size-icon-button-narrow: 34px; /* strzałki tygodnia w pasie telefonu: wysokość zostaje 44 px */
  --size-fab: 48px;
  --size-nav-item: 56px;
  --size-nav-bar: 72px;          /* wysokość dolnej nawigacji */
  --size-logo-header: 26px;      /* znak w pasie, w szynie i panelu bocznym */
  --size-band-bar: 56px;         /* górny wiersz pasa */
  --size-day-mark: 14px;
  --size-day-mark-lg: 18px;
  --size-day-dot: 7px;
  --size-check-in-mark: 10px;
  --size-bar-kcal: 10px;
  --size-bar-macro: 6px;
  --size-bar-limit-label: 24px;  /* wiersz podpisu „limit 1 900” nad paskiem przekroczenia */
  --size-bar-gap: 3px;           /* biała szczelina na granicy limitu */
  --size-swatch: 16px;
  --size-swatch-sm: 14px;
  --size-swatch-lg: 30px;
  --size-handle-width: 42px;
  --size-handle-height: 5px;
  --size-button: 52px;
  --size-button-lg: 52px;
  --size-row: 52px;
  --size-chip: 28px;
  --size-chip-sm: 24px;
  --size-step-badge: 28px;
  --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);
  --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-flex-badge: var(--font-size-micro); /* 11px — ↑ / ∞ w kółku Dnia luzu (kalendarz, legenda) */
  --font-size-chart-badge: 0.8125rem; /* 13px — ↑ / ∞ nad słupkiem */

  --size-chart-height: 176px;         /* pole wykresu tygodnia */
  --size-chart-height-lg: 230px;      /* pole wykresu od 1024 px (wyrównane z kolumną liczb) */
  --size-chart-limit: 2px;            /* 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 w formularzu */
}

/* ---- 30-forms.css ------------------------------------------------------ */
/* ==========================================================================
   11. FORMULARZE, USTAWIENIA, KONTO (components.html)
   ========================================================================== */
:root {
  --size-input: 50px;                /* wysokość pola tekstowego i listy wyboru */
  --size-control-mark: 24px;         /* pole wyboru i przycisk radiowy */
  --size-control-dot: 10px;          /* kropka zaznaczonego przycisku radiowego */
  --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-tint);

  --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);
}