/* ==========================================================================
   AXAMI — DESIGN TOKENS
   Przeniesione z makiety (style.css :root). Paleta: czerń/biel + róż.
   Ładowane PO głównym theme.css → nadpisuje zmienne Bootstrap 5.3.
   Etap 1: kolory + typografia. Układy przeniesiemy w kolejnych krokach.
   ========================================================================== */

:root {
  /* --- Paleta makiety --- */
  --c-black:#000000; --c-ink:#111111; --c-white:#ffffff; --c-muted:#8a8a8a;
  --c-line:#ececec;  --c-bg-soft:#f7f7f7;
  --c-pink:#ed7f99;  --c-pink-light:#fdecf0; --c-pink-dark:#e06088; --c-sale:#e0577f;

  /* --- Typografia --- */
  --font-sans:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Lato","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Lato","Helvetica Neue",Arial,sans-serif;

  /* --- Skale --- */
  --fs-xs:.72rem; --fs-sm:.84rem; --fs-base:.97rem; --fs-lg:1.1rem;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;  --sp-7:2.75rem; --sp-8:3.5rem;
  --radius:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --tr:.35s var(--ease);

  /* --- Układ / kontenery (z makiety) --- */
  --container:1440px; --container-box:1200px; --container-pad:2.5rem; --header-h:48px;

  /* --- Mapowanie na Bootstrap 5.3 (cały sklep przejmuje klimat) --- */
  --bs-primary:#ed7f99;            --bs-primary-rgb:237,127,153;
  --bs-secondary:#8a8a8a;          --bs-secondary-rgb:138,138,138;
  --bs-danger:#e0577f;             --bs-danger-rgb:224,87,127;
  --bs-dark:#111111;               --bs-dark-rgb:17,17,17;

  --bs-body-color:#111111;         --bs-body-color-rgb:17,17,17;
  --bs-body-bg:#ffffff;
  --bs-body-font-family:var(--font-sans);
  --bs-body-font-size:.97rem;

  --bs-link-color:#e06088;         --bs-link-color-rgb:224,96,136;
  --bs-link-hover-color:#c94d73;   --bs-link-hover-color-rgb:201,77,115;

  --bs-border-color:#ececec;
  --bs-border-radius:3px;          --bs-border-radius-sm:3px; --bs-border-radius-lg:3px;

  --bs-emphasis-color:#000000;
  --bs-secondary-color:rgba(17,17,17,.6);
  --bs-tertiary-color:#8a8a8a;
}

/* --- Globalne --- */
body {
  font-family: var(--font-sans);
  color: var(--c-ink);
  background-color: var(--c-white);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-display);
  color: var(--c-black);
}

a { color: var(--c-pink-dark); text-decoration: none; }
a:hover { color: var(--c-pink); }

/* --- Przyciski (Bootstrap 5.3 — zmienne per-komponent) --- */
.btn-primary {
  --bs-btn-color:#fff;            --bs-btn-bg:var(--c-pink);          --bs-btn-border-color:var(--c-pink);
  --bs-btn-hover-color:#fff;      --bs-btn-hover-bg:var(--c-pink-dark);--bs-btn-hover-border-color:var(--c-pink-dark);
  --bs-btn-active-color:#fff;     --bs-btn-active-bg:var(--c-pink-dark);--bs-btn-active-border-color:var(--c-pink-dark);
  --bs-btn-disabled-color:#fff;   --bs-btn-disabled-bg:var(--c-pink); --bs-btn-disabled-border-color:var(--c-pink);
}
.btn-outline-primary {
  --bs-btn-color:var(--c-pink-dark); --bs-btn-border-color:var(--c-pink);
  --bs-btn-hover-color:#fff;      --bs-btn-hover-bg:var(--c-pink);    --bs-btn-hover-border-color:var(--c-pink);
  --bs-btn-active-color:#fff;     --bs-btn-active-bg:var(--c-pink);   --bs-btn-active-border-color:var(--c-pink);
}
/* Czarny CTA jak w makiecie */
.btn-dark, .btn-secondary {
  --bs-btn-bg:var(--c-black);     --bs-btn-border-color:var(--c-black);
  --bs-btn-hover-bg:var(--c-ink); --bs-btn-hover-border-color:var(--c-ink);
  --bs-btn-active-bg:var(--c-ink);--bs-btn-active-border-color:var(--c-ink);
}

/* --- Utility kolorów (Bootstrap oznacza je !important) --- */
.text-primary { color: var(--c-pink) !important; }
.bg-primary   { background-color: var(--c-pink) !important; }
.border-primary { border-color: var(--c-pink) !important; }
.link-primary { color: var(--c-pink-dark) !important; }

/* --- Ceny / promocje --- */
.product-price, .price { color: var(--c-ink); }
.regular-price, .product-discount .regular-price { color: var(--c-muted); }
.discount, .sale, .on-sale, .product-flag.discount { background-color: var(--c-sale); color:#fff; }
.product-flag.new { background-color: var(--c-black); color:#fff; }

/* --- Pola formularzy --- */
.form-control, .form-select { border-radius: var(--radius); border-color: var(--c-line); }
.form-control:focus, .form-select:focus {
  border-color: var(--c-pink);
  box-shadow: 0 0 0 .2rem rgba(237,127,153,.25);
}