/* IMAGIFT — tokeny (DESIGN.md v1.0). Jedyne źródło kolorów, typografii, odstępów i ruchu.
   Fonty: Google Fonts (Poppins 400/500/600/700 + Work Sans 400/500/600) — link w szablony/head.html.
   Zasada: biel jest sceną, kolor jest prezentem. Kolory bazowe g/i/f/t = plamy, kropki, ikony, duże napisy;
   tekst kolorowy na bieli tylko w wersjach -tusz (AA). Biały tekst tylko na --ig-tusz lub --ig-t-tusz. */

/* Kroje zapasowe o dopasowanych metrykach: zanim Poppins i Work Sans dojdą (display=swap), tekst stoi w Arialu
   przeskalowanym do ich szerokości i wysokości — podmiana kroju nie przesuwa układu (CLS).
   Wartości zmierzone w Chrome na polskim tekście (szerokość względem Ariala / Ariala Bold); ascent, descent i line-gap
   z metryk fontów podzielone przez size-adjust. Zakres znaków jak w podzbiorach latin + latin-ext Google Fonts. */
@font-face { font-family: "Poppins zapas"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 110.14%; ascent-override: 95.33%; descent-override: 31.78%; line-gap-override: 9.08%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Poppins zapas"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 111.64%; ascent-override: 94.05%; descent-override: 31.35%; line-gap-override: 8.96%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Poppins zapas"; font-style: normal; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 105.75%; ascent-override: 99.29%; descent-override: 33.10%; line-gap-override: 9.46%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Work Sans zapas"; font-style: normal; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 110.95%; ascent-override: 83.82%; descent-override: 21.90%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Work Sans zapas"; font-style: normal; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Roboto");
  size-adjust: 111.38%; ascent-override: 83.50%; descent-override: 21.82%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Work Sans zapas"; font-style: normal; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 104.75%; ascent-override: 88.78%; descent-override: 23.20%; line-gap-override: 0%; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }

:root {
  /* --- biel i szarości --- */
  --ig-bialy: #FFFFFF;
  --ig-papier: #F5F5F7;          /* jasnoszare okna i pola */
  --ig-mgla: #EBEBEF;            /* obramowania pól, tła kafli nieaktywnych */
  --ig-linia: rgba(14, 14, 20, 0.09);
  --ig-linia-mocna: rgba(14, 14, 20, 0.16);
  --ig-tusz: #0E0E14;            /* słowo „ima”, nagłówki, przyciski główne */
  --ig-tekst: #3C3C47;
  --ig-cichy: #6E6E7A;           /* 5,0:1 na bieli, 4,6:1 na papierze */

  /* --- paleta GIFT (każda litera „gift” ma swój kolor) --- */
  --ig-g: #FF3E6C;               /* malina */
  --ig-i: #FFB224;               /* słońce */
  --ig-f: #13C39C;               /* mięta */
  --ig-t: #3F6BFF;               /* błękit */
  /* wersje do tekstu na bieli (AA) */
  --ig-g-tusz: #D1184B;
  --ig-i-tusz: #8A5A00;
  --ig-f-tusz: #08745D;
  --ig-t-tusz: #2747D9;
  /* mgiełki — tła kart i okien zalewanych kolorem */
  --ig-g-mgla: #FFE9EF;
  --ig-i-mgla: #FFF4DD;
  --ig-f-mgla: #DDF7EF;
  --ig-t-mgla: #E6ECFF;
  /* wstążka prezentowa G→I→F→T: cztery odcinki (nie płynny gradient) — tylko cienkie linie, paski postępu */
  --ig-wstazka: linear-gradient(90deg, var(--ig-g) 0 25%, var(--ig-i) 25% 50%, var(--ig-f) 50% 75%, var(--ig-t) 75% 100%);

  /* --- typografia --- */
  --ig-f-display: "Poppins", "Poppins zapas", "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ig-f-tekst: "Work Sans", "Work Sans zapas", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ig-t-mega: clamp(3.2rem, 1rem + 8.4vw, 9.5rem);     /* wielkie hasła, logo w stopce */
  --ig-t-hero: clamp(2.6rem, 1.15rem + 4.6vw, 5.6rem);   /* h1 hero */
  --ig-t-h1: clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem);      /* h1 podstron */
  --ig-t-h2: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --ig-t-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --ig-t-h4: 1.125rem;
  --ig-t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --ig-t-tekst: 1.0625rem;       /* 17 px (telefon 16 px) */
  --ig-t-maly: 0.9375rem;        /* 15 px */
  --ig-t-drobny: 0.8125rem;      /* 13 px — przypisy, podpisy */
  --ig-lh-tekst: 1.65;
  --ig-tracking: -0.02em;        /* nagłówki Poppins */

  /* --- odstępy --- */
  --ig-o-1: 4px; --ig-o-2: 8px; --ig-o-3: 12px; --ig-o-4: 16px; --ig-o-5: 24px;
  --ig-o-6: 32px; --ig-o-7: 48px; --ig-o-8: 64px; --ig-o-9: 96px; --ig-o-10: 128px;
  --ig-o-sekcja: clamp(88px, 4rem + 6vw, 168px);         /* pion sekcji */
  --ig-o-margines: clamp(20px, 4.6vw, 64px);             /* bok treści (telefon ≥ 20 px) */
  --ig-szer-max: 1240px;
  --ig-szer-tekst: 68ch;

  /* --- promienie --- */
  --ig-r-pigulka: 999px;
  --ig-r-karta: 24px;
  --ig-r-okno: 28px;
  --ig-r-kafel: 20px;
  --ig-r-maly: 14px;

  /* --- okna (pola-sekcje) --- */
  --ig-okno-wciecie: 24px;       /* od krawędzi ekranu (telefon 12 px) */
  --ig-okno-odstep: 24px;        /* między oknami (telefon 12 px) */

  /* --- ruch --- */
  --ig-e-out: cubic-bezier(0.16, 1, 0.3, 1);              /* = GSAP expo.out */
  --ig-e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ig-e-mocny: cubic-bezier(0.76, 0, 0.24, 1);
  --ig-d-szybko: 140ms;
  --ig-d-srednio: 240ms;
  --ig-d-wolno: 460ms;
  --ig-d-pokaz: 1000ms;

  /* --- cienie (miękkie, bez poświaty) --- */
  --ig-cien-1: 0 1px 2px rgba(14, 14, 20, 0.04), 0 8px 24px -12px rgba(14, 14, 20, 0.12);
  --ig-cien-2: 0 2px 4px rgba(14, 14, 20, 0.04), 0 24px 48px -24px rgba(14, 14, 20, 0.22);

  /* --- chrome --- */
  --ig-pasek-h: 68px;
  --ig-pasek-gora: 16px;         /* odstęp karty paska od góry przed przewinięciem */
  --ig-fokus: var(--ig-t);
}
@media (max-width: 991px) {
  :root { --ig-pasek-h: 62px; }
}
@media (max-width: 767px) {
  :root {
    --ig-t-tekst: 1rem;
    --ig-okno-wciecie: 12px;
    --ig-okno-odstep: 12px;
    --ig-r-okno: 24px;
    --ig-pasek-h: 58px;
    --ig-pasek-gora: 10px;
  }
}