/* ═══════════════════════════════════════════════════════════════════
   TOKENY I KROJE
   Źródło prawdy dla całego motywu. Odpowiada design systemowi z makiety.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kroje self-hosted ──────────────────────────────────────────────
   Nie z Google Fonts: jedno połączenie zewnętrzne mniej, szybszy pierwszy
   render i brak przekazywania IP odwiedzających do Google — co przy RODO
   jest realnym argumentem, nie formalnością.

   Archivo jest fontem ZMIENNYM: jeden plik obsługuje wagi 400–800,
   dlatego font-weight to zakres, nie liczba. IBM Plex Mono zmienny nie
   jest — stąd osobne pliki na wagę.

   Podzbiory: latin + latin-ext. Polskie znaki diakrytyczne (ą ć ę ł ń ś ź ż)
   leżą w latin-ext, więc oba są wymagane. Wietnamski z makiety pominięty.
   ─────────────────────────────────────────────────────────────────── */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin-var.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;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 800;
	font-stretch: 100%;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext-var.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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400-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;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500-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;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-500-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: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600-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;
}

@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/ibm-plex-mono-600-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;
}

/* ── Paleta ─────────────────────────────────────────────────────────
   Motyw jest DARK-FIRST — :root niesie wariant ciemny, bo taki jest
   charakter marki. Wariant jasny nadpisuje tokeny w trzech miejscach:

     1. @media (prefers-color-scheme: light) + :not([data-gt-theme="dark"])
        — dla odwiedzających w trybie AUTO z jasnym systemem,
     2. [data-gt-theme="light"] — dla jawnego wyboru „JASNY",
     3. (ciemny nie potrzebuje trzeciego bloku, bo jest domyślny)

   Warunek :not() w media query jest konieczny: bez niego jasny system
   przebijałby jawny wybór ciemnego motywu.
   ─────────────────────────────────────────────────────────────────── */

:root {
	/* Kroje */
	--gt-font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--gt-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

	/* Akcent — ten sam w obu motywach; nośnik tożsamości marki */
	--gt-acc: #E2431F;
	--gt-acc-soft: rgba(226, 67, 31, .14);
	--gt-acc-ink: #FFFFFF;

	/* Powierzchnie i tekst — wariant CIEMNY (domyślny) */
	--gt-bg: #0A0B0D;
	--gt-bg2: #0F1114;
	--gt-surf: #14171B;
	--gt-surf2: #1B1F25;
	--gt-line: #262B31;
	--gt-line2: #333A42;
	--gt-tx: #EDEFF2;
	--gt-tx2: #98A0AA;
	--gt-tx3: #6E767F;
	--gt-grid: rgba(255, 255, 255, .05);
	--gt-ph: rgba(255, 255, 255, .055);
	--gt-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	--gt-overlay: rgba(10, 11, 13, .82);

	/* Kolory znaczące — niezależne od akcentu */
	--gt-ok: #6BC98C;
	--gt-ok-bg: #14301E;
	--gt-warn: #DFAE4E;
	--gt-warn-bg: #33260C;
	--gt-crit: #F08A80;
	--gt-crit-bg: #3A1512;

	/* Geometria — promień 2px trzyma industrialny, techniczny charakter */
	--gt-r: 2px;
	--gt-r-lg: 4px;

	/* Rytm pionowy — skala oparta na 4px */
	--gt-s1: .25rem;
	--gt-s2: .5rem;
	--gt-s3: .75rem;
	--gt-s4: 1rem;
	--gt-s5: 1.5rem;
	--gt-s6: 2rem;
	--gt-s7: 3rem;
	--gt-s8: 4rem;
	--gt-s9: 5.5rem;

	/* Marginesy strony — płynne, bez breakpointów */
	--gt-gut: clamp(1rem, 3vw, 2.75rem);

	/* Szerokości */
	--gt-max: 88rem;
	--gt-measure: 42rem;

	/* Skala typograficzna */
	--gt-t-h1: clamp(2.2rem, 6.4vw, 4.6rem);
	--gt-t-h2: clamp(1.8rem, 4.6vw, 3.2rem);
	--gt-t-h3: clamp(1.25rem, 2.6vw, 1.75rem);
	--gt-t-lead: clamp(1rem, 1.6vw, 1.15rem);
	--gt-t-body: 1rem;
	--gt-t-sm: .875rem;
	--gt-t-xs: .75rem;
	--gt-t-mono: .6875rem;

	/* Ruch */
	--gt-ease: cubic-bezier(.2, .7, .2, 1);
	--gt-fast: .15s;
	--gt-slow: .5s;

	/* Wysokości belki — potrzebne do sticky offsetów w kilku miejscach */
	--gt-topbar-h: 2.5rem;
	--gt-navbar-h: 4.75rem;
	--gt-header-h: calc(var(--gt-topbar-h) + var(--gt-navbar-h));

	color-scheme: dark;
}

