/* ==========================================================================
   tokens.css — Pracownia Ceramiki Glina
   Kierunek: ciepło i rzemieślniczo. Drewno, ciemna zieleń szkliwa, glina.
   Próbka klientki: #3a2a1a (brąz), #c99a5b (ochra), #f2e8d5 (krem).
   Zielona skala to „ciemna zieleń" z tego samego wyboru, zestrojona do
   odcienia szkliwa miedziowego, żeby strona nie była samym brązem na kremie.
   Tylko zmienne. Żadnej reguły, która cokolwiek rysuje.
   ========================================================================== */

:root {
  /* --- glina i atrament ------------------------------------------------ */
  --ink-900: #1C1510;
  --ink-800: #241A12;
  --clay-700: #3A2A1A;
  --clay-600: #4E3828;
  --clay-500: #6B5240;
  --clay-400: #8A7260;

  /* --- szkliwo miedziowe, ciemna zieleń -------------------------------- */
  --glaze-900: #16231C;
  --glaze-800: #1E3127;
  --glaze-700: #2A4335;
  --glaze-600: #3A5A47;
  --glaze-500: #52755E;

  /* --- ochra, jedyny akcent -------------------------------------------- */
  --ochre-400: #DCB782;
  --ochre-500: #C99A5B;
  --ochre-600: #B07F42;
  --ochre-700: #8F6429;

  /* --- papier ----------------------------------------------------------- */
  --cream-50: #FCF8F0;
  --cream-100: #F8F1E3;
  --cream-200: #F2E8D5;
  --cream-300: #E8DAC2;
  --cream-400: #D9C6A8;

  /* --- role ------------------------------------------------------------- */
  --bg: var(--cream-100);
  --bg-alt: var(--cream-200);
  --surface: var(--cream-50);
  --text: var(--clay-700);
  --text-soft: var(--clay-500);
  --text-invert: var(--cream-100);
  --text-invert-soft: rgba(248, 241, 227, 0.78);
  --accent: var(--ochre-600);
  --accent-on-dark: var(--ochre-400);
  --line: rgba(58, 42, 26, 0.16);
  --line-strong: rgba(58, 42, 26, 0.32);
  --line-invert: rgba(248, 241, 227, 0.22);

  /* --- pismo ------------------------------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fraunces: miękkie, lekko krzywe litery. WONK to oś, która psuje symetrię
     liter dokładnie tak, jak koło psuje symetrię toczonego kubka. */
  --display-settings: "SOFT" 60, "WONK" 1;

  --fs-hero: clamp(2.5rem, 6.2vw, 5rem);
  --fs-h2: clamp(1.9rem, 3.5vw, 2.95rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.28rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono-lg: clamp(1.4rem, 2.2vw, 1.85rem);

  --lh-tight: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.66;
  --ls-stamp: 0.16em;
  --ls-display: -0.015em;

  /* --- rytm (8pt) -------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --container: 1180px;
  --container-narrow: 820px;
  --header-h: 76px;

  /* --- kształt ----------------------------------------------------------- */
  /* Promień „miski": góra prawie ostra, dół szeroko zaokrąglony. Sylwetka
     naczynia toczonego na kole, nie domyślny prostokąt 8px. */
  --r-bowl: 8px 8px 34px 34px;
  --r-sm: 4px;
  --r-md: 10px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(28, 21, 16, 0.06), 0 6px 18px rgba(28, 21, 16, 0.07);
  --sh-2: 0 2px 6px rgba(28, 21, 16, 0.1), 0 20px 50px rgba(28, 21, 16, 0.16);
  --sh-stamp: inset 0 2px 0 rgba(28, 21, 16, 0.14), inset 0 -1px 0 rgba(252, 248, 240, 0.5);

  /* --- sygnatura: ślady toczenia ----------------------------------------- */
  --ring-gap: 13px;
  --ring-w: 1px;
  --ring-ink: rgba(58, 42, 26, 0.17);
  --ring-ink-invert: rgba(248, 241, 227, 0.16);

  /* --- ruch --------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 0.22s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;
}