/* tokens.css — Design tokens (jedyne źródło kolorów, promieni, cieni, gradientów).
   Nie hardkoduj tych wartości w komponentach — używaj zmiennych. Zob. design.md §4. */

:root{
  /* Kolory marki */
  --navy:#0a1545;        /* nagłówki, logo, tekst mocny */
  --navy-2:#13235f;      /* start gradientu głębokiego */
  --blue:#2d8fff;        /* akcent podstawowy */
  --blue-bright:#36a3ff;
  --blue-soft:#6fb6ff;
  --cyan:#46e6ff;        /* akcent na ciemnym tle */
  --ink:#0c1430;         /* tekst podstawowy */
  --slate:#5a678f;       /* tekst drugorzędny */
  --line:#e6ecf7;        /* obramowania, linie */
  --bg:#ffffff;          /* tło jasne */
  --bg-soft:#f5f8ff;     /* tło sekcji jasnej alt */
  --dark:#070d24;        /* tło sekcji ciemnej */
  --dark-2:#0b1430;      /* tło stopki */

  /* Tekst na ciemnym tle */
  --on-dark:#ffffff;
  --on-dark-soft:#9fb0d8;

  /* Kształt i layout */
  --radius:18px;         /* domyślny promień kart */
  --radius-sm:11px;
  --radius-md:16px;
  --maxw:1200px;         /* maks. szerokość kontenera */

  /* Gradienty */
  --grad:linear-gradient(120deg,#2d8fff 0%,#46e6ff 100%);
  --grad-deep:linear-gradient(120deg,#13235f 0%,#2d8fff 60%,#46e6ff 100%);

  /* Cień */
  --shadow:0 18px 50px -20px rgba(20,50,120,.28);
  --shadow-blue:0 14px 34px -12px rgba(45,143,255,.55);
  --shadow-sm:0 8px 26px -14px rgba(20,50,120,.24);   /* blog: kafelki, TOC, share */

  /* Typografia (rodziny) */
  --font-head:'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Odstępy sekcji i kontenera */
  --sec-pad:clamp(70px, 10vw, 120px);
  --wrap-pad:clamp(20px, 5vw, 48px);
}