/* ==========================================================================
   Tokeny projektu — jedyne zrodlo kolorow, typografii i rytmu odstepow.
   Wartosci startowe pochodza z HANDOFF_MOCKUP_V2; skalibrowane przez
   porownanie z MOCKUP_ZATWIERDZONY_MM_v2.png (patrz komentarze).
   ========================================================================== */

:root {
  /* --- kolor ------------------------------------------------------------ */
  --color-ink: #0B2439;          /* granat: przyciski, tekst na jasnym tle */
  --color-ink-deep: #071A2A;     /* overlay Hero, dolne gradienty */
  /* Skalibrowane z mockupu: duze granatowe plaszczyzny (header, 4 Momente,
     stopka, pas obszaru dzialania) sa tam odrobine jasniejsze niz --color-ink. */
  --color-ink-surface: #142F43;
  --color-paper: #F8F6F1;        /* glowne tlo strony */
  --color-paper-warm: #EEE7DB;   /* Pflegeplan, pas Google */
  --color-text: #183046;
  --color-muted: #627180;
  /* Na cieplym panelu #EEE7DB --color-muted daje 4,08:1 — tu uzywamy ciemniejszego. */
  --color-muted-on-warm: #55657A;
  --color-line: #D9DCE0;
  --color-sand: #D9B889;
  --color-sand-soft: #E7D3B5;
  --color-white: #FFFFFF;
  --color-error: #B42318;

  /* teksty na granacie */
  --color-on-ink: #FFFFFF;
  --color-on-ink-muted: #C8D3DE;

  /* --- typografia ------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step-h1: clamp(2.6rem, 5vw, 4.5rem);      /* 42 -> 72 px */
  --step-h2: clamp(2rem, 3.75vw, 3.5rem);     /* 32 -> 54 px */
  --step-h3: clamp(1.75rem, 3.4vw, 3.1rem);   /* 28 -> 49 px */
  --step-lede: clamp(1.15rem, 1.5vw, 1.55rem);
  --step-body: 1rem;
  --step-small: .875rem;
  --step-label: .6875rem;                      /* 11px etykiety */

  /* --- rytm ------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* Mockup v2 uklada strone z blokow oddzielonych waskimi przerwami,
     a "oddech" powstaje wewnatrz blokow — dlatego NIE stosujemy 112 px
     paddingu w kazdej sekcji. */
  --block-gap: 24px;
  --block-pad-y: 24px;

  --content-max: 1440px;
  --gutter: 38px;
  --gutter-mobile: 20px;

  --radius-card: 10px;
  --radius-control: 8px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 36px rgba(11, 36, 57, .08);
  --shadow-header: 0 2px 14px rgba(7, 26, 42, .18);

  --header-h: 86px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 350ms;
  --dur-slow: 450ms;

  color-scheme: light;
}

@media (max-width: 1023px) {
  :root {
    --gutter: 24px;
    --block-pad-y: 44px;
    --header-h: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-mobile);
    --block-gap: 16px;
    --block-pad-y: 36px;
  }
}