/* ==========================================================================
   SALUS INTERNATIONAL — Design Tokens v1.0 (strona główna salusint.pl)
   Źródło: Księga Identyfikacji Wizualnej Salus International (Pantone 281)
   + wektory logo (logo_SI_granat.ai → #192D67, logo_35lat → #0057A0)
   Kolory oznaczone [EXT] są rozszerzeniem poza księgę znaku — wymagają
   akceptacji klienta na etapie prototypu.
   ========================================================================== */

:root {
  /* --- BRAND CORE (z księgi znaku / wektorów logo) --- */
  --salus-navy:        #192D67;  /* primary; Pantone 281, CMYK 100/85/5/35 */
  --salus-blue:        #0057A0;  /* secondary; z logo 35-lecia */
  --salus-gray:        #6A6A69;  /* achromatyczna wersja znaku */

  /* --- NAVY SCALE (tinty/odcienie wyprowadzone z --salus-navy) --- */
  --navy-900: #101D45;  /* tła sekcji dark, footer */
  --navy-800: #192D67;  /* = brand navy */
  --navy-700: #24407E;  /* hover na navy */
  --navy-600: #33539B;
  --navy-100: #E2E8F4;  /* subtelne tła kart / pasków */
  --navy-50:  #F0F3FA;  /* tło sekcji alternate */

  /* --- BLUE SCALE --- */
  --blue-600: #0057A0;  /* = brand blue; linki, akcenty interaktywne */
  --blue-500: #0B6BBD;  /* hover linków */
  --blue-100: #DCEBF7;

  /* --- ACCENT "ZDROWIE / NATURA" [EXT] — do akceptacji klienta --- */
  --health-500: #1E9E8E;  /* teal: badge, ikony jakości/eko, detale */
  --health-100: #DDF2EF;

  /* --- NEUTRALS --- */
  --white:    #FFFFFF;
  --gray-900: #1A1C20;  /* tekst główny na jasnym tle */
  --gray-700: #44474E;  /* tekst drugorzędny */
  --gray-500: #6A6A69;  /* = brand gray; metadane, daty */
  --gray-300: #C9CCD2;  /* obramowania, separatory */
  --gray-100: #F3F4F6;  /* tła pól formularzy */

  /* --- SEMANTIC --- */
  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-700);
  --color-text-on-dark:   var(--white);
  --color-bg:             var(--white);
  --color-bg-alt:         var(--navy-50);
  --color-bg-dark:        var(--navy-900);
  --color-primary:        var(--salus-navy);
  --color-primary-hover:  var(--navy-700);
  --color-link:           var(--blue-600);
  --color-link-hover:     var(--blue-500);
  --color-focus-ring:     var(--blue-600);
  --color-error:          #B3261E;
  --color-success:        #1E7E34;

  /* --- TYPOGRAPHY ---
     Księga: Helvetica Neue LT Pro (druk), Arial (korespondencja).
     Web-ekwiwalent: Inter (open license, grotesk zgodny z duchem HN). */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Skala typograficzna — desktop (mobile w clamp) */
  --text-display: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);   /* H1 hero 60/36 */
  --text-h2:      clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); /* 40/28 */
  --text-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);  /* 24/20 */
  --text-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.25rem);  /* 20/18 */
  --text-body:    1rem;       /* 16 */
  --text-small:   0.875rem;   /* 14 */
  --text-caption: 0.75rem;    /* 12 — tylko metadane, nigdy treść */

  --leading-tight: 1.15;  /* nagłówki */
  --leading-snug:  1.3;   /* lead */
  --leading-body:  1.6;   /* body */

  --font-regular: 400;
  --font-medium:  500;
  --font-semibold: 600;
  --font-bold:    700;
  --tracking-heading: -0.015em;
  --tracking-caps: 0.08em;   /* etykiety uppercase (eyebrow) */

  /* --- SPACING (skala 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-py: clamp(4rem, 3rem + 4vw, 7rem);  /* pion sekcji */

  /* --- LAYOUT --- */
  --container-max: 1240px;
  --container-px: clamp(1.25rem, 4vw, 2.5rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* --- RADIUS / ELEVATION ---
     Brand jest klasyczny i instytucjonalny — promienie umiarkowane. */
  --radius-sm: 6px;    /* inputy, tagi */
  --radius-md: 12px;   /* karty, CTA */
  --radius-lg: 20px;   /* duże panele, obrazy hero */
  --shadow-card: 0 1px 2px rgb(16 29 69 / 0.06), 0 8px 24px rgb(16 29 69 / 0.08);
  --shadow-card-hover: 0 2px 4px rgb(16 29 69 / 0.08), 0 16px 40px rgb(16 29 69 / 0.14);

  /* --- MOTION --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;   /* hover, focus */
  --dur-base: 320ms;   /* wejścia elementów */
  --dur-slow: 640ms;   /* hero, duże panele */

  /* --- Z-INDEX --- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-overlay: 900;
}

/* Kontrasty zweryfikowane programatycznie (WCAG 2.1, luminancja względna):
   #192D67 na #FFFFFF  → 13.02:1  ✓ AAA (tekst, nagłówki)
   #FFFFFF na #101D45  → 16.36:1  ✓ AAA (tekst w sekcjach dark)
   #0057A0 na #FFFFFF  →  7.31:1  ✓ AAA (linki)
   #44474E na #FFFFFF  →  9.30:1  ✓ AAA (tekst drugorzędny)
   #6A6A69 na #FFFFFF  →  5.41:1  ✓ AA  (metadane, daty)
   #1E9E8E na #FFFFFF  →  3.31:1  ✗ dla tekstu normalnego — używać
     wyłącznie jako kolor ikon/dekoracji (AA dla elementów graficznych
     wymaga 3:1 — spełnione) lub tekst large bold. */