/* Tokeny GS Meble. Dwie warstwy: prymitywy (--gs-blue-*, --gs-grey-*) i semantyka (reszta).
   Sekcje używają WYŁĄCZNIE semantyki. Palety P-2/P-3 przełączają tylko jej mapowanie.
   Kontrast sprawdza tools/contrast.mjs (czyta ten plik); korygujemy wartość, nie regułę (spec §8). */

:root {
  /* Prymitywy */
  --gs-blue-50: #e4f3f8;
  --gs-blue-100: #d3eaf2;
  --gs-blue-400: #2eb3d4;
  --gs-blue-600: #007aa3;
  --gs-blue-800: #00597a;
  --gs-grey-0: #ffffff;
  --gs-grey-50: #eef2f4;
  --gs-grey-100: #e3e9ec;
  --gs-grey-200: #d7dfe3;
  --gs-grey-600: #4f5f69;
  --gs-grey-900: #10212b;
  /* sale: spec dawał #D23F3F (4.64 na bg, 4.12 na surface). Przyciemnione do #C23535, żeby cena promocyjna
     miała >= 4.5 także na surface (4.84). */
  --gs-red-500: #c23535;
  /* link: brand #007AA3 daje 4.32 na surface i 4.28 na brand-tint. Tekst linków używa --gs-link (#00698F,
     >= 5.4 na bg, surface i brand-tint); brand zostaje kolorem wypełnień (przyciski). */
  --gs-blue-700: #00698f;
  /* line-strong: obwódki pól i kontrolek, >= 3:1 na bg, surface i surface-2 (WCAG 1.4.11). */
  --gs-grey-400: #75868f;
  /* text: tekst ciągły w szarości z naszego ink (ok. ink 70% na bieli), zimny, nie ciepły. 6.1 na bg,
     5.4 na surface, 5.4 na brand-tint (runda 1, wzór desktronic #595959). */
  --gs-grey-500: #59636a;
  /* Ciemny kontekst (html[data-scroll-bg='ink'], base.css): powierzchnie i tekst na tle ink. */
  --gs-navy-800: #1a2d38;
  --gs-navy-700: #223743;
  --gs-navy-600: #2a3f4b;
  --gs-navy-400: #7b8f9a;
  --gs-grey-300: #b4bfc5;
  --gs-blue-300: #7fd0ea;
  --gs-red-300: #ff8c8c;

  /* Semantyka: P-1 (czysty błękit), paleta domyślna */
  --gs-ink: var(--gs-grey-900);
  --gs-ink-muted: var(--gs-grey-500);
  --gs-ink-hover: color-mix(in srgb, var(--gs-ink) 86%, var(--gs-bg)); /* hover wypełnień ink */
  --gs-text: var(--gs-grey-500); /* akapity w <main> (base.css); nagłówki zostają w ink */
  --gs-brand: var(--gs-blue-600);
  --gs-brand-deep: var(--gs-blue-800);
  --gs-brand-bright: var(--gs-blue-400); /* tylko dekoracja i fokus, nigdy pod białym tekstem */
  --gs-brand-tint: var(--gs-blue-50);
  --gs-link: var(--gs-blue-700);
  --gs-bg: var(--gs-grey-0);
  --gs-surface: var(--gs-grey-50);
  --gs-surface-2: var(--gs-grey-100);
  --gs-sale: var(--gs-red-500);
  --gs-line: var(--gs-grey-200); /* separatory, dekoracja */
  --gs-line-strong: var(--gs-grey-400); /* obwódki pól i kontrolek */
  --gs-focus: var(--gs-brand); /* pierścień fokusu; w .gs-sheet zmienia się na kolor tekstu arkusza */
  /* Pasy: sekcja albo rząd na pełną szerokość (Opinie, rząd USP stopki S-A). W P-1 pas nie ma tła i nie
     dokłada odstępu; w P-2 dostaje brand-tint, karty na nim są białe, a dolny odstęp zamyka tło pasa. */
  --gs-strip-bg: var(--gs-bg);
  --gs-strip-surface: var(--gs-surface);
  --gs-strip-pad: 0px;
  --gs-strip-rule: var(--gs-line); /* linie wyznaczające rząd-pas w P-1; w P-2 granicę robi tło */
  --gs-on-brand: var(--gs-grey-0);
  --gs-sheet-bg: var(--gs-surface);
  --gs-sheet-fg: var(--gs-ink);
  --gs-sheet-text: var(--gs-text); /* akapity w arkuszu */
  /* Tło strony zmieniane przy przewijaniu (js/scroll-bg.js, base.css). */
  --gs-page-bg: var(--gs-bg);

  /* Promienie: skala desktronic 16 / 12 / 8 / 4, arkusze i hero 24. Przyciski wg R-A/R-B niżej. */
  --gs-radius-xs: 4px; /* swatche, chipy, tooltipy */
  --gs-radius-sm: 8px; /* taby, miniatury */
  --gs-radius-field: 12px; /* pola, kafle USP, panel menu */
  --gs-radius-btn: 15px;
  --gs-radius-pill: 999px;
  --gs-radius-card: 16px; /* zdjęcia w kartach */
  --gs-radius-tile: 16px; /* kafle kategorii */
  --gs-radius-sheet: 24px; /* arkusze, hero */

  --gs-shadow-float: 0 12px 32px rgba(16, 33, 43, 0.1);

  /* Odstępy: jednostka 4 px */
  --gs-space-1: 4px;
  --gs-space-2: 8px;
  --gs-space-3: 12px;
  --gs-space-4: 16px;
  --gs-space-5: 20px;
  --gs-space-6: 24px;
  --gs-space-7: 28px;
  --gs-space-8: 32px;
  --gs-space-9: 36px;
  --gs-space-10: 40px;
  --gs-space-11: 44px;
  --gs-space-12: 48px;
  --gs-space-13: 52px;
  --gs-space-14: 56px;
  --gs-space-15: 60px;
  --gs-space-16: 64px;
  --gs-space-17: 68px;
  --gs-space-18: 72px;
  --gs-space-19: 76px;
  --gs-space-20: 80px;
  --gs-space-21: 84px;
  --gs-space-22: 88px;
  --gs-space-23: 92px;
  --gs-space-24: 96px;
  /* Odstęp między sekcjami strony: 96 / 80 (≤1199) / 64 (≤767); reguła w base.css. */
  --gs-section-space: var(--gs-space-24);
  /* Tytuł sekcji → treść: 40 / 32 / 24. */
  --gs-section-head-gap: var(--gs-space-10);

  /* Kontener: 1512 z paddingiem 40 (treść 1432), 24 przy ≤1199, 16 przy ≤767. --gs-container-bleed to
     odległość od krawędzi treści kontenera do krawędzi okna (slidery wychodzące w prawo). */
  --gs-container-max: 1512px;
  --gs-container-pad: 40px;
  --gs-container-bleed: max(var(--gs-container-pad), calc(50vw - var(--gs-container-max) / 2 + var(--gs-container-pad)));

  /* Wagi: nagłówki i przyciski bez pogrubień; „mocny” tekst najwyżej 500, ceny 600 (--gs-price-weight). */
  --gs-weight-regular: 400;
  --gs-weight-medium: 500;
  --gs-weight-strong: 500;

  /* Ruch. --gs-ease: zwykłe przejścia (hover, wejścia); --gs-ease-inout: zmiany stanu strony (tło);
     --gs-ease-out: miękkie wejścia GSAP. Czasy: fast 200 (tacki, tooltipy), dur 300 (przyciski, taby,
     linki), slow 400 (zoom zdjęć, tło strony), reveal 700 (wejścia sekcji). */
  --gs-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --gs-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --gs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --gs-dur-fast: 200ms;
  --gs-dur: 300ms;
  --gs-dur-slow: 400ms;
  --gs-dur-bg: 400ms;
  --gs-dur-reveal: 700ms;
}

