/* V2: tokeny. Nadpisują bazę (css/tokens.css, css/fonts.css para A) tylko na stronie /v2 (html.v2).
   Specyficzność html.v2 (0,1,1) wygrywa z [data-font='a'] (0,1,0), więc skala typografii też się zmienia.
   System z desktronic (research_notes/desktronic.md), paleta GS Meble. Opis: docs/superpowers/iteracje/v2-system.md.
   Sekcje używają wyłącznie --gs-* (semantyka bazy) i --v2-* (te poniżej), nigdy prymitywów. */

html.v2 {
  /* ---------- Kolor (P-1, chłodne szarości zamiast kremu desktronic) ---------- */
  --v2-ink: var(--gs-grey-900); /* nagłówki, linki nawigacji, ceny */
  --v2-text: var(--gs-grey-500); /* akapity, opisy kart (desktronic #595959) */
  --v2-muted: var(--gs-grey-500); /* podpisy 12–14 px; grey-400 nie ma 4.5:1 na małym tekście */
  --v2-line: var(--gs-grey-100); /* linie 1 px: belka, tacka próbek, separatory (desktronic #e6e8ea) */
  --v2-control: var(--gs-grey-200); /* obrys zakładek i strzałek w spoczynku (desktronic #d1d5d8) */
  --v2-pack: var(--gs-grey-50); /* tło packshotów i kafli (chłodna jasna szarość) */
  --v2-pack-2: var(--gs-grey-100); /* hover pól jasnych */
  --v2-band: var(--gs-brand-deep); /* pasek wyróżników i górny pas karty hero; biały tekst 7.3:1 */
  --v2-on-band: var(--gs-grey-0);
  /* Jasny błękit paneli (Outlet). Zadeklarowany na html, więc nie ciemnieje w trybie ink (scroll-bg),
     w przeciwieństwie do --gs-brand-tint, które tokens.css przemapowuje w #main na granat. */
  --v2-tint: var(--gs-brand-tint);
  --gs-text: var(--v2-text);

  /* ---------- Typografia (desktronic: wszystkie nagłówki 400, ciasna interlinia) ---------- */
  --gs-h1-size: clamp(36px, 1.75rem + 2.5vw, 60px); /* 60/70 → 36/42 */
  --gs-h1-leading: 1.167;
  --gs-h2-size: clamp(30px, 1.25rem + 2.2vw, 48px); /* 48/56 → 30/36 */
  --gs-h2-leading: 1.167;
  --v2-h3-size: 24px; /* tytuł kafla 24/30 */
  --v2-h3-leading: 1.25;
  --v2-title-size: 18px; /* tytuł karty / USP 18/26 */
  --v2-title-leading: 1.444;
  --v2-lead-size: 18px; /* lead pod H1 i H2 */
  --v2-small-size: 14px; /* 14/24 */
  --v2-small-leading: 1.714;
  --v2-caption-size: 12px; /* 12/18 */
  --v2-caption-leading: 1.5;
  --v2-nav-size: 15px;

  /* ---------- Promienie ---------- */
  --v2-r-hero: 24px; /* karta hero */
  --v2-r-card: 16px; /* zdjęcia kart, kafle */
  --v2-r-panel: 12px; /* pigułka nawigacji, kafle USP, panel wyszukiwania */
  --v2-r-chip: 4px; /* próbki, plakietki */
  --v2-r-control: var(--gs-radius-pill); /* przyciski, zakładki, strzałki: pigułka (GS, R-B) */

  /* ---------- Odstępy ---------- */
  --v2-section: 96px; /* rytm sekcji */
  --v2-head-gap: 40px; /* nagłówek sekcji → treść */
  --v2-gap: 24px; /* siatki kart i kafli */
  --v2-rail-gap: 20px; /* slider kart */
  --v2-card-w: 340px; /* karta produktu w sliderze */

  /* ---------- Kontener 1512 / 40 ---------- */
  --gs-container-max: 1512px;
  --gs-container-pad: 40px;
  /* Lewa krawędź treści od krawędzi okna: slidery zaczynają się tu i wychodzą do prawej krawędzi okna. */
  --v2-bleed: max(var(--gs-container-pad), calc((100vw - var(--gs-container-max)) / 2 + var(--gs-container-pad)));

  /* ---------- Ruch (tokeny bazy; prefers-reduced-motion zeruje je w tokens.css) ---------- */
  --v2-t-ui: var(--gs-dur-fast) var(--gs-ease); /* 200: tacki, tooltipy */
  --v2-t-control: var(--gs-dur) var(--gs-ease); /* 300: przyciski, zakładki, strzałki */
  --v2-t-image: var(--gs-dur-slow) var(--gs-ease); /* 400: powiększenie zdjęć, zmiana stanu nagłówka */
}

