/*
Theme Name: Bronisze online
Theme URI: https://broniszeonline.pl
Author: nFinity.pl sp. z o.o.
Author URI: https://nfinity.pl
Description: Motyw marketplace platformy Bronisze online (Warszawski Rolno-Spożywczy Rynek Hurtowy S.A.). Napisany od zera pod prototyp Figma „Bronisze – propozycje”. Umowa UI/039/2026.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: bronisze-online
Tags: woocommerce, marketplace, b2b
*/

/* ==========================================================================
   TOKENY PROJEKTOWE
   Źródło: zmienne Figma z pliku kEoVd0D4RbQ0BpMSsmoDxE (strona „Bronisze
   online - projekt"). Nie zmieniaj wartości ręcznie — wynikają z makiet.
   ========================================================================== */

:root {
	/* --- marka: zieleń ------------------------------------------------- */
	--bo-green:            #007a2e;  /* brand/green/700 — podstawowa */
	--bo-green-contrast:   #007737;  /* „green kontrast" — nagłówek, CTA */
	--bo-green-dark:       #005025;  /* „green dark" — hover, pigułki */
	--bo-green-100:        #d2ecdd;  /* brand/green/100 */
	--bo-green-50:         #e8f5ee;  /* brand/green/50, „zielony tło" */

	/* --- neutralne ------------------------------------------------------ */
	--bo-ink:              #1f2421;  /* brand/ink — nagłówki, tekst mocny */
	--bo-black:            #272727;  /* „black" — TŁO koszyka i stopki, nie tekst */
	--bo-text:             #323232;  /* „txt" — tekst podstawowy */
	/* Na bieli dawało 4,78:1, ale etykiety siedzą na kaflach lekko
	   przyciemnionych i tam schodziło do 4,26:1 — poniżej progu WCAG AA.
	   Odcień ciemniejszy o krok trzyma 4,9:1 na kaflu, wciąż wyraźnie
	   lżejszy niż `--bo-text-soft`. */
	--bo-muted:            #616974;  /* etykiety drugorzędne */
	--bo-text-soft:        #53565a;  /* akapity na kaflach jasnych */
	--bo-placeholder:      #686868;  /* placeholder w polach */
	--bo-field:            #919191;  /* obramowanie pól formularzy */
	--bo-check-border:     #919191;  /* obwódka pola wyboru */
	--bo-check-mark:       #ffffff;  /* ptaszek na wypełnieniu */
	--bo-stroke:           #d7dad8;  /* brand/gray/300, „stroke" */
	/* Strzałka listy rozwijanej — rysujemy własną, bo Safari nie stylizuje
	   natywnego <select> (patrz `base.css`). */
	--bo-select-arrow:     url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2353565a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bo-surface:          #f9f9f9;  /* „szary" — tła sekcji */
	--bo-white:            #ffffff;

	/* --- stany ---------------------------------------------------------- */
	--bo-danger:           #d3282b;  /* „red" — błędy, walidacja */
	--bo-sale:             #d9282f;  /* cena promocyjna i plakietka obniżki */
	--bo-verified:         #00873c;  /* obramowanie oferty wyróżnionej */
	--bo-verified-bg:      #f1f9f4;  /* tło oferty wyróżnionej */
	--bo-gray-100:         #f1f3f2;  /* pastylki atrybutów */
	--bo-star:             #d69e00;  /* gwiazdka oceny (Figma 322:5467) */

	/* --- warstwy motywu ------------------------------------------------- */
	/*
	 * Role, nie kolory. `page` to tło strony, `card` — tło kafla nad nim,
	 * `border` — kreska między nimi. Motyw ciemny nadpisuje wyłącznie te role
	 * i neutralne tokeny wyżej, dzięki czemu żaden arkusz nie musi wiedzieć,
	 * który wariant jest włączony.
	 */
	--bo-page:             #ffffff;
	--bo-card:             #ffffff;
	--bo-border:           var(--bo-stroke);
	--bo-shadow-color:     rgba(0, 0, 0, 0.08);

	/*
	 * Odcienie tła komunikatów. Trzymamy je jako role, a nie jako pastele
	 * wpisane w arkusze: pastel z makiety w motywie ciemnym zostaje jasną
	 * plamą, na której token tekstu (już jasny) staje się nieczytelny.
	 */
	--bo-tint-danger:      #fce9e7;
	--bo-tint-danger-ink:  #9a2b2e;
	--bo-tint-success:     #e8f5ed;
	--bo-tint-success-ink: #17603a;
	--bo-tint-warn:        #fdf8ec;
	--bo-tint-warn-ink:    #6b5410;
	--bo-tint-warn-line:   #ead9a8;
	--bo-tint-neutral:     #f0f1f2;
	color-scheme: light;

	/* --- typografia ----------------------------------------------------- */
	--bo-font-heading:     'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--bo-font-body:        'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--bo-text-xs:          0.8125rem; /* 13px — eyebrow, meta */
	--bo-text-sm:          0.875rem;  /* 14px */
	--bo-text-base:        1rem;      /* 16px — bazowy UI */
	--bo-text-lg:          1.125rem;  /* 18px */
	--bo-text-xl:          1.5rem;    /* 24px */
	--bo-text-2xl:         2rem;      /* 32px — h2 wg makiety */
	--bo-text-3xl:         2.5rem;    /* 40px */
	--bo-text-4xl:         3rem;      /* 48px — hero */

	--bo-leading-tight:    1.2;
	--bo-leading-heading:  1.3;       /* h2 wg makiety */
	--bo-leading-body:     1.5;

	--bo-tracking-eyebrow: 0.2em;     /* 3.2px przy 16px — styl „caption" z Figmy */

	/* --- siatka i odstępy ----------------------------------------------- */
	/*
	 * Makiety rysowano na 1440 px (1280 treści + 2×80 marginesu). Na monitorach,
	 * z których korzysta hurt, zostawiało to szerokie puste pasy po bokach,
	 * a listy ofert i rozmowy robiły się niepotrzebnie ciasne.
	 *
	 * POWRÓT: wystarczy przywrócić 1280px w tej jednej linii — wszystkie układy
	 * są płynne i wracają do proporcji z makiet.
	 */
	--bo-container:        1600px;    /* makieta: 1280 */
	--bo-gutter:           80px;
	--bo-gutter-sm:        20px;

	--bo-space-1:          4px;
	--bo-space-2:          8px;
	--bo-space-3:          12px;
	--bo-space-4:          16px;
	--bo-space-5:          20px;
	--bo-space-6:          24px;
	--bo-space-7:          28px;
	--bo-space-8:          32px;
	--bo-space-10:         40px;
	--bo-space-12:         48px;
	--bo-space-16:         64px;
	--bo-space-20:         80px;

	/* --- promienie i cienie --------------------------------------------- */
	--bo-radius-sm:        8px;
	--bo-radius:           12px;
	--bo-radius-lg:        16px;
	--bo-radius-pill:      999px;

	--bo-shadow-sm:        0 1px 2px rgb(31 36 33 / 0.06);
	--bo-shadow:           0 2px 8px rgb(31 36 33 / 0.08);
	--bo-shadow-lg:        0 8px 24px rgb(31 36 33 / 0.10);

	/* --- pozostałe ------------------------------------------------------ */
	--bo-header-h:         113px;     /* wysokość górnego paska */
	--bo-focus:            0 0 0 3px rgb(0 119 55 / 0.35);
	--bo-transition:       150ms ease;
}

