/* File: /assets/css/tokens.css
   System designu DomMalowanie.pl. Jeden tryb - jasny, cieply.
   Paleta wyjeta z realnych zdjec Andrzeja: biala sciana, deska debowa,
   grafitowa oscieznica, koral z logo (dach "M"). Zielen = zaufanie i "za darmo".

   Kierunek: "Wykonczone". Kontrast surowego (beton, budowa w toku) i gotowego
   (swiatlo na swiezej scianie, cieply debowy parkiet).
   ========================================================================== */

/* --- Fonty zmiennodrukowe, self-hosted, JEDEN plik na rodzine ------------
   Kazdy plik jest wlasnym podzbiorem z pelnym pokryciem polskich znakow
   (Latin + Latin Extended-A: a c e l n o s z z, cudzyslowy drukarskie, euro).
   Zbudowane z pelnych fontow zmiennych Google przez dev/fonts/build.sh
   (pyftsubset). Zero podzialu na "latin/latin-ext" - to bylo zrodlo mylenia.

   Schibsted Grotesk: UI, naglowki, etykiety, liczby.
   Newsreader: proza - leady, podstrony matrycy, blog. Da tekstowi ludzki rys. */
@font-face {
	font-family: 'Schibsted Grotesk';
	src: url('../fonts/schibsted-grotesk-pl.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/newsreader-pl.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@property --dm-sheen {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false;
}

:root {
	/* --- Kolory: powierzchnie --- */
	--dm-wall: #f7f4ef;          /* cieple bialo tla - swiezo pomalowana sciana */
	--dm-wall-2: #f1ece2;        /* delikatnie glebszy warstwowy odcien */
	--dm-paper: #ffffff;         /* czysta biel - swieza gladz, karta */
	--dm-graphite: #26241f;      /* ciemna sekcja - "budowa w toku", stopka */
	--dm-graphite-2: #322f28;

	/* --- Kolory: atrament i tekst --- */
	--dm-ink: #211e1a;           /* tekst glowny - cieply prawie-czarny */
	--dm-slate: #5c574e;         /* tekst drugorzedny - cieply szary betonu */
	--dm-slate-soft: #8b8478;    /* podpisy, metadane */
	--dm-on-dark: #f4efe6;       /* tekst na grafitowym tle */
	--dm-on-dark-soft: #b3aa9a;

	/* --- Kolory: linie i obrysy --- */
	--dm-line: #e4ddd1;          /* cieply hairline */
	--dm-line-strong: #d3c9b7;

	/* --- Kolory: drewno (cieply ton wspierajacy) --- */
	--dm-oak: #c99a63;
	--dm-oak-soft: #efe3d2;
	--dm-oak-line: #e0cdb0;

	/* --- Kolory: marka (koral z logo) - jedyny akcent --- */
	--dm-coral: #e4573d;
	--dm-coral-deep: #c13b22;    /* tlo przyciskow, tekst wymagajacy kontrastu */
	--dm-coral-press: #a3301b;
	--dm-coral-soft: #fbe7e1;
	--dm-coral-tint: #f7d9d0;

	/* --- Kolory: zielen zaufania (semantyka, nie akcent marki) --- */
	--dm-green: #1f6e4c;
	--dm-green-deep: #185b3e;
	--dm-green-soft: #e3efe7;

	/* --- Kolory: stan --- */
	--dm-warn: #b5761b;
	--dm-warn-soft: #f6ead3;

	/* --- Fonty --- */
	--dm-font-ui: 'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--dm-font-display: 'Schibsted Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--dm-font-prose: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

	/* --- Skala typografii (fluid, clamp) --- */
	--dm-text-xs: 0.75rem;
	--dm-text-sm: 0.875rem;
	--dm-text-base: 1rem;
	--dm-text-md: 1.0625rem;
	--dm-text-lg: clamp(1.125rem, 0.3vw + 1.05rem, 1.25rem);
	--dm-text-xl: clamp(1.35rem, 1vw + 1.05rem, 1.6rem);
	--dm-h3: clamp(1.4rem, 1.4vw + 1rem, 1.85rem);
	--dm-h2: clamp(1.8rem, 2.6vw + 1rem, 2.7rem);
	--dm-h1: clamp(2.3rem, 3.4vw + 1rem, 3.55rem);
	--dm-display: clamp(2.6rem, 5vw + 1rem, 4.4rem);

	/* --- Rytm / spacing --- */
	--dm-space-3xs: 0.25rem;
	--dm-space-2xs: 0.5rem;
	--dm-space-xs: 0.75rem;
	--dm-space-sm: 1rem;
	--dm-space-md: 1.5rem;
	--dm-space-lg: 2.5rem;
	--dm-space-xl: 4rem;
	--dm-space-2xl: 6rem;
	--dm-section: clamp(3.5rem, 7vw, 6.5rem);

	/* --- Uklad --- */
	--dm-container: 1200px;
	--dm-container-wide: 1360px;
	--dm-reading: 68ch;
	--dm-gutter: clamp(1rem, 4vw, 2.25rem);

	/* --- Promienie --- */
	--dm-r-xs: 4px;
	--dm-r-sm: 8px;
	--dm-r-md: 14px;
	--dm-r-lg: 22px;
	--dm-r-pill: 999px;

	/* --- Cienie: skapo, wg roli --- */
	--dm-shadow-sm: 0 1px 2px rgba(38, 36, 31, 0.05), 0 2px 6px rgba(38, 36, 31, 0.04);
	--dm-shadow-md: 0 4px 12px rgba(38, 36, 31, 0.07), 0 14px 32px rgba(38, 36, 31, 0.08);
	--dm-shadow-lg: 0 10px 24px rgba(38, 36, 31, 0.1), 0 34px 70px rgba(38, 36, 31, 0.14);
	--dm-shadow-coral: 0 8px 22px rgba(193, 59, 34, 0.28);

	/* --- Ruch --- */
	--dm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dm-dur-fast: 140ms;
	--dm-dur: 260ms;
	--dm-dur-slow: 520ms;

	/* --- Warstwy --- */
	--dm-z-header: 100;
	--dm-z-sticky-cta: 120;
	--dm-z-menu: 200;
	--dm-z-modal: 300;

	/* --- Rozmiary elementow stalych --- */
	--dm-header-h: 76px;
	--dm-header-h-scrolled: 62px;
	--dm-sticky-cta-h: 64px;
}

@media (max-width: 600px) {
	:root {
		--dm-header-h: 64px;
		--dm-header-h-scrolled: 58px;
	}
}