/* Wariant JASNY — tryb AUTO przy jasnym systemie.
   :not([data-gt-theme="dark"]) sprawia, że jawny wybór ciemnego wygrywa. */
@media (prefers-color-scheme: light) {
	:root:not([data-gt-theme="dark"]) {
		--gt-bg: #F4F3F1;
		--gt-bg2: #FFFFFF;
		--gt-surf: #FFFFFF;
		--gt-surf2: #EBE9E5;
		--gt-line: #DBD8D3;
		--gt-line2: #C9C5BE;
		--gt-tx: #12151A;
		--gt-tx2: #5B626B;
		--gt-tx3: #8A9199;
		--gt-grid: rgba(0, 0, 0, .055);
		--gt-ph: rgba(0, 0, 0, .05);
		--gt-shadow: 0 18px 48px rgba(0, 0, 0, .1);
		--gt-overlay: rgba(244, 243, 241, .86);

		--gt-ok: #1F6B3E;
		--gt-ok-bg: #E3F0E7;
		--gt-warn: #8A5A00;
		--gt-warn-bg: #FAEFD6;
		--gt-crit: #A5231A;
		--gt-crit-bg: #FBE4E2;

		color-scheme: light;
	}
}

/* Wariant JASNY — jawny wybór odwiedzającego. Musi być osobnym blokiem,
   żeby wygrywał także wtedy, gdy system jest ustawiony na ciemny. */
:root[data-gt-theme="light"] {
	--gt-bg: #F4F3F1;
	--gt-bg2: #FFFFFF;
	--gt-surf: #FFFFFF;
	--gt-surf2: #EBE9E5;
	--gt-line: #DBD8D3;
	--gt-line2: #C9C5BE;
	--gt-tx: #12151A;
	--gt-tx2: #5B626B;
	--gt-tx3: #8A9199;
	--gt-grid: rgba(0, 0, 0, .055);
	--gt-ph: rgba(0, 0, 0, .05);
	--gt-shadow: 0 18px 48px rgba(0, 0, 0, .1);
	--gt-overlay: rgba(244, 243, 241, .86);

	--gt-ok: #1F6B3E;
	--gt-ok-bg: #E3F0E7;
	--gt-warn: #8A5A00;
	--gt-warn-bg: #FAEFD6;
	--gt-crit: #A5231A;
	--gt-crit-bg: #FBE4E2;

	color-scheme: light;
}

/* ── Animacje ───────────────────────────────────────────────────────
   Zdefiniowane centralnie, używane w komponentach. Każde ich użycie
   musi respektować prefers-reduced-motion — patrz base.css.
   ─────────────────────────────────────────────────────────────────── */

@keyframes gt-pulse {
	0%, 100% { opacity: .3; }
	50% { opacity: 1; }
}

@keyframes gt-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@keyframes gt-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

@keyframes gt-spin {
	to { transform: rotate(360deg); }
}