/* ===========================================================
   INSPIRE — tokeny projektowe
   Biel, grafit, mosiądz. Nie zmieniać wartości bez decyzji
   design leada — kontrasty są wyliczone.
   =========================================================== */

:root {
  /* --- kolor --------------------------------------------- */
  --white:     #FFFFFF;  /* karty, panele, pola formularza */
  --paper:     #F4F4F2;  /* tło strony */
  --grey-100:  #EBEBE8;  /* drugorzędna powierzchnia, tag nieaktywny */
  --grey-300:  #DBDBD7;  /* hairline'y, obrysy */
  --grey-500:  #8B8B86;  /* podpisy, metadane */
  --grey-700:  #484844;  /* akapity */
  --ink:       #141413;  /* nagłówki, przyciski primary */
  --ink-deep:  #0B0B0A;  /* ciemny panel kontaktu */
  --gold:      #C9A961;  /* złoto na ciemnym tle + elementy nietekstowe */
  --gold-deep: #8A6D33;  /* JEDYNE złoto dopuszczone dla tekstu na jasnym */

  /* --- typografia ---------------------------------------- */
  --font-sans: 'Switzer', 'Geist', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Helvetica, Arial, sans-serif;
  --font-accent: 'Newsreader', Georgia, 'Times New Roman', serif;

  --fs-h1: clamp(2.6rem, 6.4vw, 6rem);
  --fs-h2: clamp(2rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 2vw, 1.875rem);
  --fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body: 1.0625rem;      /* 17px */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fs-small: 0.875rem;      /* 14px */
  --fs-tag: 0.8125rem;       /* 13px */
  --fs-label: 0.6875rem;     /* 11px */

  /* --- geometria ----------------------------------------- */
  --r-pill: 999px;   /* przyciski, tagi, nawigacja, pola input */
  --r-frame: 24px;   /* hero, duże bloki full-bleed */
  --r-card: 20px;    /* karty */
  --r-media: 16px;   /* zdjęcia wewnątrz kart */

  /* --- cień ---------------------------------------------- */
  --shadow-soft: 0 1px 2px rgba(17, 17, 16, .04), 0 10px 28px rgba(17, 17, 16, .05);
  --shadow-lift: 0 2px 4px rgba(17, 17, 16, .06), 0 14px 36px rgba(17, 17, 16, .10);

  /* --- siatka i rytm ------------------------------------- */
  --container: 1360px;
  --gutter: 24px;          /* mobile; nadpisywane w media queries */
  --grid-gap: 24px;
  /* Odstępy między sekcjami. Referencje z briefu miały 176/112/80,
     ale przy realnej treści (dużo krótkich bloków) było to za dużo —
     na życzenie klienta zjechane o ok. 30%. */
  --section-gap: 56px;     /* mobile; nadpisywane w media queries */
  --bleed: 16px;           /* wsunięcie płyt full-bleed od krawędzi */

  /* --- motion -------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .35s;
  --t-mid: .6s;
  --t-slow: .9s;
}

@media (min-width: 768px) {
  :root { --gutter: 40px; --section-gap: 80px; }
}

@media (min-width: 1024px) {
  :root { --gutter: 64px; --section-gap: 120px; }
}