/* ==========================================================================
   tokens.css — Gabinet Kosmetologii Lidia
   Tylko zmienne. Żadnej reguły, która cokolwiek rysuje.

   Kierunek z onboardingu: "czysto i minimalistycznie", próbka #ffffff /
   #eaeaea / #111111. Paleta trzyma się tej próbki: papier jest czystą bielą,
   linie siedzą przy #eaeaea, tekst przy #111111. Jedyny kolor na stronie to
   stłumiony fiolet lampy diagnostycznej (--uv), użyty w kilku miejscach i
   nigdzie jako tło dużej płaszczyzny.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------- kolory */
  --paper: #ffffff;
  --paper-2: #f5f5f3;
  --paper-3: #ecebe7;

  --line: #e6e6e2;
  --line-2: #d6d6d0;
  --line-3: #bdbdb6;

  --ink: #141414;
  --ink-2: #3c3c3a;
  --ink-3: #6d6d68;
  --ink-4: #93938d;

  --deep: #17191b;          /* ciemna płaszczyzna: stopka, scrim */
  --deep-2: #212427;

  --uv: #5c4c7d;            /* fiolet lampy, jedyny akcent */
  --uv-2: #776699;
  --uv-tint: #edeaf3;

  --on-deep: #f4f3f0;
  --on-deep-2: #b9b7b2;

  /* ------------------------------------------------------------ typo */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  --fs-micro: 0.6875rem;
  --fs-label: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.6vw, 1.625rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  --fs-h1: clamp(2.1875rem, 1.55rem + 3.1vw, 4.125rem);
  --fs-stat: clamp(3rem, 2rem + 4.6vw, 6rem);

  --lh-tight: 1.06;
  --lh-head: 1.14;
  --lh-body: 1.68;
  --tracking-label: 0.16em;
  --tracking-wide: 0.04em;

  /* --------------------------------------------------------- przestrzeń */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;
  --sp-10: 120px;

  --section-y: clamp(72px, 8.5vw, 136px);
  --container: 1180px;
  --container-narrow: 860px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ------------------------------------------------------------ forma */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  --shadow-soft: 0 1px 2px rgba(20, 20, 20, 0.04), 0 10px 30px rgba(20, 20, 20, 0.05);
  --shadow-lift: 0 2px 4px rgba(20, 20, 20, 0.05), 0 18px 46px rgba(20, 20, 20, 0.09);
  --shadow-inset-line: inset 0 0 0 1px var(--line);

  /* ------------------------------------------------------------ ruch */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;
  --t-slow: 720ms;
}