/* =========================================================================
   Re-volta v3 – tokeny (tryb jasny)

   Trzy poziomy:
   1. PALETA  --rv3-p-*  surowe kolory. Komponenty ich NIE używają.
   2. ROLE    --rv3-*    znaczenie: tło, tekst, ramka, akcent, toper… Komponenty używają
                         wyłącznie ról. Tryb ciemny (tokeny-ciemne.css) i moduły (moduly.css)
                         nadpisują tylko role.
   3. STAŁE   odstępy, promienie, typografia, układ – wspólne dla wszystkich modułów
              i obu trybów. To one trzymają spójność serwisu.

   Kolory akcentu (toper, przyciski, linki, ceny, aktywne chipy) liczą się z odcienia
   modułu: --rv3-hue + --rv3-chroma, przy stałych jasnościach --rv3-l-*. Dzięki temu każdy
   moduł ma ten sam kontrast, a zmiana koloru modułu to zmiana jednej liczby.

   Progi szerokości (w @media nie da się użyć zmiennych):
     mobile  ≤ 640px   – lista na pełną szerokość, filtry pod przyciskiem
     tablet  ≤ 1024px  – menu topera chowa się pod ☰
   ========================================================================= */

:root, [data-theme="light"] {
  /* ===================== 1. PALETA ===================== */

  /* Marka */
  --rv3-p-bordo: #8C1832;                     /* = oklch(42% 0.150 14.8) */
  --rv3-p-zloto: #E9A93A;                     /* = oklch(77.7% 0.143 77) */
  --rv3-p-zloto-hover: oklch(71% 0.15 68);
  --rv3-p-zloto-ink: #3a1a10;

  /* Wyróżnienia i plakietki */
  --rv3-p-nowosc: oklch(78% 0.14 80);
  --rv3-p-nowosc-ink: oklch(25% 0.03 60);
  --rv3-p-top: oklch(46.413% 0.16411 26.441);
  --rv3-p-promo-bg: oklch(96% 0.035 85);      /* żółta kość słoniowa – Polecane */
  --rv3-p-promo-ramka: oklch(85% 0.08 80);
  --rv3-p-promo-karta-ramka: oklch(87% 0.05 80);
  --rv3-p-promo-link: oklch(45% 0.05 60);
  --rv3-p-top-bg: oklch(95.5% 0.04 65);       /* pastelowy pomarańcz – TOP OFERTA */
  --rv3-p-top-ramka: oklch(84% 0.09 62);

  /* Ciepłe neutralne (hue 40–60, nigdy zimna szarość) */
  --rv3-p-n-0: oklch(99% 0.003 60);
  --rv3-p-n-50: oklch(98% 0.004 60);
  --rv3-p-n-100: oklch(97.5% 0.006 60);
  --rv3-p-n-150: oklch(94% 0.004 55);
  --rv3-p-n-175: oklch(93% 0.005 55);
  --rv3-p-n-200: oklch(91% 0.006 55);
  --rv3-p-n-250: oklch(90% 0.006 55);
  --rv3-p-n-300: oklch(88% 0.006 55);
  --rv3-p-n-400: oklch(82% 0.008 55);
  --rv3-p-n-450: oklch(77% 0.009 50);
  --rv3-p-n-500: oklch(72% 0.01 40);
  --rv3-p-n-550: oklch(62% 0.01 40);
  --rv3-p-n-600: oklch(55% 0.012 40);         /* było 60% – za mały kontrast dla 12px */
  --rv3-p-n-650: oklch(52% 0.015 40);
  --rv3-p-n-700: oklch(45% 0.015 40);
  --rv3-p-n-950: oklch(20% 0.02 30);

  /* Stopka (ciemna w obu trybach) */
  --rv3-p-stopka: oklch(17% 0.025 25);
  --rv3-p-stopka-pole: oklch(23% 0.025 25);
  --rv3-p-stopka-linia: oklch(27% 0.02 25);
  --rv3-p-stopka-ramka: oklch(32% 0.025 25);
  --rv3-p-stopka-ramka-2: oklch(34% 0.025 25);
  --rv3-p-stopka-tekst: oklch(88% 0.008 60);
  --rv3-p-stopka-link: oklch(78% 0.012 50);
  --rv3-p-stopka-opis: oklch(75% 0.012 50);
  --rv3-p-stopka-meta: oklch(62% 0.01 40);
  --rv3-p-stopka-meta-link: oklch(70% 0.01 40);

  /* Statusy */
  --rv3-p-ok: oklch(45% 0.11 150);
  --rv3-p-ok-bg: oklch(95.5% 0.035 150);
  --rv3-p-ok-ramka: oklch(84% 0.07 150);
  --rv3-p-blad: oklch(47% 0.17 27);
  --rv3-p-blad-bg: oklch(95.5% 0.03 27);
  --rv3-p-blad-ramka: oklch(84% 0.08 27);
  --rv3-p-info: oklch(45% 0.1 245);
  --rv3-p-info-bg: oklch(95.5% 0.025 245);
  --rv3-p-info-ramka: oklch(85% 0.05 245);
  --rv3-p-uwaga: oklch(45% 0.1 70);
  --rv3-p-uwaga-bg: oklch(96% 0.05 85);
  --rv3-p-uwaga-ramka: oklch(84% 0.1 80);


  /* ===================== 2. ROLE ===================== */

  color-scheme: light;

  /* Jasności ról akcentu (tryb ciemny ma własne) */
  --rv3-l-header: 42%;
  --rv3-l-footer-cta: 31%;   /* pas CTA nad stopką – ciemniejszy od topera */
  --rv3-l-accent: 42%;
  --rv3-l-accent-hover: 30%;
  --rv3-l-accent-ink: 35%;
  --rv3-l-accent-ink-hover: 27%;
  --rv3-l-accent-soft: 93%;
  --rv3-l-header-2: 90%;
  --rv3-k-accent-soft: 0.2;       /* nasycenie tła aktywnego chipa względem --rv3-chroma */

  /* Powierzchnie */
  --rv3-page: var(--rv3-p-n-100);             /* tło strony – moduł może nadpisać */
  --rv3-surface: var(--rv3-p-n-0);            /* karty */
  --rv3-panel: var(--rv3-p-n-0);              /* panele boczne, sekcje – moduł może nadpisać */
  --rv3-panel-border: var(--rv3-p-n-250);
  --rv3-field: var(--rv3-p-n-50);             /* tło pól formularza */
  --rv3-media-a: var(--rv3-p-n-250);          /* placeholder zdjęcia – paski */
  --rv3-media-b: var(--rv3-p-n-150);
  --rv3-media-ink: var(--rv3-p-n-600);
  --rv3-media-tlo-pion: #fff;                 /* pod rozmytą kopią pionowego zdjęcia (miniatury.js) */
  --rv3-map-bg: var(--rv3-p-n-175);
  --rv3-rail: var(--rv3-p-n-250);             /* szyna suwaka */

  /* Ramki i linie */
  --rv3-border: var(--rv3-p-n-450);           /* pola, chipy, przyciski drugorzędne */
  --rv3-border-hover: var(--rv3-p-n-550);     /* pola po najechaniu */
  --rv3-border-card: var(--rv3-p-n-250);
  --rv3-divider: var(--rv3-p-n-200);
  --rv3-divider-soft: var(--rv3-p-n-175);
  --rv3-tick: var(--rv3-p-n-400);

  /* Tekst */
  --rv3-text: var(--rv3-p-n-950);
  --rv3-text-2: var(--rv3-p-n-700);           /* linki breadcrumb */
  --rv3-muted: var(--rv3-p-n-650);            /* cechy, lokalizacja, liczniki */
  --rv3-subtle: var(--rv3-p-n-600);           /* meta: zdjęcia, data */
  --rv3-faint: var(--rv3-p-n-500);            /* separatory › */
  --rv3-icon-off: var(--rv3-p-n-500);         /* nieaktywne ♥ */

  /* Tekst i przyciski na akcencie / toperze */
  --rv3-on-accent: #fff;
  --rv3-header-ink: #fff;
  --rv3-header-line: rgb(255 255 255 / 0.35);
  --rv3-header-line-strong: rgb(255 255 255 / 0.45);

  /* Przycisk ♥ na zdjęciu */
  --rv3-overlay: oklch(99% 0.003 60 / 0.85);
  --rv3-overlay-ink: var(--rv3-p-n-950);

  /* Przyciemnienie strony pod panelem / oknem */
  --rv3-backdrop: oklch(20% 0.02 30 / 0.5);

  /* CTA – złoto marki, wspólne dla wszystkich modułów */
  --rv3-cta: var(--rv3-p-zloto);
  --rv3-cta-hover: var(--rv3-p-zloto-hover);
  --rv3-cta-ink: var(--rv3-p-zloto-ink);

  /* Plakietki */
  --rv3-badge-top-ramka: oklch(63% 0.19 27);
  --rv3-top-tytul-bg: #000;                   /* tło tytułu TOP OFERTY */
  --rv3-badge-video: var(--rv3-p-top);        /* jak TOP OFERTA – jedna czerwień plakietek */
  --rv3-badge-ink: #fff;
  --rv3-badge-new: var(--rv3-p-nowosc);
  --rv3-badge-new-ink: var(--rv3-p-nowosc-ink);

  /* Wyróżnienia – wspólne dla wszystkich modułów */
  --rv3-promo-bg: var(--rv3-p-promo-bg);
  --rv3-promo-border: var(--rv3-p-promo-ramka);
  --rv3-promo-card-border: var(--rv3-p-promo-karta-ramka);
  --rv3-promo-link: var(--rv3-p-promo-link);
  --rv3-featured-bg: var(--rv3-p-top-bg);
  --rv3-featured-border: var(--rv3-p-top-ramka);

  /* Stopka */
  --rv3-footer-bg: var(--rv3-p-stopka);
  --rv3-footer-field: var(--rv3-p-stopka-pole);
  --rv3-footer-rule: var(--rv3-p-stopka-linia);
  --rv3-footer-field-border: var(--rv3-p-stopka-ramka);
  --rv3-footer-social-border: var(--rv3-p-stopka-ramka-2);
  --rv3-footer-text: var(--rv3-p-stopka-tekst);
  --rv3-footer-heading: #fff;
  --rv3-footer-link: var(--rv3-p-stopka-link);
  --rv3-footer-link-hover: #fff;
  --rv3-footer-body: var(--rv3-p-stopka-opis);
  --rv3-footer-meta: var(--rv3-p-stopka-meta);
  --rv3-footer-meta-link: var(--rv3-p-stopka-meta-link);

  /* Statusy */
  --rv3-ok: var(--rv3-p-ok);
  --rv3-ok-bg: var(--rv3-p-ok-bg);
  --rv3-ok-border: var(--rv3-p-ok-ramka);
  --rv3-error: var(--rv3-p-blad);
  --rv3-error-bg: var(--rv3-p-blad-bg);
  --rv3-error-border: var(--rv3-p-blad-ramka);
  --rv3-info: var(--rv3-p-info);
  --rv3-info-bg: var(--rv3-p-info-bg);
  --rv3-info-border: var(--rv3-p-info-ramka);
  --rv3-warning: var(--rv3-p-uwaga);
  --rv3-warning-bg: var(--rv3-p-uwaga-bg);
  --rv3-warning-border: var(--rv3-p-uwaga-ramka);

  /* Cienie – tylko miękkie, ciepłe, niskie (w trybie ciemnym zastępuje je ramka) */
  --rv3-shadow-card: 0 1px 2px oklch(30% 0.02 40 / 0.05), 0 4px 14px oklch(30% 0.02 40 / 0.06);
  --rv3-shadow-promo: 0 1px 2px oklch(40% 0.05 70 / 0.06), 0 4px 14px oklch(40% 0.05 70 / 0.07);
  --rv3-shadow-promo-card: 0 1px 3px oklch(40% 0.05 70 / 0.08);
  --rv3-shadow-thumb: 0 1px 3px oklch(30% 0.02 40 / 0.25);
  --rv3-shadow-pop: 0 4px 10px oklch(30% 0.02 40 / 0.08), 0 12px 32px oklch(30% 0.02 40 / 0.12);


  /* ===================== 3. STAŁE ===================== */

  /* Odstępy */
  --rv3-space-1: 4px;
  --rv3-space-2: 6px;
  --rv3-space-3: 8px;
  --rv3-space-4: 10px;
  --rv3-space-5: 12px;
  --rv3-space-6: 14px;
  --rv3-space-7: 16px;
  --rv3-space-8: 20px;
  --rv3-space-9: 22px;
  --rv3-space-10: 24px;
  --rv3-space-11: 28px;
  --rv3-space-12: 36px;
  --rv3-space-13: 40px;
  --rv3-space-14: 56px;

  /* Promienie */
  --rv3-radius-xs: 5px;     /* plakietki */
  --rv3-radius-sm: 6px;     /* pola, przyciski, paginacja */
  --rv3-radius-md: 7px;     /* wiersze-przełączniki, mapa, komunikaty */
  --rv3-radius-lg: 8px;     /* karty polecane, duże CTA */
  --rv3-radius-xl: 10px;    /* karty, panele */
  --rv3-radius-pill: 999px; /* chipy */

  /* Układ */
  --rv3-container: 1400px;  /* szerokość treści */
  --rv3-gutter: 24px;       /* margines od krawędzi okna */
  --rv3-sidebar: 270px;
  --rv3-main-gap: 28px;
  --rv3-cards-gap: 20px;
  --rv3-card-min: 280px;
  --rv3-promo-card-min: 230px;
  --rv3-logo-h: 30px;       /* logo w toperze */
  --rv3-logo-h-waskie: 26px; /* logo w toperze na tablecie i telefonie */
  --rv3-header-h: 68px;     /* wysokość topera (desktop) */
  --rv3-header-h-mobile: 60px;
  --rv3-tap: 44px;          /* min. cel dotykowy */
  --rv3-text-max: 760px;    /* czytelna szerokość długiego tekstu (forum, opisy) */

  /* Typografia – Roboto Flex (variable: opsz, wght, wdth, slnt, GRAD + osie parametryczne) */
  --rv3-font: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rv3-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Skala – 9 stopni (projekt miał 13, różniących się czasem o 0,5px) */
  --rv3-fs-2xs: 11px;   /* plakietki, overline, podpisy suwaka */
  --rv3-fs-xs: 12px;    /* meta karty, aktywne filtry */
  --rv3-fs-sm: 13px;    /* chipy, cechy w siatce, breadcrumb, etykiety filtrów */
  --rv3-fs-base: 14px;  /* tekst, pola, przyciski */
  --rv3-fs-md: 15px;    /* menu topera, duże przyciski, opis w stopce */
  --rv3-fs-lg: 16px;    /* tytuł karty */
  --rv3-fs-xl: 19px;    /* H2 sekcji, tytuł w widoku listy, cena w siatce */
  --rv3-fs-2xl: 22px;   /* cena w widoku listy */
  --rv3-fs-3xl: 26px;   /* H1 strony, nagłówek CTA stopki */

  --rv3-fw-regular: 400;
  --rv3-fw-medium: 500;
  --rv3-fw-semibold: 600;
  --rv3-fw-heading: 650;  /* nagłówki i ceny */
  --rv3-fw-bold: 700;
  --rv3-fw-black: 800;    /* TOP OFERTA */

  --rv3-lh-tight: 1.3;
  --rv3-lh-body: 1.5;
  --rv3-lh-relaxed: 1.6;

  --rv3-tracking-overline: 0.06em;
  --rv3-tracking-badge: 0.04em;
  --rv3-tracking-heading: -0.01em;

  /* Osie Roboto Flex
     wdth (font-stretch) – węższy krój tam, gdzie brakuje miejsca, zamiast mniejszego stopnia.
            Przy małych stopniach (opsz) oś działa słabiej, stąd dość mocne wartości.
     GRAD – „grubość optyczna” bez zmiany szerokości znaków: aktywny chip nie skacze,
            a w trybie ciemnym ujemny GRAD kompensuje pozorne pogrubienie jasnego tekstu. */
  --rv3-wdth-ciasny: 72%;     /* plakietki, liczniki */
  --rv3-wdth-waski: 87%;      /* chipy, meta, menu na tablecie */
  --rv3-wdth-normalny: 100%;
  --rv3-wdth-szeroki: 115%;   /* duże nagłówki, CTA w stopce */
  --rv3-grad: 0;              /* bazowy GRAD – tryb ciemny nadpisuje */
  --rv3-grad-aktywny: 90;     /* stan aktywny (chip, segment) zamiast zmiany grubości */
  --rv3-slnt: 10deg;          /* kursywa: font-style: oblique var(--rv3-slnt) */

  /* Ruch – tylko przejścia kolorów */
  --rv3-transition: 150ms ease;
}