/*
 * Pola formularzy WooCommerce (kasa, konto) biorą kolory z własnych zmiennych,
 * a ich reguła `.woocommerce form .form-row .input-text` ma wyższą
 * specyficzność niż nasze — w motywie ciemnym zostawały białe pola z czarną
 * ramką. `html:root` wygrywa z `:root` z woocommerce.css niezależnie od
 * kolejności arkuszy.
 */
html:root {
	--wc-form-color-background: var(--bo-white);
	--wc-form-color-text:       var(--bo-ink);
	--wc-form-border-color:     var(--bo-field);
	--wc-form-border-radius:    10px;
}

/* --- pasy marki ------------------------------------------------------------
   Stopka i pasek nawigacji są ciemne/zielone w OBU motywach — to elementy
   marki, a nie powierzchnie dokumentu. Zbudowano je jednak na tokenach
   powierzchni (`--bo-ink` jako tło, `--bo-white` jako tekst), które w motywie
   ciemnym zamieniają się rolami. Skutek: stopka dostawała JASNE tło, a jej
   teksty — zapisane wprost jako białe — stawały się niewidoczne.

   Te dwa tokeny celowo nie mają odpowiednika w blokach motywu ciemnego.
   Zmiana ich wartości tam byłaby powtórzeniem tego samego błędu.
   -------------------------------------------------------------------------- */

:root {
	--bo-band:     #1f2421;   /* tło pasa marki */
	--bo-on-brand: #ffffff;   /* tekst na pasie marki i na zieleni */
}

