/*
Theme Name:  Brand Perspective - Kamil Sulkowski
Theme URI:   https://kamilsulkowski.pl
Template:    brand-perspective
Author:      Brand Perspective
Description: Motyw potomny strony wizerunkowej kamilsulkowski.pl. Rdzen (progi rem, reset, formularz kontaktowy, biblioteka sekcji) pochodzi z motywu nadrzednego. Tutaj siedzi wylacznie to, co nalezy do tej jednej strony: tokeny marki, uklad landingu i jego sekcje.
Version:     1.11.4
Requires at least: 6.5
Requires PHP: 8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brand-perspective-ks
*/

/* =====================================================================
   TOKENY MARKI

   Nadpisuja tokeny motywu nadrzednego. Kolory pochodza z ksiegi znaku,
   nie sa dobierane na miejscu - lista jest zamknieta i nie dokladamy
   do niej nowych odcieni.

   Podstawa `rem` i progi szerokosci zostaja z motywu nadrzednego.
   Wartosci projektowe podane w pikselach dla ekranu 1440 przeliczono
   dzieleniem przez 10, bo przy tej szerokosci 1rem = 10px.
   ===================================================================== */

:root {
	/* Kolory */

	/* Pomocnicze - WYPROWADZONE z palety „Dostosuj” (specyfikacja 2, M4):
	   zmiana koloru w panelu przechodzi tez przez nie. */
	--ks-tekst-3:       color-mix(in srgb, var(--bp-tekst-2) 83%, var(--bp-biel));
	--ks-tekst-4:       color-mix(in srgb, var(--bp-tekst-2) 56%, var(--bp-biel));
	--ks-tlo-hover:     color-mix(in srgb, var(--bp-akcent) 7%, var(--bp-biel));
	/*
	   TEKST NA CIEMNYM TLE JEST BIALY, BEZ WYJATKOW.

	   Te trzy tokeny mialy wczesniej przezroczystosc 85, 80 i 75 procent,
	   czyli dawaly na czerni jasna szarosc. Przygaszony napis na ciemnym
	   tle nie czyta sie jako „drugorzedny" tylko jako „wyblakly" - roznice
	   hierarchii niesie tu rozmiar i grubosc pisma, a nie moc bieli.

	   Nazwy zostaja, bo odwoluje sie do nich caly arkusz sekcji. Zmiana
	   wartosci w jednym miejscu obejmuje kazde wystapienie; podmiana nazw
	   wymagalaby przejscia po kilkunastu regulach i ktoras zostalaby
	   pominieta po cichu.
	*/
	--ks-biel-85:       var(--bp-biel);
	--ks-biel-80:       var(--bp-biel);
	--ks-biel-75:       var(--bp-biel);

	/* Te dwa opisuja KRESKI, nie tekst - i dlatego zostaja przezroczyste. */
	--ks-biel-ramka:    color-mix(in srgb, var(--bp-biel) 16%, transparent);
	--ks-biel-kreska:   color-mix(in srgb, var(--bp-biel) 20%, transparent);

	/* PALETA, KROJE, SZEROKOSC TRESCI I ZAOKRAGLENIE PRZYCHODZA Z „DOSTOSUJ"
	   MOTYWU NADRZEDNEGO (specyfikacja 2, M3-M5, M9). Ten arkusz ich nie
	   nadpisuje: pole w panelu, ktorego arkusz nie slucha, jest gorsze
	   niz brak pola. Kroj naglowkow to zmienna rodzica pod stara nazwa. */
	--ks-pismo-nagl: var(--bp-pismo-naglowki);


	/* Odstepy pionowe sekcji */
	--ks-sekcja:        10.4rem;
	--ks-sekcja-duza:   11.2rem;

	/* Promienie w rem (specyfikacja 2, M8) */
	--ks-promien-kafel:    2.6rem;
	--ks-promien-kafel-s:  2rem;
	--ks-promien-panel:    2.4rem;
	--ks-promien-btn:      var(--bp-btn-promien);

	/* Cienie */
	--ks-cien-naglowek:      0 6px 30px color-mix(in srgb, var(--bp-czern) 8%, transparent);
	--ks-cien-naglowek-mocny:0 12px 44px color-mix(in srgb, var(--bp-czern) 16%, transparent);
	--ks-cien-kafelek:       0 18px 44px color-mix(in srgb, var(--bp-czern) 14%, transparent);
}

/* Nagłówki maja wlasny kroj - to jedyne miejsce, gdzie druga rodzina
   wchodzi do gry. Reszta strony dziedziczy IBM Plex Sans po `body`. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ks-pismo-nagl);
	letter-spacing: -0.01em;
}

::selection {
	background: var(--bp-akcent);
	color: var(--bp-biel);
}

html {
	scroll-behavior: smooth;
}

/* Nagłówek jest przyklejony, wiec kotwica przewinieta pod niego chowa
   poczatek sekcji. Odstep robi `scroll-margin`, a nie pusty element. */
[id] {
	scroll-margin-top: 12rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}