/* ============================================================
   Fryzjer Kasia: design tokens
   Kierunek: "spokojnie i naturalnie" (beż, mchowa zieleń, papier)
   Próbka klienta: #dcd3c2 / #5c7351 / #f6f1e6
   ============================================================ */

:root {
  /* ---- kolor: papier ---- */
  --paper-050: #faf7f0;
  --paper-100: #f6f1e6; /* próbka klienta */
  --paper-200: #efe8d8;
  --paper-300: #e5dcc9;
  --linen-400: #dcd3c2; /* próbka klienta */
  --linen-500: #c8bda6;

  /* ---- kolor: mech ---- */
  --moss-300: #a8b79c;
  --moss-400: #8b9d80;
  --moss-500: #6c845f;
  --moss-600: #5c7351; /* próbka klienta */
  --moss-700: #4a5e41;
  --moss-800: #3b4b35;
  --bark-900: #26301f;
  --bark-950: #1a2216;

  /* ---- kolor: tekst ---- */
  --ink: #33362b;
  --ink-soft: #63665a;
  --ink-faint: #8a8d80;
  --cream: #f2ede0;
  --cream-soft: #d9d3c2;

  /* ---- role ---- */
  --bg: var(--paper-050);
  --bg-alt: var(--paper-100);
  --bg-dark: var(--bark-900);
  --rule: var(--linen-400);
  --accent: var(--moss-600);
  --accent-deep: var(--moss-800);

  /* ---- typografia ---- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Karla", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-eyebrow: clamp(0.7rem, 0.66rem + 0.18vw, 0.78rem);
  --fs-small: clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --fs-body: clamp(1rem, 0.96rem + 0.26vw, 1.09rem);
  --fs-lede: clamp(1.1rem, 1.02rem + 0.5vw, 1.32rem);
  --fs-h3: clamp(1.22rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.85rem, 1.4rem + 2.1vw, 3.05rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 4.6vw, 5.5rem);
  --fs-num: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);

  --lh-tight: 1.04;
  --lh-snug: 1.22;
  --lh-body: 1.65;
  --track-eyebrow: 0.18em;
  --track-display: -0.015em;

  /* ---- przestrzeń (8pt) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 5.5rem;
  --sp-8: 7.5rem;
  --section-y: clamp(3.75rem, 2.4rem + 5.4vw, 7.5rem);
  --container: 1180px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --header-h: 76px;

  /* ---- promienie i cienie ---- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(38, 48, 31, 0.04), 0 12px 28px -18px rgba(38, 48, 31, 0.28);
  --shadow-lift: 0 2px 4px rgba(38, 48, 31, 0.06), 0 26px 50px -26px rgba(38, 48, 31, 0.4);

  /* ---- ruch ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-mid: 320ms;
  --dur-slow: 720ms;

  /* ---- sygnatura: grzebień (comb-rule) ---- */
  --comb-tooth: var(--moss-500);
  --comb-base: var(--linen-400);
  --comb-gap: 7px;
  --comb-w: 1.6px;
  --comb-h: 10px;
}