/* Hotkix design tokens (CSS). Odzwierciedla design/tokens.json.
   2026-11-01: kolory i fonty wg brandbooka v1.1 (turkus Volt, Saira Condensed + Barlow), zaakceptowane przez właściciela.
   Pomarańcz z v1.0 usunięty. Stare nazwy (--mk-charcoal, --mk-text-2, --mk-accent, --mk-red) zostają jako aliasy,
   żeby podglądy działały bez przepisywania; w fazie 3 kod używa tylko nowych nazw. */
:root {
  /* Paleta brandbooka v1.1 */
  --mk-volt: #19B5E6;          /* akcent, CTA (tło); tekst na nim zawsze --mk-on-accent; NIGDY tekst na białym (2,4:1) */
  --mk-deep: #0A86B4;          /* hover CTA (z czarnym tekstem 4,5:1); jako tekst tylko duży (4,1:1 na białym) */
  --mk-ice: #8FE3FF;           /* jasne tła sekcji i plakietek, tekst czarny */
  --mk-moto: #121212;          /* tekst, logo, ciemne tła */
  --mk-track: #6E6760;         /* tekst pomocniczy (5,6:1 na białym) */
  --mk-white: #FFFFFF;
  --mk-off-white: #F7F7F5;
  --mk-light-grey: #F0F0EE;
  --mk-silver: #C0C0C0;
  --mk-border: #E7E7E5;
  --mk-border-control: #8C8C8C;
  --mk-error: #B3261E;         /* błąd formularza: ciemna czerwień, odróżnialna od turkusu (6,5:1 na białym) */
  --mk-on-accent: var(--mk-moto);  /* tekst i ikony na volt / deep / ice */
  --mk-link-underline: var(--mk-volt);

  /* Aliasy zgodności (podglądy z v1.0) */
  --mk-charcoal: var(--mk-moto);
  --mk-text-2: var(--mk-track);
  --mk-accent: var(--mk-volt);
  --mk-accent-hover: var(--mk-deep);
  --mk-red: var(--mk-accent);
  --mk-red-hover: var(--mk-accent-hover);

  --mk-font-heading: "Saira Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --mk-font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;

  --mk-display: clamp(44px, 6.4vw, 96px);
  --mk-h1: clamp(36px, 4.6vw, 64px);
  --mk-h2: clamp(28px, 3.2vw, 44px);
  --mk-h3: 24px;
  --mk-h4: 19px;

  --mk-s1: 4px; --mk-s2: 8px; --mk-s3: 12px; --mk-s4: 16px; --mk-s5: 24px;
  --mk-s6: 32px; --mk-s7: 48px; --mk-s8: 64px; --mk-s9: 96px; --mk-s10: 128px;

  --mk-section: 64px;
  --mk-margin: 16px;
  --mk-gutter: 16px;
  --mk-max: 1440px;

  --mk-radius-control: 6px;
  --mk-shadow-overlay: 0 12px 40px rgba(18, 18, 18, 0.16);
  --mk-ease: cubic-bezier(0.2, 0, 0, 1);
  --mk-fast: 140ms;
  --mk-base: 240ms;
}
@media (min-width: 768px) {
  :root { --mk-margin: 32px; --mk-gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --mk-margin: 56px; --mk-gutter: 32px; --mk-section: 112px; }
}