/**
 * base.css — reset, typografia bazowa, dostępność, mikro-zestaw układu
 *
 * Wymaga tokens.css wczytanego wcześniej.
 * Każda wartość niezerowa pochodzi z var(--dc-*). Zero w resecie oznacza
 * brak wartości, a nie decyzję projektową, więc zapisane jest jako 0.
 */

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Informuje przeglądarkę, w jakim motywie renderować kontrolki formularzy,
     paski przewijania i pola natywne. Bez tego dark mode ma jasne inputy. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[data-theme='dark'] {
  color-scheme: dark;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  fill: currentColor;
}

/* Ikony rysowane KRESKĄ deklarują fill="none" jako atrybut prezentacyjny.
   Reguła wyżej biła ten atrybut — CSS zawsze wygrywa z atrybutem
   prezentacyjnym — i zalewała je kolorem: globus, telefon i koszyk
   w nagłówku renderowały się jako złote plamy zamiast konturów.
   Selektor atrybutowy ma wyższą specyficzność (0,1,1 wobec 0,0,1)
   i przywraca zamierzone zachowanie, nie ruszając ikon wypełnianych. */
svg[fill='none'] {
  fill: none;
}

/* Kontrolki nie dziedziczą kroju z body — trzeba je zmusić. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

[hidden] {
  display: none !important;
}

/* ==========================================================================
   2. TYPOGRAFIA BAZOWA
   Nagłówki płynne (clamp), tekst stały — patrz tokens.css sekcja 2 i 3.
   ========================================================================== */
body {
  background-color: var(--dc-bg);
  color: var(--dc-text);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-lg);
  font-weight: 400;
  line-height: var(--dc-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dc-font-display);
  color: var(--dc-text);
  text-wrap: balance;
}

h1 {
  font-size: var(--dc-display-1);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-none);
  letter-spacing: var(--dc-tracking-tighter);
}

h2 {
  font-size: var(--dc-display-3);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-tight);
}

h3 {
  font-size: var(--dc-text-2xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
  letter-spacing: var(--dc-tracking-snug);
}

h4 {
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-tight);
}

h5,
h6 {
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
}

p {
  text-wrap: pretty;
}

a {
  /* Do partii 3 audytu spoczynek brał --dc-accent-text (#9a8230), usunięty
     z motywu jasnego (tokens.css, sekcja złota); od tamtej pory goły
     odnośnik nie zmieniał koloru pod kursorem. Najazd wraca w partii 6
     niżej, tylko dla odnośników BEZ klasy. */
  color: var(--dc-accent-strong);
  text-decoration-thickness: var(--dc-border);
  text-underline-offset: var(--dc-space-4);
  /* Przejście koloru na SAMYM `a`, nie na `a:hover`: `a:hover` ma
     specyficzność (0,1,1), czyli wyższą niż klasa (0,1,0) — wpisane tam
     `transition` nadpisałoby na czas najazdu listy przejść wszystkich
     przycisków-odnośników (tło i obwódka skakałyby zamiast koloru).
     Na `a` (0,0,1) przegrywa z każdą listą klasy, więc działa tylko tam,
     gdzie odnośnik własnej listy nie ma — i działa w obie strony, także
     przy zjeździe kursora. Odnośniki z własną listą muszą mieć w niej
     `color` (design-audit.md, C.2). */
  transition: color var(--dc-duration-base) var(--dc-ease);
}

/* a:hover (0,1,1) bije każdą klasę (0,1,0), więc ta reguła jest najazdem
   także dla odnośników z klasą, które własnego koloru najazdu nie zapisały.
   Sweep 80 odnośników strony głównej przez CDP (partia 6 audytu): osiem
   takich jest — .dc-wholesale__link ×3, .dc-origin__more-link,
   .dc-blog-carousel__all, .dc-header__cart, .dc-skip-link,
   .dc-help-cta__cta--secondary — i ich najazd „tusz -> złoto" pochodzi
   wyłącznie stąd. Dlatego reguła ZOSTAJE bez zmian (zdjęcie jej gasiło
   im najazd), a zależność jest zgłoszona: docelowo każdy odnośnik z klasą
   ma własny kolor najazdu w swojej liście przejść (design-audit.md, C.2). */
a:hover {
  color: var(--dc-accent-strong);
}

/* Najazd GOŁEGO odnośnika (treść wpisów, przypisy): złoto -> tusz tekstu.
   NIE --dc-accent: pełne złoto to ranga 1 przycisków (design-audit.md, C.1)
   i jako tekst na jasnym tle ma 2,02:1. Do partii 3 audytu spoczynek i najazd
   różniły się odcieniem złota; po scaleniu do --dc-accent-strong goły
   odnośnik przestał reagować — ta reguła (0,2,1) przywraca reakcję tylko
   jemu, odnośników z klasą nie dotyka (partia 6). */
a:not([class]):hover {
  color: var(--dc-text);
}

strong,
b {
  font-weight: var(--dc-weight-bold);
}

small {
  font-size: var(--dc-text-sm);
}

/* ==========================================================================
   3. DOSTĘPNOŚĆ
   ========================================================================== */

/* W makiecie nie ma stanu :focus — siedzi w support.js. WCAG 2.1 AA wymaga go
   (2.4.7), przy kontraście 3:1 wobec tła (1.4.11). Pierścień przełącza się
   z motywem: #7c6420 = 5,01:1 w jasnym, #D8B65E = 10,20:1 w ciemnym. */
