/* ==========================================================================
   Klinika MS: tokeny designu
   Kolory: szablon Heltro (heltro.webflow.io).
   Kroje pisma: szablon Merido (merido-template.webflow.io).
   Skala, odstępy, promienie, cienie i animacje: RoxCare.
   Znak: brandbook MSCentrum.
   Uzasadnienia i pomiary kontrastu: docs/DESIGN-SYSTEM.md
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Kolory */

  /* Marka: paleta "sliwka i piasek", wyprowadzona ze zdjec sesyjnych.
     Fartuchy maja #CE9EAD, sukienka #E6C7BB, tlo studia #DED1CD. Odcien
     rodziny to 335 stopni, zmienia sie jasnosc i nasycenie. Granat wyszedl
     z palety na zyczenie klienta. */
  --c-brand:            #6E3350;  /* primary: przyciski, naglowki, linki.
                                     Biel na nim ma 9,32:1 */
  --c-brand-light:      #C88AA0;  /* jasny roz, dekoracja: linia w hero,
                                     wstegi. Na bieli 2,76:1, wiec nigdy
                                     pod tekst */
  --c-brand-dark:       #52243C;  /* hover i pierscien focus, biel 12,53:1 */
  --c-mint:             #7A8F6E;  /* drugi akcent, szalwia, 4,90:1 na bieli */
  --c-hero:             #6E3350;  /* baza ciemnych sekcji */

  /* Tekst */
  --c-ink:              #2A1B22;  /* najciemniejszy, stopka i pasek, 14,4:1 */
  --c-text:             #5C4A52;  /* tekst akapitowy, 8,21:1 */
  --c-muted:            #6E5A62;  /* podpisy i metadane, 6,36:1 */
  --c-muted-light:      #9A8A90;  /* ponizej progu, WYLACZNIE dekoracja */
  --c-navy:             #2A1B22;  /* ciemne sekcje */
  --c-footer:           #2A1B22;  /* stopka */
  --c-accent-text:      #8E3F60;  /* slowa akcentowane, 6,93:1 na bieli */

  /* Tla */
  --c-surface:          #FFFFFF;
  --c-surface-alt:      #F7F1ED;  /* cieply piasek, sekcje przeplatane */
  --c-bg:               #FFFFFF;

  /* Stany */
  --c-success:          #2F7A56;
  --c-warning:          #8A4E05;
  --c-danger:           #B02B3A;

  /* Kontrast na ciemnym. Ciemne hero to gradient #52243C do #7E3A5C,
     wiec prog trzyma najjasniejszy koniec. */
  --c-on-dark:          #FFFFFF;  /* 9,32:1 na --c-hero */
  --c-on-dark-muted:    #E8C9D3;  /* 10,74:1 na stopce, 6,09:1 na --c-hero */
  --c-on-dark-accent:   #E8C9D3;  /* nadtytuly i wyroznienia na ciemnym */

  /* Obramowania */
  --c-border:           #EDE3E1;
  --c-border-strong:    #D8C6C8;

  /* ------------------------------------------------------------ Typografia */

  /* Merido prowadzi wszystko na Hind. Rufina jest w nim wczytana, ale
     nigdzie nie użyta, więc jej nie bierzemy. Hind ma podzbiór latin-ext,
     czyli komplet polskich znaków (sprawdzone w CSS Google Fonts). */
  --font-heading: "Hind", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Hind", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Skala z kitu: 72 / 60 / 46 / 36 / 30 / 24 / 18 / 16 / 14 */
  --fs-display: 4.5rem;    /* 72px, hero */
  --fs-h1:      3.75rem;   /* 60px */
  --fs-h2:      2.875rem;  /* 46px */
  --fs-h3:      2.25rem;   /* 36px */
  --fs-h4:      1.875rem;  /* 30px */
  --fs-h5:      1.5rem;    /* 24px */
  --fs-h6:      1.125rem;  /* 18px */
  --fs-body:    1rem;      /* 16px */
  --fs-small:   0.875rem;  /* 14px */

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-h5:      1.3;
  --lh-h6:      1.4;
  --lh-body:    1.5;
  --lh-prose:   1.7;       /* dodane: 1.5 jest za ciasne dla długich tekstów */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-heading:  700;   /* Merido prowadzi nagłówki na 700 */
  --fw-bold:     700;

  /* ---------------------------------------------------------------- Odstępy */

  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.9375rem; /* 15px, z kitu */
  --sp-4:  1.25rem;   /* 20px, z kitu */
  --sp-5:  1.5625rem; /* 25px, z kitu */
  --sp-6:  1.875rem;  /* 30px, z kitu */
  --sp-8:  2.5rem;    /* 40px */
  --sp-10: 3.125rem;  /* 50px */
  --sp-12: 3.75rem;   /* 60px */
  --sp-16: 5rem;      /* 80px, padding sekcji w kicie */
  --sp-20: 6.25rem;   /* 100px */

  --section-py:        var(--sp-16);
  --section-py-mobile: var(--sp-10);

  /* --------------------------------------------------------------- Promienie */

  --r-sm:   8px;
  --r-md:   15px;
  --r-lg:   20px;   /* dominujący w kicie, karty i obrazy */
  --r-pill: 50px;   /* przyciski */
  --r-full: 50%;    /* awatary, ikony okrągłe */

  /* ------------------------------------------------------------------ Cienie */

  --sh-card:  0 0 30px rgba(0, 0, 0, 0.10);  /* sygnaturowy cień kitu */
  --sh-soft:  0 0 20px rgba(0, 0, 0, 0.06);
  --sh-lift:  0 20px 45px rgba(42, 27, 34, 0.16);  /* hover karty */
  --sh-brand: 0 12px 28px rgba(110, 51, 80, 0.28);

  /* ------------------------------------------------------------------ Ruch */

  --t-fast:  0.2s;
  --t-base:  0.3s;   /* kolor, tło, obramowanie, cień */
  --t-slow:  0.4s;   /* transform */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);

  --anim-duration: 0.7s;
  --anim-distance: 32px;

  /* ------------------------------------------------------------------ Układ */

  --container:      1200px;
  --container-prose: 800px;
  --gutter:         var(--sp-4);
  --header-h:       80px;   /* znak 84px szerokosci to 55px wysokosci plus oddech */

  /* Warstwy */
  --z-header:  100;
  --z-dropdown: 200;
  --z-modal:   400;
}

/* Skala responsywna: hero i nagłówki zjeżdżają na węższych ekranach.
   Kit renderuje H1 jako 46px poniżej desktopu, my robimy to płynnie. */
@media (max-width: 1024px) {
  :root {
    --fs-display: 3.25rem;  /* 52px */
    --fs-h1:      2.875rem; /* 46px */
    --fs-h2:      2.25rem;  /* 36px */
    --fs-h3:      1.875rem; /* 30px */
    --fs-h4:      1.5rem;   /* 24px */
    --section-py: var(--section-py-mobile);
  }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 2.5rem;   /* 40px */
    --fs-h1:      2.125rem; /* 34px */
    --fs-h2:      1.75rem;  /* 28px */
    --fs-h3:      1.5rem;   /* 24px */
    --fs-h4:      1.3125rem;/* 21px */
    --fs-h5:      1.1875rem;/* 19px */
  }
}