/* Malarto Design System — tokeny
   Źródło: wireframes/mvp/css/prototype.css (Malarto Design, 2026-09).
   Nazwy tokenów odpowiadają slugom w theme.json (np. --wp--preset--color--glaze),
   więc ten sam zestaw wartości działa w prototypie i w motywie WordPress. */
:root {
  /* Kolory marki */
  --malarto-ink: #302c28;        /* tekst, stopka, aktywne chipy */
  --malarto-paper: #faf8f3;      /* tło strony */
  --malarto-white: #ffffff;      /* karty, nagłówek */
  --malarto-line: #ddd7ce;       /* obramowania, separatory */
  --malarto-muted: #6d6760;      /* tekst pomocniczy */
  --malarto-glaze: #d65029;      /* akcent główny: CTA, kicker */
  --malarto-glaze-dark: #c63b1c; /* hover CTA, etykiety formatu */
  --malarto-wash: #f7e5dd;       /* jasne tło akcentu, odznaki, sekcje */
  --malarto-sun: #ffb51b;        /* focus, numery kroków, akcent w stopce */
  --malarto-cream: #fff8d9;      /* tło powiadomień */
  --malarto-honey: #ffe7a0;      /* sekcja „dla kogo” */
  --malarto-sand: #f5f1ea;       /* karta miejsca, pasek najbliższego terminu */
  --malarto-danger: #b32d2e;
  --malarto-success: #28774e;   /* potwierdzona płatność, zaakceptowany nagłówek maila 1A */
  --malarto-danger-wash: #fcf0f1;
  --malarto-sold: #f3d3d3;
  --malarto-sold-ink: #721c1c;
  --malarto-warn: #fff2c2;

  /* Typografia */
  --malarto-font-sans: "Rubik", "Segoe UI", Arial, sans-serif;
  --malarto-text-base: 16px;
  --malarto-leading-base: 1.55;
  --malarto-size-xs: 12px;   /* kicker, hint, odznaki */
  --malarto-size-sm: 14px;   /* meta, etykiety pól, tabele */
  --malarto-size-md: 16px;
  --malarto-size-lg: 20px;   /* h3, lede */
  --malarto-size-price: 34px;
  --malarto-size-h2: clamp(24px, 3vw, 34px);
  --malarto-heading-measure: min(36ch, 660px);
  --malarto-size-h1: clamp(42px, 7vw, 78px);
  --malarto-size-h1-page: clamp(32px, 4vw, 48px);
  --malarto-weight-body: 400;
  --malarto-weight-semibold: 650;
  --malarto-weight-bold: 700;
  --malarto-weight-heavy: 800;
  --malarto-shadow-hover: 0 6px 16px rgba(48, 44, 40, .14);
  --malarto-radius-nested: 6px;      /* wewnętrzny promień w kartach (koncentryczny, min 6px) */
  /* Ruch układu przy zmianie szerokości: jedno wyczucie czasu dla całego kitu (atom .m-fluid). */
  --malarto-motion-ease: cubic-bezier(.32, .72, 0, 1);
  --malarto-motion-fast: 180ms;
  --malarto-motion-base: 260ms;
  --malarto-tracking-tight: -0.025em;
  --malarto-tracking-caps: 0.11em;

  /* Odstępy */
  --malarto-s1: 4px;
  --malarto-s2: 8px;
  --malarto-s3: 12px;
  --malarto-s4: 16px;
  --malarto-s5: 24px;
  --malarto-s6: 32px;
  --malarto-s7: 48px;
  --malarto-s8: 64px;   /* padding sekcji */

  /* Kształt i cień */
  --malarto-radius: 12px;
  --malarto-radius-sm: 8px;
  --malarto-radius-lg: 18px;
  --malarto-radius-pill: 999px;
  --malarto-shadow-card: 0 8px 28px rgba(48, 44, 40, .06);
  --malarto-shadow-float: 0 8px 24px rgba(29, 36, 32, .08);
  /* Wskazanie skupienia tylko dla klawiatury (:focus-visible) i bez zoltej obwodki — myszka nie zostawia sladu. */
  --malarto-focus: 2px solid var(--malarto-ink);

  /* Układ */
  /* Margines strony: 2 x 16 px na telefonie, 2 x 40 px od laptopa w górę. */
  --malarto-gutter: clamp(32px, 5vw, 80px);
  --malarto-max: 1180px;
  --malarto-content: 760px;
  --malarto-control-h: 44px;
  --malarto-control-h-sm: 40px;
  --malarto-control-h-lg: 52px;
}