:focus-visible {
  outline: var(--dc-border-heavy) solid var(--dc-accent-strong);
  outline-offset: var(--dc-focus-offset);
  border-radius: var(--dc-radius-6);
}

/* Elementy o własnym kształcie (pigułki, karty) biorą pierścień cieniem,
   żeby nie gubić promienia. */
.dc-focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--dc-focus-ring);
}

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--dc-accent-a30);
  color: var(--dc-text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ==========================================================================
   4. PRYMITYWY RUCHU
   Mechanika wspólna dla wielu sekcji. Same wartości (czasy, kolory łuku)
   siedzą w tokens.css; konstrukcja obwódki — w assets/css/components/ring.css,
   który te klatki wywołuje po nazwie.
   ========================================================================== */

/* Kąt obrotu złotej obwódki.
 *
 * @property NIE JEST OZDOBNIKIEM. Bez rejestracji przeglądarka traktuje
 * --dc-ring jak zwykły ciąg znaków i przy animacji przeskakuje między
 * wartościami skokowo — obwódka wtedy w ogóle nie rusza. Deklaracja typu
 * <angle> pozwala interpolować kąt płynnie.
 *
 * inherits: false, bo każda obwódka na stronie ma mieć własną fazę obrotu;
 * dziedziczenie kąta zsynchronizowałoby je wszystkie.
 */
@property --dc-ring {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes dcRingSpin {
  to {
    --dc-ring: 360deg;
  }
}

/* Obrót w drugą stronę. Osobne keyframes zamiast animation-direction:
 * reverse, bo reverse odwraca też krzywą czasu, a tu chodzi wyłącznie
 * o zwrot — ruch ma pozostać liniowy.
 */
@keyframes dcRingSpinRev {
  to {
    --dc-ring: -360deg;
  }
}

/* ==========================================================================
   5. MIKRO-ZESTAW UKŁADU — 20 klas
   Świadomie mały. Wszystko, co specyficzne dla sekcji, należy do
   assets/css/sections/{nazwa}.css, nie tutaj.
   ========================================================================== */

/*  1 */
.dc-container {
  width: 100%;
  max-width: var(--dc-container);
  margin-inline: auto;
  padding-inline: var(--dc-space-32);
}

/*  2 */
.dc-container-narrow {
  width: 100%;
  max-width: var(--dc-measure-xl);
  margin-inline: auto;
  padding-inline: var(--dc-space-32);
}

/*  3 — pionowy oddech sekcji; 64px to dominanta w makiecie */
.dc-section {
  padding-block: var(--dc-space-64);
}

/*  4 — pionowy stos z jednakowym odstępem */
.dc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-16);
}

/*  5 */
.dc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-10);
}

/*  6 */
.dc-row-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-10);
}

/*  7 */
.dc-row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-space-10);
}

/*  8 */
.dc-col {
  display: flex;
  flex-direction: column;
}

/*  9 */
.dc-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 10–12 — siatki. Nazwa mówi o MINIMALNEJ szerokości kolumny, nie o ich liczbie:
   tak robi makieta (repeat(auto-fit, minmax(Npx,1fr)) w 73 z 97 siatek).
   Liczba kolumn wynika z szerokości, więc siatka zwija się bez breakpointów.
   min(...,100%) chroni przed przepełnieniem na wąskim ekranie. */
/* 10 — gęsta: znaczniki, małe kafelki parametrów */
.dc-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-sm), 100%), 1fr));
  gap: var(--dc-space-16);
}

/* 11 — domyślna: karty produktów, kafelki treści */
.dc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-md), 100%), 1fr));
  gap: var(--dc-space-22);
}

/* 12 — szeroka: karty z obrazem, sekcje dwukolumnowe */
.dc-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dc-grid-min-lg), 100%), 1fr));
  gap: var(--dc-space-22);
}

/* 13–16 — nadpisanie odstępu w .dc-row / .dc-stack / .dc-grid-* */
/* 13 */
.dc-gap-xs { gap: var(--dc-space-6); }
/* 14 */
.dc-gap-sm { gap: var(--dc-space-10); }
/* 15 */
.dc-gap-md { gap: var(--dc-space-16); }
/* 16 */
.dc-gap-lg { gap: var(--dc-space-24); }

/* 17 — ograniczenie długości wiersza tekstu */
.dc-measure {
  max-width: var(--dc-measure-lg);
}

/* 18 — wyjście poza kontener na pełną szerokość okna */
.dc-full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* 19 — treść dla czytników ekranu */
.dc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 20 — link pomijający nawigację; widoczny dopiero po sfokusowaniu */
.dc-skip-link {
  position: absolute;
  z-index: var(--dc-z-modal);
  left: var(--dc-space-10);
  top: var(--dc-space-10);
  padding: var(--dc-space-10) var(--dc-space-18);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface);
  color: var(--dc-text);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  text-decoration: none;
  box-shadow: var(--dc-shadow-lg);
  transform: translateY(calc(-100% - var(--dc-space-20)));
  transition: transform var(--dc-duration-base) var(--dc-ease-out);
}

.dc-skip-link:focus-visible {
  transform: translateY(0);
}