@media (max-width: 640px) {
  :root, [data-theme="light"] {
    --rv3-gutter: 14px;
    --rv3-main-gap: 14px;
    --rv3-cards-gap: 12px;
    --rv3-logo-h: var(--rv3-logo-h-waskie);
  }
}

/* Ograniczony ruch – wszystkie przejścia komponentów idą przez --rv3-transition */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rv3-transition: 0s;
  }
}

/* Odcień modułu – domyślnie bordo marki. Moduły nadpisują w moduly.css.
   Osobno, tylko na :root – zagnieżdżony data-theme="light" nie może go zresetować. */
:root {
  --rv3-hue: 14.8;
  --rv3-chroma: 0.15;
}

/* Role liczone z odcienia modułu. Deklarowane także na każdym elemencie z data-modul /
   data-theme, żeby moduł albo tryb ustawiony na fragmencie strony (wzornik: moduły i tryby
   obok siebie) przeliczył kolory u siebie, a nie dziedziczył gotowych z <html>. */
:root, [data-modul], [data-theme] {
  --rv3-accent: oklch(var(--rv3-l-accent) var(--rv3-chroma) var(--rv3-hue));
  --rv3-accent-hover: oklch(var(--rv3-l-accent-hover) calc(var(--rv3-chroma) * 0.8) var(--rv3-hue));
  --rv3-accent-ink: oklch(var(--rv3-l-accent-ink) calc(var(--rv3-chroma) * 0.73) var(--rv3-hue));
  --rv3-accent-ink-hover: oklch(var(--rv3-l-accent-ink-hover) calc(var(--rv3-chroma) * 0.67) var(--rv3-hue));
  --rv3-accent-soft: oklch(var(--rv3-l-accent-soft) calc(var(--rv3-chroma) * var(--rv3-k-accent-soft)) var(--rv3-hue));
  --rv3-focus-ring: oklch(var(--rv3-l-accent-ink) calc(var(--rv3-chroma) * 0.73) var(--rv3-hue) / 0.3);

  --rv3-header-bg: oklch(var(--rv3-l-header) var(--rv3-chroma) var(--rv3-hue));
  --rv3-header-ink-2: oklch(var(--rv3-l-header-2) calc(var(--rv3-chroma) * 0.2) var(--rv3-hue));
  --rv3-footer-cta-bg: oklch(var(--rv3-l-footer-cta) var(--rv3-chroma) var(--rv3-hue));

  /* Aliasy */
  --rv3-link: var(--rv3-accent-ink);
  --rv3-link-hover: var(--rv3-accent-ink-hover);
  --rv3-price: var(--rv3-accent-ink);
}