/* Master Fishing CRM | tokens.css – tokeny marki 1:1 z redesignu sklepu (redesign/design-system.md).
   Właściciel: A2 (design system). Nie zmieniaj wartości marki; dodawaj tokeny aplikacji na końcu. */

:root {
  /* ---------- MARKA (OKLCH h=237.5, baza #1597D5 = 500) ----------
     500 to kolor rozpoznawczy: akcenty, ikony, duze elementy, obrys focus.
     Tekst i tla przyciskow z bialym tekstem: 600 lub ciemniej (AA). */
  --mf-brand-50:  #eef9ff;
  --mf-brand-100: #d8f1ff;
  --mf-brand-200: #b5e4ff;
  --mf-brand-300: #83cefd;
  --mf-brand-400: #49b3ef;
  --mf-brand-500: #1597d5; /* 3.27:1 na bialym - tylko duzy tekst / grafika / UI */
  --mf-brand-600: #007cb3; /* 4.63:1 - tlo przycisku glownego z bialym tekstem */
  --mf-brand-700: #006594; /* 6.38:1 - linki, hover przycisku */
  --mf-brand-800: #004d72; /* 9.11:1 - :active, linki hover */
  --mf-brand-900: #013752;
  --mf-brand-950: #012133;

  /* ---------- NEUTRALNE (chlodne, zabarwione odcieniem marki) ---------- */
  --mf-gray-0:   #ffffff;
  --mf-gray-25:  #f8fafc;
  --mf-gray-50:  #f2f6f8;
  --mf-gray-100: #e9eef1;
  --mf-gray-200: #dae1e5;
  --mf-gray-300: #c4ccd1;
  --mf-gray-400: #9da6ac;
  --mf-gray-500: #788288; /* 3.93:1 - obramowania pol (min. 3:1), NIE tekst */
  --mf-gray-600: #616a71; /* 5.51:1 - najjasniejszy dozwolony tekst */
  --mf-gray-700: #485158;
  --mf-gray-800: #30393f;
  --mf-gray-900: #1b2328;
  --mf-gray-950: #0e1519;

  /* ---------- SEMANTYCZNE ---------- */
  --mf-success-50:  #ecf8f0;
  --mf-success-600: #1d7d3e; /* 5.18:1 */
  --mf-success-700: #1d6835;
  --mf-warning-50:  #fff6e5;
  --mf-warning-500: #f9ad26; /* tlo z tekstem --mf-gray-950 (9.3:1) */
  --mf-warning-700: #905211; /* 6.17:1 - tekst ostrzezenia */
  --mf-error-50:    #fdeeee;
  --mf-error-600:   #c92324; /* 5.60:1 */
  --mf-error-700:   #ac1a1c;
  --mf-promo-50:    #fdeced;
  --mf-promo-600:   #d4212d; /* 5.18:1 - cena promocyjna, flaga promocji, % rabatu */
  --mf-promo-700:   #b0161f;
  --mf-oos-600:     #5c656b; /* 5.95:1 - "Brak w magazynie" */

  /* ---------- ROLE (uzywaj ich zamiast surowych odcieni) ---------- */
  --mf-bg:              var(--mf-gray-0);
  --mf-bg-subtle:       var(--mf-gray-50);   /* tlo sekcji, pas pod zdjeciem */
  --mf-surface:         var(--mf-gray-0);    /* karty, panele */
  --mf-surface-sunken:  var(--mf-gray-25);   /* pola, tla zdjec produktow */
  --mf-surface-inverse: var(--mf-gray-900);
  --mf-border:          var(--mf-gray-200);  /* dekoracyjne linie, karty */
  --mf-border-strong:   var(--mf-gray-300);
  --mf-border-control:  var(--mf-gray-500);  /* pola formularzy (3:1, WCAG 1.4.11) */
  --mf-text:            var(--mf-gray-900);  /* 15.9:1 */
  --mf-text-strong:     var(--mf-gray-950);
  --mf-text-muted:      var(--mf-gray-600);  /* 5.5:1 */
  --mf-text-inverse:    var(--mf-gray-0);
  --mf-text-on-brand:   #ffffff;             /* na --mf-brand-600+ */
  --mf-link:            var(--mf-brand-700);
  --mf-link-hover:      var(--mf-brand-800);
  --mf-accent:          var(--mf-brand-500);
  --mf-focus:           var(--mf-brand-600); /* 4.6:1 na bialym, 3:1+ na --mf-bg-subtle */
  --mf-focus-ring:      0 0 0 2px var(--mf-bg), 0 0 0 4px var(--mf-focus);

  --mf-price:           var(--mf-gray-950);
  --mf-price-sale:      var(--mf-promo-600);
  --mf-price-old:       var(--mf-gray-600);

  /* przyciski */
  --mf-btn-primary-bg:        var(--mf-brand-600);
  --mf-btn-primary-bg-hover:  var(--mf-brand-700);
  --mf-btn-primary-bg-active: var(--mf-brand-800);
  --mf-btn-primary-fg:        var(--mf-text-on-brand);
  --mf-btn-secondary-bg:      var(--mf-brand-50);
  --mf-btn-secondary-bg-hover:var(--mf-brand-100);
  --mf-btn-secondary-fg:      var(--mf-brand-800);
  --mf-btn-ghost-bg-hover:    rgba(0, 101, 148, 0.08);

  /* ---------- TYPOGRAFIA ----------
     system-ui: SF Pro (Apple), Segoe UI Variable (Windows 11), Roboto (Android).
     0 bajtow do pobrania, optyczne rozmiary, pelne polskie znaki. */
  --mf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mf-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --mf-weight-regular: 400;
  --mf-weight-medium:  500;
  --mf-weight-semibold:600;
  --mf-weight-bold:    700;

  /* rozmiar / interlinia / tracking (375 px -> 1440 px) */
  --mf-text-caption:    0.75rem;                                  /* 12 */
  --mf-leading-caption: 1.4;
  --mf-tracking-caption:0.01em;
  --mf-text-sm:         clamp(0.8125rem, 0.79rem + 0.09vw, 0.875rem); /* 13 -> 14 */
  --mf-leading-sm:      1.45;
  --mf-tracking-sm:     0.005em;
  --mf-text-ui:         0.9375rem;                                /* 15 - interfejs, menu, przyciski, body */
  --mf-leading-ui:      1.5;
  --mf-text-base:       1rem;                                     /* 16 - nie zmniejszac (zoom iOS w polach) */
  --mf-leading-base:    1.55;
  --mf-tracking-base:   0;
  --mf-text-lg:         clamp(1.0625rem, 1.04rem + 0.09vw, 1.125rem); /* 17 -> 18 */
  --mf-leading-lg:      1.5;
  --mf-tracking-lg:     -0.003em;

  --mf-text-h6:         1rem;                                           /* 16 */
  --mf-text-h5:         clamp(1.0625rem, 1.04rem + 0.094vw, 1.125rem);  /* 17 -> 18 */
  --mf-text-h4:         clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);   /* 18 -> 20 */
  --mf-text-h3:         clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);     /* 20 -> 24 */
  --mf-text-h2:         clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);   /* 22 -> 28 */
  --mf-text-h1:         clamp(1.625rem, 1.405rem + 0.939vw, 2.25rem);   /* 26 -> 36: tytul strony/produktu */
  --mf-text-display:    clamp(2.25rem, 1.81rem + 1.878vw, 3.5rem);      /* 36 -> 56: tylko hero/baner */
  --mf-leading-h6: 1.4;   --mf-tracking-h6: -0.003em;
  --mf-leading-h5: 1.35;  --mf-tracking-h5: -0.006em;
  --mf-leading-h4: 1.3;   --mf-tracking-h4: -0.01em;
  --mf-leading-h3: 1.25;  --mf-tracking-h3: -0.014em;
  --mf-leading-h2: 1.2;   --mf-tracking-h2: -0.018em;
  --mf-leading-h1: 1.15;  --mf-tracking-h1: -0.022em;
  --mf-leading-display: 1.05; --mf-tracking-display: -0.03em;
  --mf-tracking-overline: 0.06em; /* male wersaliki - oszczednie */

  /* ceny */
  --mf-text-price-sm: 1rem;
  --mf-text-price:    clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem);  /* kafelek */
  --mf-text-price-lg: clamp(1.75rem, 1.574rem + 0.751vw, 2.25rem);  /* 28 -> 36: karta produktu */

  /* ---------- ODSTEPY (siatka 4/8) ---------- */
  --mf-space-0:  0;
  --mf-space-1:  0.25rem; /* 4 */
  --mf-space-2:  0.5rem;  /* 8 */
  --mf-space-3:  0.75rem; /* 12 */
  --mf-space-4:  1rem;    /* 16 */
  --mf-space-5:  1.25rem; /* 20 */
  --mf-space-6:  1.5rem;  /* 24 */
  --mf-space-8:  2rem;    /* 32 */
  --mf-space-10: 2.5rem;  /* 40 */
  --mf-space-12: 3rem;    /* 48 */
  --mf-space-16: 4rem;    /* 64 */
  --mf-space-20: 5rem;    /* 80 */
  --mf-space-24: 6rem;    /* 96 */
  --mf-gutter:   clamp(1rem, 0.6rem + 1.7vw, 2rem);      /* margines boczny strony 16 -> 32 */
  --mf-section:  clamp(2.5rem, 1.8rem + 3vw, 5rem);      /* odstep miedzy sekcjami 40 -> 80 */
  --mf-container: 1320px;
  --mf-measure:   68ch;                                   /* max szerokosc akapitu */
  --mf-tap:       44px;                                   /* min. cel dotyku */

  /* ---------- KSZTALT (jedna regula: kontrolki 10, powierzchnie 16, odznaki 6, liczniki pelne) ---------- */
  --mf-radius-xs:   4px;
  --mf-radius-sm:   6px;   /* odznaki, flagi, tagi */
  --mf-radius-md:   10px;  /* przyciski, pola, select */
  --mf-radius-lg:   16px;  /* karty, panele, zdjecia produktow */
  --mf-radius-xl:   24px;  /* arkusze, szuflady, modale */
  --mf-radius-full: 999px; /* liczniki, przelaczniki, pigulki filtrow */

  /* ---------- CIENIE (zabarwione granatem marki, jedno zrodlo swiatla z gory) ---------- */
  --mf-shadow-xs: 0 1px 2px rgba(1, 33, 51, 0.06);
  --mf-shadow-sm: 0 1px 2px rgba(1, 33, 51, 0.05), 0 2px 6px rgba(1, 33, 51, 0.06);
  --mf-shadow-md: 0 2px 4px rgba(1, 33, 51, 0.04), 0 8px 24px rgba(1, 33, 51, 0.08);
  --mf-shadow-lg: 0 4px 8px rgba(1, 33, 51, 0.04), 0 16px 48px rgba(1, 33, 51, 0.12);
  --mf-shadow-overlay: 0 8px 16px rgba(1, 33, 51, 0.06), 0 24px 72px rgba(1, 33, 51, 0.18);
  --mf-ring-hairline: inset 0 0 0 1px rgba(1, 33, 51, 0.08);

  /* ---------- MATERIALY (translucencja) ---------- */
  --mf-material-bar:        rgba(255, 255, 255, 0.78);  /* sticky header, paski narzedzi */
  --mf-material-bar-solid:  #ffffff;
  --mf-material-thick:      rgba(255, 255, 255, 0.9);   /* szuflady, arkusze */
  --mf-material-blur:       saturate(180%) blur(20px);
  --mf-material-blur-thick: saturate(180%) blur(30px);
  --mf-material-edge:       rgba(255, 255, 255, 0.6);   /* jasna gorna krawedz materialu */
  --mf-scrim:               rgba(14, 21, 25, 0.42);     /* przyciemnienie pod modalem/szuflada */

  /* ---------- RUCH ----------
     Krzywe CSS (stany, hover, wejscia). Gesty -> sprezyny JS (MF.spring).
     Wyjscie = ok. 75% czasu wejscia. Animuj tylko transform i opacity. */
  --mf-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* wejscia, rozwiniecia */
  --mf-ease-in:     cubic-bezier(0.55, 0, 1, 0.45);   /* wyjscia (lustro ease-out) */
  --mf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* przesuniecia w miejscu */
  --mf-ease-press:  cubic-bezier(0.2, 0, 0, 1);       /* reakcja na nacisniecie */
  /* sprezyna krytycznie tlumiona jako krzywa CSS: czas = 1.5 x response
     (np. response 0.4 s -> transition 600ms). Fallback = ease-out. */
  --mf-ease-spring: var(--mf-ease-out);
  --mf-ease-spring-bouncy: var(--mf-ease-out);

  --mf-dur-instant: 100ms;  /* :active, przelaczniki */
  --mf-dur-fast:    160ms;  /* hover, kolory */
  --mf-dur-base:    240ms;  /* male wejscia: tooltip, dropdown */
  --mf-dur-slow:    360ms;  /* panele, megamenu */
  --mf-dur-spring:  600ms;  /* --mf-ease-spring dla response 0.4 */
  --mf-press-scale: 0.97;

  /* parametry sprezyn JS (MF.spring) - dla porzadku, JS ma je w MF.springs */
  --mf-spring-default-damping: 1;   --mf-spring-default-response: 0.4;
  --mf-spring-drawer-damping: 0.8;  --mf-spring-drawer-response: 0.3; /* tylko po geście z pędem */

  /* ---------- WARSTWY (z-index) ---------- */
  --mf-z-base:     1;
  --mf-z-raised:   10;
  --mf-z-sticky:   100;   /* sticky header, pasek "dodaj do koszyka" */
  --mf-z-dropdown: 200;   /* megamenu, podpowiedzi wyszukiwarki */
  --mf-z-overlay:  1000;  /* scrim */
  --mf-z-drawer:   1010;  /* szuflada menu, filtry mobilne */
  --mf-z-modal:    1020;
  --mf-z-toast:    1100;

  /* ---------- UKLAD ---------- */
  --mf-header-h: 64px;       /* R2 aktualizuje, gdy zmieni naglowek */
  --mf-bp-sm: 576px; --mf-bp-md: 768px; --mf-bp-lg: 992px; --mf-bp-xl: 1200px; /* zgodne z Bootstrap 4 motywu */
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mf-ease-spring: linear(0, 0.06, 0.186, 0.329, 0.466, 0.584, 0.682, 0.76, 0.821, 0.868, 0.903, 0.929, 0.949, 0.963, 0.973, 0.981, 0.986, 0.99, 0.993, 0.995, 0.997, 0.998, 0.999, 1);
    /* zeta 0.8 / response 0.35 s, czas 600ms - tylko po geście z pędem */
    --mf-ease-spring-bouncy: linear(0, 0.06, 0.195, 0.356, 0.513, 0.651, 0.764, 0.851, 0.914, 0.957, 0.985, 1.002, 1.011, 1.015, 1.015, 1.014, 1.011, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1);
  }
}