@media (max-width: 1279px) {
  html.v2 {
    --v2-section: 72px;
    --v2-head-gap: 32px;
    --gs-container-pad: 24px;
  }
}

@media (max-width: 767px) {
  html.v2 {
    --v2-section: 64px;
    --v2-head-gap: 24px;
    --v2-gap: 16px;
    --v2-rail-gap: 12px;
    --v2-card-w: 236px;
    --v2-r-hero: 16px;
    --v2-h3-size: 20px;
    --v2-h3-leading: 1.3;
    --v2-title-size: 16px;
    --v2-title-leading: 1.5;
    --v2-lead-size: 16px;
    --gs-container-pad: 16px;
  }
}

/* ---------- Tryb ink (js/scroll-bg.js; w V2 jedyny wyzwalacz to sekcja Usługi) ----------
   Strona ciemnieje, zanim Usługi wypełnią okno, więc sąsiedzi (gotowe zestawy, panel Outletu) przez chwilę
   stoją na granacie. Tokeny V2 przechodzą na jasne odpowiedniki razem z bazą (css/tokens.css), a kolory
   przechodzą płynnie razem z tłem (base.css, data-scroll-bg-anim). --v2-pack zostaje jasny: packshoty
   leżą na jasnych kaflach na granacie, jak panele desktronic w ciemnym kontekście. */
html.v2[data-scroll-bg='ink'] #main {
  --v2-ink: var(--gs-grey-0);
  --v2-text: var(--gs-grey-300);
  --v2-muted: var(--gs-grey-300);
  --v2-line: var(--gs-navy-600);
  --v2-control: var(--gs-navy-400);
}

/* Panel z własnym jasnym tłem (.v2-light: panel Outletu, panele konfiguratora, płytki usług, kafle) zostaje
   jasny w trybie ink: wraca do jasnej semantyki bazy i V2. */
html.v2[data-scroll-bg='ink'] #main .v2-light {
  --gs-ink: var(--gs-grey-900);
  --gs-ink-muted: var(--gs-grey-500);
  --gs-text: var(--gs-grey-500);
  --gs-bg: var(--gs-grey-0);
  --gs-surface: var(--gs-grey-50);
  --gs-surface-2: var(--gs-grey-100);
  --gs-brand-tint: var(--gs-blue-50);
  --gs-line: var(--gs-grey-200);
  --gs-line-strong: var(--gs-grey-400);
  --gs-link: var(--gs-blue-700);
  --gs-sale: var(--gs-red-500);
  --gs-focus: var(--gs-brand);
  --gs-ink-hover: color-mix(in srgb, var(--gs-ink) 86%, var(--gs-bg));
  --v2-ink: var(--gs-grey-900);
  --v2-text: var(--gs-grey-500);
  --v2-muted: var(--gs-grey-500);
  --v2-line: var(--gs-grey-100);
  --v2-control: var(--gs-grey-200);
  color: var(--gs-ink);
}

/* ---------- Tryb tint (Usługi, decyzja Piotra 19.10): tło strony --v2-pack, tekst bez zmian ---------- */
html.v2[data-scroll-bg='tint'] {
  --gs-page-bg: var(--v2-pack);
}