/* ==========================================================================
   Co Działa, warstwa ekranowa systemu wizualnego
   Źródło prawdy: co-dziala-brandbooki/design-system-grafit-limonka/tokens.json
   Motyw: Grafit i Cytryna. Siatka bazowa 8.
   Nazwa zatwierdzona przez Jakuba 17.08.2026. Wartości pochodzą
   z zatwierdzonego design systemu, nazwa katalogu jest historyczna.
   ========================================================================== */

:root {
  /* --- Kolor --------------------------------------------------------- */
  --c-ink:        #181A1D;   /* tekst, ciemne tła, kontury */
  --c-ink-soft:   #32383A;   /* tekst pomocniczy na jasnych tłach */
  --c-paper:      #ECEDE5;   /* główne jasne tło */
  --c-white:      #FFFFFF;   /* pola formularzy i dokumenty */
  --c-lime:       #C9D650;   /* CTA, aktywne elementy, wyniki i linie */
  --c-surface:    #DDE0D7;   /* warstwy, pola nieaktywne, podziały */
  --c-border:     #69726D;   /* obramowania i ikony */

  /* Warianty na ciemnym tle. Wyliczone, nie improwizowane. */
  --c-ink-raise:  #22262A;   /* karta na graficie */
  --c-ink-line:   #3A4045;   /* linia na graficie */
  --c-paper-dim:  #A8ADA2;   /* tekst pomocniczy na graficie, kontrast 7.0:1 */

  --c-olive:      #3D4732;   /* ton przejściowy, środkowy punkt gradientu */

  /* Jedyny dopuszczony gradient. Limit: 15% powierzchni strony. */
  --g-moment: linear-gradient(112deg, #181A1D 0%, #3D4732 58%, #C9D650 100%);

  --c-success:    #175C39;  --c-success-bg: #D9EBE0;
  --c-info:       #174E78;  --c-info-bg:    #DCEAF4;
  --c-warning:    #765000;  --c-warning-bg: #F1E6C6;
  --c-error:      #9C2020;  --c-error-bg:   #F4DDDD;

  /* --- Typografia ---------------------------------------------------- */
  /* Tokens 1.1.0: Manrope na nagłówki, grubości 700 i 800. */
  --f-head: "Manrope", Inter, Arial, sans-serif;
  --f-body: "Inter", Arial, sans-serif;
  --w-head-strong: 800;   /* display, h1, h2 */
  --w-head: 700;          /* h3 i mikrotypografia */

  /* Skala responsywna. Dolna wartość = telefon, górna = desktop z tokens.json */
  --t-display:    clamp(2.00rem, 1.05rem + 4.75vw, 4.00rem);  /* 32 → 64 */
  --t-display-lh: 1.06;
  --t-h1:         clamp(2.13rem, 1.30rem + 3.60vw, 3.25rem);  /* 34 → 52 */
  --t-h1-lh:      1.10;
  --t-h2:         clamp(1.75rem, 1.20rem + 2.40vw, 2.50rem);  /* 28 → 40 */
  --t-h2-lh:      1.15;
  --t-h3:         clamp(1.38rem, 1.10rem + 1.20vw, 1.75rem);  /* 22 → 28 */
  --t-h3-lh:      1.21;
  --t-lead:       clamp(1.06rem, 0.98rem + 0.40vw, 1.13rem);  /* 17 → 18 */
  --t-lead-lh:    1.56;
  --t-body:       1rem;      --t-body-lh:  1.50;
  --t-small:      0.875rem;  --t-small-lh: 1.43;
  --t-label:      0.75rem;   --t-label-lh: 1.33;  --t-label-ls: 0.06em;

  /* --- Odstępy, siatka bazowa 8 --------------------------------------- */
  --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;

  /* Rytm pionowy sekcji, jedna zmienna dla całego serwisu */
  --s-section: clamp(var(--s-8), 5vw + 2rem, var(--s-10));

  /* --- Wymiary -------------------------------------------------------- */
  --w-content: 1180px;
  --w-text: 62ch;          /* maksymalna szerokość akapitu do czytania */
  --h-control: 48px;
  --h-touch-min: 44px;
  --h-nav: 72px;

  /* --- Ramka i głębia -------------------------------------------------
     Zmiana z 17.08.2026, decyzja Jakuba: zamiast grubych ramek stosujemy
     cienie. Ramka schodzi do włosowej roli podziałowej. --------------- */
  --b-width: 1px;
  --b-radius: 0px;
  --b-hair: 1px;           /* wyłącznie linie podziału wewnątrz komponentu */

  /* Cienie na jasnych powierzchniach. Barwa cienia bierze grafit,
     a nie czystą czerń, żeby nie robiła się szara mgła. */
  --sh-sm: 0 1px 2px rgba(24,26,29,.07), 0 2px 6px rgba(24,26,29,.05);
  --sh-md: 0 2px 4px rgba(24,26,29,.07), 0 10px 24px rgba(24,26,29,.09);
  --sh-lg: 0 4px 10px rgba(24,26,29,.10), 0 22px 52px rgba(24,26,29,.16);
  /* Na graficie cień jest niewidoczny, więc głębię niesie ciemniejszy
     rzut plus włosowy rozjaśniony kant u góry. */
  --sh-dark: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.40);
  --sh-ring: inset 0 1px 0 rgba(236,237,229,.10);
  --sh-lift: 0 6px 14px rgba(24,26,29,.14), 0 26px 60px rgba(24,26,29,.20);

  /* --- Ruch ----------------------------------------------------------- */
  --m-fast: 150ms;
  --m-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Zakazane w tym systemie i wyłączone globalnie w site.css:
   cienie, zaokrąglenia, gradienty, tekst limonkowy na jasnym tle,
   jasnoszary tekst na jasnym tle, tekst na ruchliwym zdjęciu. */