/* ===========================================================================
   Tokeny — jedyne miejsce z wartościami kolorów, skali i odstępów.
   Nowe sekcje raportu korzystają wyłącznie z nich.
   =========================================================================== */

:root {
  /* — Kolory marki ———————————————————————————————————————
     Podstawa: #233361 (główny) i #5ABBC1 (dopełniający).
     Odcienie wyprowadzone z tych dwóch — nie dokładamy nowych hexów. */
  --navy-950: #11214E;  /* najciemniejszy — tło sekcji z wykresami */
  --navy-900: #16203D;
  --navy-800: #1B2850;
  --navy-700: #233361;  /* ← główny */
  --navy-600: #2E4380;
  --navy-500: #3C5599;
  --navy-ink: #233361;  /* nagłówki na białym */

  --teal-800: #2E767B;  /* drobny tekst na bieli — AA (5,26) */
  --teal-700: #35878C;
  --teal-600: #47A2A8;
  --teal-500: #5ABBC1;  /* ← dopełniający */
  --teal-400: #7BC9CE;
  --teal-300: #9CD7DB;
  --teal-200: #C2E7E9;
  --teal-100: #E8F6F7;

  --white: #ffffff;
  --surface-muted: #F2F5F9;   /* ramka z danymi o badaniu */
  --text: #3C4759;
  --text-muted: #6B7689;
  --border: #E3E8EF;

  /* — Kolory pięciu grup społecznych ————————————————————————
     Dobrane tak, żeby liczba procentowa przechodziła próg kontrastu
     na bieli. Czysty #5ABBC1 daje 2,25, stąd przyciemniony wariant. */
  --tone-innovator: #3C5599;
  --tone-guardian:  #11214E;
  --tone-pragmatic: #35878C;
  --tone-caregiver: #21847F;
  --tone-bystander: #5C9160;

  /* — Gradienty ————————————————————————————————————————— */
  --grad-hero: linear-gradient(112deg,
                #1B2850 0%,
                #233361 30%,
                #35708F 64%,
                #5ABBC1 100%);
  --grad-badge: linear-gradient(90deg, var(--teal-500) 0%, var(--navy-700) 100%);
  --grad-mark: linear-gradient(180deg, transparent 55%, var(--teal-200) 55%);

  /* Przycisk CTA — jasny turkus na samej krawędzi, szybko ciemnieje.
     Turkus mieści się w wyściółce; pod napisem jest już >= #2E7387,
     na którym biel daje 5,36. Na pełnym turkusie byłoby 2,25. */
  --grad-cta: linear-gradient(95deg,
                #5ABBC1 0%,
                #3E8E99 8%,
                #2E7387 16%,
                #233361 100%);

  /* Kółka z numerami przy rekomendacjach. Biała cyfra ląduje w środku,
     gdzie gradient jest już wystarczająco ciemny (kontrast 4,9). */
  --grad-step: linear-gradient(150deg, #5ABBC1 0%, #233361 85%);

  /* Karta „szkoła do życia": turkus u góry, granat u dołu.
     Góra zatrzymana na #3E8E99, bo na czystym #5ABBC1 biały nagłówek
     miałby kontrast 2,53 — czyli praktycznie nieczytelny. */
  --grad-vision: linear-gradient(180deg, #3E8E99 0%, #233361 100%);

  /* Sekcja z wykresami: nasz turkus z obniżonym kryciem, położony na
     najciemniejszym granacie. Krycie rośnie ku dołowi — stąd całość
     zostaje w palecie i nie pojawia się żaden obcy kolor pośredni.
     Środek trzymany na 0.22, żeby turkusowe "razem" pozostało czytelne;
     mocny turkus dopiero na dole, pod ramką z podsumowaniem. */
  --grad-dark: linear-gradient(172deg,
                 rgba(90, 187, 193, 0.05) 0%,
                 rgba(90, 187, 193, 0.22) 55%,
                 rgba(90, 187, 193, 0.50) 100%),
               var(--navy-950);

  /* Panel slidera: granat z turkusową poświatą w prawym dolnym rogu.
     Krycie 0.45 to kompromis — przy 0.55 dłuższy tytuł sięgający
     w prawo schodził poniżej progu kontrastu. */
  --grad-panel: radial-gradient(85% 105% at 100% 100%,
                  rgba(90, 187, 193, 0.45) 0%,
                  rgba(90, 187, 193, 0) 62%),
                linear-gradient(150deg, #233361 0%, #1B2850 100%);

  /* Druga seria słupków na ciemnym tle — chłodny błękitny szary.     Ciemniejszy niż w projekcie, żeby biała liczba na nim była czytelna. */
  --bar-soft-dark: #63748F;

  /* — Typografia —————————————————————————————————————————
     Jeden krój na całej stronie: Montserrat.
     Zostawiam dwie zmienne, bo nagłówki i tekst mogą się kiedyś rozejść. */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Skala płynna — clamp(min, preferowane, max).
     Montserrat jest szerszy i ma wyższy x-height niż Lato,
     więc te same wartości czytają się większe. */
  --fs-hero: clamp(3rem, 9vw, 6.5rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1.45vw, 1.2rem);
  --fs-body: clamp(0.9875rem, 1.15vw, 1.0938rem);
  --fs-small: 0.875rem;   /* 14 px — wykresy, stopka, sekcja pobrania, formularz */
  --fs-label: 0.8125rem;

  --lh-tight: 1.05;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  /* — Layout ——————————————————————————————————————————— */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* Skala odstępów (8px base) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  --section-gap: clamp(3.5rem, 8vw, 7rem);

  /* — Kształt ——————————————————————————————————————————— */
  --radius-pill: 999px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px rgba(35, 51, 97, 0.07);
  --shadow-md: 0 12px 32px rgba(35, 51, 97, 0.12);
  --shadow-lg: 0 24px 60px rgba(35, 51, 97, 0.18);

  /* — Ruch ——————————————————————————————————————————————— */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 320ms;
}