/* =========================================================================
   tokens.css — design tokens (zmienne globalne)
   Jedno źródło prawdy dla kolorów, promieni, odstępów, typografii i cieni.
   Edytuj TU, żeby zmienić wygląd w całym serwisie.
   ========================================================================= */

:root {
  /* --- Kolory marki (wartości z oryginalnego @theme index.html) --- */
  --color-czerwony: #F66B5B;   /* CTA, akcenty, hover                  */
  --color-szary:    #909bb0;   /* tekst pomocniczy / opisy             */
  --color-zielony:  #10343A;   /* nagłówki, tekst główny               */
  --color-morski:   #1FA6A8;   /* akcenty interaktywne, obramowania    */

  /* kolory pomocnicze (dawne klasy Tailwind slate-*) */
  --color-text:        #0f172a;  /* slate-900 — domyślny tekst body    */
  --color-muted:       #475569;  /* slate-600 — hover linków nav       */
  --color-border:      #e2e8f0;  /* slate-200 — obramowania            */
  --color-border-soft: #e5e7eb;  /* gray-200  — obramowania kart       */
  --color-surface:     #ffffff;
  --color-placeholder: #cbd5e1;  /* tła placeholderów zdjęć            */

  /* --- Gradienty marki --- */
  --grad-banner: linear-gradient(to right, #10343A 32.63%, #2C8FA0);
  --grad-footer: linear-gradient(to right, #2C8FA0 32.63%, #10343A);

  /* --- Typografia --- */
  --font-sans: "Poppins", system-ui, sans-serif;

  /* --- Promień (UJEDNOLICONA SKALA) ---
     Pełna skala 1:1 z dotychczasowymi wartościami w projekcie.
     Zasada: w komponentach NIE używamy surowych px/rem — tylko te tokeny. */
  --radius-xs:   0.5rem;    /*  8px — drobne elementy menu              */
  --radius-sm:   0.75rem;   /* 12px — małe karty / menu dropdown        */
  --radius-md:   1rem;      /* 16px — media, mapy, mniejsze karty       */
  --radius-lg:   1.25rem;   /* 20px — karty treści, pola textarea       */
  --radius-xl:   1.5rem;    /* 24px — duże media, panele formularza     */
  --radius-2xl:  1.75rem;   /* 28px — duże karty (hero, contact, form)  */
  --radius-3xl:  2rem;      /* 32px — warianty desktop dużych kart      */
  --radius-btn:  0.75rem;   /* 12px — przyciski CTA i pastylki-zakładki  */
  --radius-pill: 9999px;    /* pola input, koła (awatary/play), chipy    */

  /* --- Odstępy (skala wykorzystywana przez utilities) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* --- Layout --- */
  --container-max: 1420px;
  --container-pad: 1.5rem;   /* dawne px-6 */

  /* --- Cienie --- */
  --shadow-card: 0 24px 50px -32px rgba(15, 52, 58, 0.30);
  --shadow-pop:  0 24px 50px -12px rgba(15, 52, 58, 0.28);

  /* --- Breakpointy (dla odniesienia — media query wymagają wartości literalnych) ---
     md = 768px, lg = 1024px */
}