/* P-2: błękitne arkusze. Arkusz brand-deep z białym tekstem, pasy w brand-tint. surface zostaje bez zmian. */
[data-palette='p2'] {
  --gs-strip-bg: var(--gs-brand-tint);
  --gs-strip-surface: var(--gs-bg);
  --gs-strip-pad: var(--gs-section-space);
  --gs-strip-rule: transparent;
  --gs-sheet-bg: var(--gs-brand-deep);
  --gs-sheet-fg: var(--gs-grey-0);
  --gs-sheet-text: var(--gs-blue-100);
}

/* P-3: granat i jasny błękit. Zmienia się tylko arkusz: tło ink (#10212B), biały tekst, akcenty brand-bright. */
[data-palette='p3'] {
  --gs-sheet-bg: var(--gs-ink);
  --gs-sheet-fg: var(--gs-grey-0);
  --gs-sheet-text: var(--gs-grey-300);
}

/* Przyciski: R-A poduszka, R-B pigułka */
[data-radius='ra'] {
  --gs-radius-btn: 15px;
}
[data-radius='rb'] {
  --gs-radius-btn: 999px;
}

@media (max-width: 1199px) {
  :root {
    --gs-section-space: var(--gs-space-20);
    --gs-section-head-gap: var(--gs-space-8);
    --gs-container-pad: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --gs-radius-sheet: 16px;
    --gs-section-space: var(--gs-space-16);
    --gs-section-head-gap: var(--gs-space-6);
    --gs-container-pad: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gs-dur-fast: 0ms;
    --gs-dur: 0ms;
    --gs-dur-slow: 0ms;
    --gs-dur-bg: 0ms;
    --gs-dur-reveal: 0ms;
  }
}