/* Ograniczony ruch: czasy skrocone do przenikania, bez sprezynowania */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mf-ease-spring: var(--mf-ease-out);
    --mf-ease-spring-bouncy: var(--mf-ease-out);
    --mf-dur-base: 160ms;
    --mf-dur-slow: 200ms;
    --mf-dur-spring: 200ms;
    --mf-press-scale: 1;
  }
}

/* Ograniczona przezroczystosc: materialy staja sie pelne */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --mf-material-bar: var(--mf-material-bar-solid);
    --mf-material-thick: #ffffff;
    --mf-material-blur: none;
    --mf-material-blur-thick: none;
    --mf-scrim: rgba(14, 21, 25, 0.6);
  }
}

/* Wiekszy kontrast: pelne tla, wyrazniejsze obramowania i tekst */
@media (prefers-contrast: more) {
  :root {
    --mf-material-bar: #ffffff;
    --mf-material-thick: #ffffff;
    --mf-material-blur: none;
    --mf-material-blur-thick: none;
    --mf-border: var(--mf-gray-500);
    --mf-border-strong: var(--mf-gray-700);
    --mf-border-control: var(--mf-gray-800);
    --mf-text-muted: var(--mf-gray-800);
    --mf-price-old: var(--mf-gray-800);
    --mf-btn-primary-bg: var(--mf-brand-800);
    --mf-btn-secondary-bg: #ffffff;
    --mf-focus: var(--mf-gray-950);
  }
}