/* ==========================================================================
   MOTYW CIEMNY (WF-61)

   Trzy stany, tak jak wybór użytkownika: „jasny", „ciemny" i „jak system".
   Wybór stempluje `data-theme` na <html> (patrz header.php).

   DOMYŚLNIE JASNY, a nie „jak system". Większość maszyn ma dziś ciemny
   motyw systemowy, więc domyślne pójście za systemem znaczyło, że katalog
   i karty ofert prawie zawsze otwierały się ciemne — w wyglądzie, dla
   którego zdjęcia towaru i barwy marki nie były projektowane. Za systemem
   idziemy dopiero, gdy użytkownik sam o to poprosi (`data-theme="system"`).

   Nadpisujemy WYŁĄCZNIE tokeny. Kontrast tekstu do tła utrzymany powyżej
   4,5:1, tak jak wymaga WCAG 2.1 AA (WN-30) — zieleń marki rozjaśniona,
   bo w wersji z makiet na ciemnym tle schodziła poniżej progu.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root[data-theme="system"] {
		--bo-green:          #2ea55c;
		--bo-green-contrast: #35b365;
		--bo-green-dark:     #7ad39c;
		--bo-green-100:      #16351f;
		--bo-green-50:       #12281a;

		--bo-ink:            #f2f5f3;
		--bo-black:          #0f1210;
		--bo-text:           #dfe4e0;
		--bo-muted:          #a3adb5;
		--bo-text-soft:      #c2c9c4;
		--bo-placeholder:    #8b938d;
		--bo-field:          #4a524d;
		/* Pole wyboru ma własną obwódkę i ptaszek: `--bo-field` dawał na
		   ciemnej karcie 2,16:1, a biały ptaszek na rozjaśnionej zieleni
		   2,70:1. Te pary trzymają 4,79:1 i 7,03:1. */
		--bo-check-border:   #7d8983;
		--bo-check-mark:     #07130c;
		--bo-stroke:         #2f3733;
		--bo-select-arrow:   url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23b9c2bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		--bo-surface:        #171b19;
		--bo-white:          #121614;

		--bo-danger:         #ff6b6d;
		--bo-sale:           #ff6b6d;
		--bo-verified:       #35b365;
		--bo-verified-bg:    #13291c;
		--bo-gray-100:       #1e2321;
		--bo-star:           #f0bf3c;

		--bo-page:           #0f1210;
		--bo-card:           #171b19;
		--bo-border:         #2f3733;
		--bo-shadow-color:   rgba(0, 0, 0, 0.5);

		--bo-tint-danger:      #2b1616;
		--bo-tint-danger-ink:  #ff9a9b;
		--bo-tint-success:     #12281a;
		--bo-tint-success-ink: #6fd39a;
		--bo-tint-warn:        #2a2313;
		--bo-tint-warn-ink:    #e7c977;
		--bo-tint-warn-line:   #4a3f1f;
		--bo-tint-neutral:     #1e2321;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bo-green:          #2ea55c;
	--bo-green-contrast: #35b365;
	--bo-green-dark:     #7ad39c;
	--bo-green-100:      #16351f;
	--bo-green-50:       #12281a;

	--bo-ink:            #f2f5f3;
	--bo-black:          #0f1210;
	--bo-text:           #dfe4e0;
	--bo-muted:          #a3adb5;
	--bo-text-soft:      #c2c9c4;
	--bo-placeholder:    #8b938d;
	--bo-field:          #4a524d;
	--bo-check-border:   #7d8983;
	--bo-check-mark:     #07130c;
	--bo-stroke:         #2f3733;
	--bo-select-arrow:   url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23b9c2bc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bo-surface:        #171b19;
	--bo-white:          #121614;

	--bo-danger:         #ff6b6d;
	--bo-sale:           #ff6b6d;
	--bo-verified:       #35b365;
	--bo-verified-bg:    #13291c;
	--bo-gray-100:       #1e2321;
	--bo-star:           #f0bf3c;

	--bo-page:           #0f1210;
	--bo-card:           #171b19;
	--bo-border:         #2f3733;
	--bo-shadow-color:   rgba(0, 0, 0, 0.5);

	--bo-tint-danger:      #2b1616;
	--bo-tint-danger-ink:  #ff9a9b;
	--bo-tint-success:     #12281a;
	--bo-tint-success-ink: #6fd39a;
	--bo-tint-warn:        #2a2313;
	--bo-tint-warn-ink:    #e7c977;
	--bo-tint-warn-line:   #4a3f1f;
	--bo-tint-neutral:     #1e2321;
	color-scheme: dark;
}


/*
 * Arkusze cząstkowe są kolejkowane osobno w functions.php:
 *   assets/css/fonts.css   — @font-face (self-hosting, RODO)
 *   assets/css/base.css    — reset, typografia, prymitywy układu
 *   assets/css/header.css  — nagłówek serwisu i nawigacja
 *   assets/css/footer.css  — stopka
 * Ten plik zawiera wyłącznie nagłówek motywu i tokeny, aby WordPress mógł
 * odczytać metadane bez parsowania całego CSS.
 */