/* Tło strony przy przewijaniu (kontrakt w js/scroll-bg.js). surface i tint zmieniają tylko tło strony. */
html[data-scroll-bg='surface'] {
  --gs-page-bg: var(--gs-surface);
}
html[data-scroll-bg='tint'] {
  --gs-page-bg: var(--gs-brand-tint);
}
html[data-scroll-bg='ink'] {
  --gs-page-bg: var(--gs-ink);
}

/* ink: ciemny kontekst w <main> (nagłówek i stopka bez zmian). Semantyka mapuje się na ciemne odpowiedniki,
   więc karty z własnym tłem (bg/surface) ciemnieją razem z tekstem i nic nie zostaje jasne na jasnym.
   Wszystkie tokeny zależne (sheet, strip, focus) trzeba tu powtórzyć: var() rozwiązuje się tam, gdzie
   token jest zadeklarowany. Kontrast na ink: tekst 8.8, link 9.5, sale 7.4, line-strong 4.9. */
html[data-scroll-bg='ink'] #main {
  --gs-ink: var(--gs-grey-0);
  --gs-ink-muted: var(--gs-grey-300);
  --gs-text: var(--gs-grey-300);
  --gs-bg: var(--gs-grey-900);
  --gs-surface: var(--gs-navy-800);
  --gs-surface-2: var(--gs-navy-700);
  --gs-brand-tint: var(--gs-navy-800);
  --gs-line: var(--gs-navy-600);
  --gs-line-strong: var(--gs-navy-400);
  --gs-link: var(--gs-blue-300);
  --gs-sale: var(--gs-red-300);
  --gs-focus: var(--gs-brand-bright);
  --gs-strip-bg: var(--gs-grey-900);
  --gs-strip-surface: var(--gs-navy-800);
  --gs-strip-rule: var(--gs-navy-600);
  --gs-sheet-bg: var(--gs-navy-800);
  --gs-sheet-fg: var(--gs-grey-0);
  --gs-sheet-text: var(--gs-grey-300);
  --gs-ink-hover: color-mix(in srgb, var(--gs-ink) 86%, var(--gs-bg));
}