/* ===========================================================================
   TOKENY — jedno miejsce, w którym zmienia się wygląd całej strony.
   Paleta: ciemna, kinowa. Zdjęcia mają świecić jak obrazy w galerii,
   dlatego tło jest głębokie i neutralne, a jedynym akcentem jest mosiądz.
   =========================================================================== */

/* --- Kroje pisma (self-hosted, bez zapytań do Google) ------------------- */
/* Cormorant Garamond i Jost mają pełny zestaw polskich znaków (latin-ext). */
@import url('./fonts.css');

:root {
  color-scheme: dark;

  /* ---- TŁO ------------------------------------------------------------ */
  --tlo:            #0A0A0B;   /* strona */
  --tlo-2:          #101012;   /* sekcja wyróżniona */
  --tlo-3:          #17171A;   /* karta, pole formularza */
  --tlo-4:          #202024;   /* hover na karcie */
  --tlo-krycie:     rgba(10, 10, 11, 0.72);  /* przyklejony nagłówek */

  /* ---- TEKST ---------------------------------------------------------- */
  --atrament:       #EFEBE3;   /* nagłówki — ciepła kość słoniowa, nie biel */
  --atrament-2:     #C9C4BA;   /* tekst ciągły */
  --atrament-3:     #918C83;   /* podpisy, etykiety */
  --atrament-4:     #63605A;   /* metadane, wyłączone */

  /* ---- LINIE ---------------------------------------------------------- */
  --linia:          rgba(239, 235, 227, 0.11);
  --linia-mocna:    rgba(239, 235, 227, 0.20);
  --linia-slaba:    rgba(239, 235, 227, 0.06);

  /* ---- AKCENT (mosiądz — maksymalnie 2% powierzchni) ------------------- */
  --mosiadz:        #C6A063;
  --mosiadz-jasny:  #E0C795;
  --mosiadz-ciemny: #8A6E42;
  --mosiadz-mgla:   rgba(198, 160, 99, 0.14);

  /* ---- AKCENT DRUGI (mazurska zieleń / woda) --------------------------- */
  --woda:           #5E7D78;
  --las:            #3A4A3E;

  /* ---- TYPOGRAFIA ----------------------------------------------------- */
  --f-tytul: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-tekst: 'Jost', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Skala płynna — clamp() zamiast media queries */
  --t-mikro:  0.6875rem;                              /* 11px — etykiety */
  --t-maly:   0.75rem;                                /* 12px */
  --t-sm:     0.875rem;                               /* 14px */
  --t-baza:   1rem;                                   /* 16px */
  --t-md:     1.0625rem;                              /* 17px — lead */
  --t-lg:     clamp(1.25rem, 0.95rem + 0.6vw, 1.5rem);
  --t-xl:     clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);
  --t-2xl:    clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --t-3xl:    clamp(2.75rem, 1.3rem + 5.2vw, 6rem);   /* tytuł hero */
  --t-numer:  clamp(3.5rem, 2rem + 7vw, 9rem);        /* wielka liczba */

  --lh-ciasny: 1.02;
  --lh-tytul:  1.12;
  --lh-tekst:  1.68;   /* polskie diakrytyki potrzebują powietrza */

  --ls-tytul:  -0.012em;
  --ls-tekst:  0.004em;
  --ls-etyk:   0.18em;   /* WERSALIKI — główny sygnał „premium” */
  --ls-etyk-s: 0.24em;
  --ls-btn:    0.13em;

  /* ---- ODSTĘPY (baza 4px) --------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 128px; --s-13: 160px;

  /* Wysokość przyklejonego nagłówka po przewinięciu — pasek z ceną i kotwice
     muszą się o nią odsunąć, inaczej chowają się pod nagłówkiem. */
  --h-naglowek: 64px;
  --offset-kotwicy: calc(var(--h-naglowek) + 32px);

  --sekcja-y: clamp(72px, 9vw, 168px);
  --margines: clamp(20px, 5vw, 72px);
  --max-w:    1440px;
  --max-tekst: 62ch;

  /* ---- PROMIENIE (luksus = kąt prosty) --------------------------------- */
  --r-0: 0;  --r-1: 2px;  --r-2: 4px;  --r-pigulka: 999px;

  /* ---- CIENIE (prawie nieobecne) --------------------------------------- */
  --cien-uniesienie: 0 2px 24px rgba(0, 0, 0, 0.45);
  --cien-modal:      0 32px 80px rgba(0, 0, 0, 0.7);

  /* ---- RUCH ------------------------------------------------------------ */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);    /* „drogie” wyhamowanie */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --d-1: 160ms; --d-2: 280ms; --d-3: 480ms; --d-4: 760ms; --d-5: 1200ms;

  /* ---- PROPORCJE ------------------------------------------------------- */
  --ar-hero: 21 / 9;
  --ar-szeroki: 16 / 9;
  --ar-karta: 3 / 2;
  --ar-portret: 4 / 5;
}

/* Szeroka gama kolorów na ekranach P3 — mosiądz zyskuje głębi. */
@media (color-gamut: p3) {
  :root {
    --mosiadz:       color(display-p3 0.76 0.63 0.40);
    --mosiadz-jasny: color(display-p3 0.87 0.78 0.60);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-3: 1ms; --d-4: 1ms; --d-5: 1ms; }
}

/* Typowane własności — pozwalają animować gradienty i połysk.
   Bez @property przeglądarka traktuje je jak tekst i nie umie interpolować. */
@property --polysk {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -30%;
}
@property --obrys {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}