/*
Theme Name: D-dance
Description: Autorski motyw szkoły tańca D-dance (Ząbki). System projektowy: turkus + limonka + czerń/biel, Archivo, siatka 8px.
Author: D-dance
Version: 0.17.1
Text Domain: d-dance
Requires PHP: 8.0
*/

/* ==========================================================
   ETAP 3 — SYSTEM PROJEKTOWY
   Pełny opis decyzji i uzasadnień: DESIGN_SYSTEM.md w katalogu głównym.
   Ten plik: reset, tokeny (custom properties), typografia bazowa,
   layout ogólny, dostępność. Style komponentów: assets/css/components.css.
   ========================================================== */

/* --- Font: Archivo (variable, self-hosted, tylko styl normal — bez kursywy) --- */
@font-face {
	font-family: "Archivo Variable";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/archivo-variable-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Archivo Variable";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/archivo-variable-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokeny --- */
:root {
	/* Kolory marki — mniej zielony, bardziej niebieski odcień turkusu (feedback po Etapie 3) */
	--color-turquoise: #0e93a8;       /* powierzchnie, duże elementy — białe nagłówki (duży tekst, 3.65:1) */
	--color-turquoise-dark: #0a7690;  /* tekst turkusowy na bieli, przyciski z białym tekstem — 5.2:1 z bielą (AA) */
	--color-turquoise-pale: #e5f4f6;  /* tło sekcji, delikatny akcent */
	--color-lime: #c0da2f;            /* akcent oszczędny + focus ring (nawiązanie do MOK Ząbki) */

	/* Neutralne */
	--color-ink: #14161a;             /* tekst podstawowy, ciemne tła sekcji */
	--color-white: #ffffff;
	--color-paper: #f7f6f2;           /* ciepła alternatywa bieli pod sekcje */
	--color-gray-600: #53565c;        /* tekst drugorzędny na jasnym tle */
	--color-gray-500: #6e7278;        /* jaśniejszy szary z białym tekstem — min. 4.5:1 (AA) */
	--color-gray-200: #e3e2dc;        /* obramowania, linie na jasnym tle */
	--color-fog-300: #aeb3b8;         /* tekst drugorzędny na ciemnym tle */

	/* Typografia */
	--font-sans: "Archivo Variable", Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
	--text-display: clamp(2.75rem, 2rem + 3vw, 5.5rem);
	--text-h2: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	--text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--text-body: 1rem;
	--text-small: 0.875rem;
	--text-eyebrow: 0.8125rem;
	--lh-tight: 1.05;
	--lh-heading: 1.15;
	--lh-body: 1.6;
	--ls-tight: -0.02em;
	--ls-eyebrow: 0.08em;

	/* Odstępy — skala 8px */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;
	--space-10: 8rem;
	--space-11: 10rem;

	/* Kształt — pill (feedback po Etapie 3: bardziej zaoblone przyciski) */
	--radius-sm: 6px;
	--radius-md: 16px;
	--radius-button: 999px;
	--shadow-card: 0 20px 40px -24px rgba(20, 22, 26, 0.35);

	/* Layout */
	--container-max: 78rem;
	--container-pad: clamp(1.5rem, 5vw, 4rem);
}

/* --- Reset --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-white);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: var(--text-body);
	line-height: var(--lh-body);
}

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

/* --- Typografia bazowa --- */
h1,
h2,
h3,
h4 {
	font-weight: 800;
	line-height: var(--lh-heading);
	letter-spacing: var(--ls-tight);
	margin: 0 0 var(--space-5);
}

h1 {
	font-size: var(--text-display);
	line-height: var(--lh-tight);
}

h2 {
	font-size: var(--text-h2);
}

h3 {
	font-size: var(--text-h3);
	font-weight: 700;
}

p {
	margin: 0 0 var(--space-5);
	max-width: 68ch;
}

a {
	color: var(--color-turquoise-dark);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--color-ink);
}

.eyebrow {
	display: inline-block;
	font-size: var(--text-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-turquoise-dark);
	margin: 0 0 var(--space-2);
}

.lead {
	font-size: var(--text-lead);
	max-width: 42ch;
}

/* --- Dostępność --- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-5);
	background: var(--color-ink);
	color: var(--color-white);
	font-weight: 700;
	border-radius: var(--radius-sm);
	z-index: 10000;
	clip: auto;
	overflow: visible;
}

/* Turkus jako focus ring by się nie zgadzał z limonką użytą tuż obok — limonka
   zarezerwowana wyłącznie na akcent i focus, żeby była zawsze jednoznaczna. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

@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;
	}
}

/* --- Animacje wejścia przy przewijaniu ---
   Domyślnie w pełni widoczne (bezpieczny fallback, jeśli JS się nie wykona).
   assets/js/scroll-reveal.js dodaje .reveal-pending elementom poza kadrem
   i zdejmuje ją, gdy wjadą w widok (IntersectionObserver). Reguła
   prefers-reduced-motion powyżej i tak redukuje czas przejścia do ~0. */
.reveal-in {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-in.reveal-pending {
	opacity: 0;
	transform: translateY(20px);
}

/* Warianty kierunku — np. profile instruktorów (na przemian lewo/prawo)
   wjeżdżają z boku zamiast z dołu, zgodnie z rytmem układu. */
.reveal-in--from-left.reveal-pending {
	transform: translateX(-40px);
}

.reveal-in--from-right.reveal-pending {
	transform: translateX(40px);
}

/* Kafelki Oferty — "wyskakiwanie" (lekkie powiększenie), nie wjazd
   od dołu/boku jak gdzie indziej. Wolniejsze przejście (0.8s zamiast
   bazowych 0.6s) + osobne opóźnienie na kafelek (inline style w szablonie,
   patrz page-oferta.php) — każdy kafelek pojawia się po kolei, nie cały
   rząd naraz. */
.reveal-in--zoom {
	transition-duration: 0.8s;
}

.reveal-in--zoom.reveal-pending {
	transform: scale(0.88);
}

.reveal-in--delay-1 {
	transition-delay: 0.08s;
}

.reveal-in--delay-2 {
	transition-delay: 0.16s;
}

.reveal-in--delay-3 {
	transition-delay: 0.24s;
}

/* --- Layout ogólny --- */
.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Padding sekcji zależy od KLASY (.section--*), nie od znacznika <section> —
   część szablonów używa <div>/<article>/<nav> z tą samą klasą tła, więc
   musi dostawać ten sam padding. Bazowanie na tagu powodowało realną
   niespójność (np. Grafik miał go zero, bo używał <div>). */
[class*="section--"] {
	padding-block: var(--space-9);
}

[class*="section--"] + [class*="section--"] {
	border-top: 1px solid var(--color-gray-200);
}