/*
 * Tokeny strony trinitydsk.com — JEDYNE miejsce z wartościami (kolory, pismo, odstępy, promienie, cienie, ruch).
 * site.css używa wyłącznie var(--…); kolor wpisany wprost w site.css zatrzyma test (tests/site.test.js).
 *
 * Trzy warstwy:
 *   1. Fonty (samohostowane, licencja SIL OFL 1.1 — zrodla/LICENCJE-fontow.md).
 *   2. Paleta — surowe kolory: marka (z logo) i neutralne. Tych nazw NIE używa się w site.css.
 *   3. Znaczenie — tokeny, których używa site.css. Każdy kolor ma od razu wartość jasną i ciemną: light-dark(jasny, ciemny).
 *      Motyw wybiera `color-scheme` na <html>: systemowy albo ręczny (data-theme="light" | "dark", przełącznik w nagłówku).
 *
 * Wartości zależne od motywu, które NIE są kolorami (logo, ikona przełącznika), stoją w bloku na końcu pliku —
 * light-dark() działa tylko dla kolorów.
 */

/* ── 1. Fonty ─────────────────────────────────────────────────────────────────────────────── */

/* Sora (zmienna grubość 300–800): łacina podstawowa + osobny plik z samymi polskimi literami (ąćęłńśźż i wielkie —
   6 KB zamiast 40 KB pełnej łaciny rozszerzonej; „ó” jest w podstawowej). */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/sora-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: 'Sora';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/sora-pl.woff2') format('woff2');
	unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
/* VT323 — krój terminala z lat 80. do bloku kontaktu. Przeglądarka pobiera go dopiero, gdy coś nim się pisze. */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vt323-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: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/vt323-pl.woff2') format('woff2');
	unicode-range: U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}

:root {
	color-scheme: light dark;

	/* ── 2. Paleta ──────────────────────────────────────────────────────────────────────────── */

	/* Marka — próbki z logo (zrodla/logo-biale-tlo.png). */
	--brand-violet: #5708a1;
	--brand-magenta: #ed2786;
	--brand-orange: #f66f23;
	--brand-ink: #07111b;

	--violet-300: #b693ff;
	--violet-100: #efe6ff;
	--violet-glow: rgb(108 40 210 / 0.22);
	--magenta-700: #b8105f;
	--magenta-300: #ff7ab8;
	--orange-700: #b54a0c;
	--orange-300: #ffa36b;

	/* Grafit — tekst ciągły (brief: nagłówki bardzo ciemny granat, tekst ciemny grafit). */
	--graphite-800: #2a303c;

	--gray-0: #ffffff;
	--gray-50: #f5f6fa;
	--gray-100: #eceef4;
	--gray-200: #dde1ea;
	--gray-400: #9aa2b4;
	--gray-600: #4b5366;

	/* Granat z ciemnego slajdu marki. */
	--navy-200: #c9d3ea;
	--navy-300: #a3b0cd;
	--navy-500: #4f5f84;
	--navy-700: #1d2a48;
	--navy-800: #121c34;
	--navy-900: #0b1428;
	--navy-950: #060c1a;

	/* Monitor bursztynowy (Hercules, terminale z lat 80.) — ekran kontaktu jest ciemny w obu motywach. */
	--amber-400: #ffb347;
	--amber-600: #c97a1c;
	--crt-black: #0d0a07;

	/* ── 3. Znaczenie ───────────────────────────────────────────────────────────────────────── */

	--color-bg: light-dark(var(--gray-50), var(--navy-950));
	/* Poświata w lewym górnym rogu — jak światło na slajdach marki. */
	--color-bg-glow: light-dark(var(--gray-0), rgb(120 140 190 / 0.32));
	--color-bg-deep: light-dark(var(--gray-100), var(--navy-900));

	--color-heading: light-dark(var(--navy-900), var(--gray-50));
	--color-text: light-dark(var(--graphite-800), var(--navy-200));
	--color-text-muted: light-dark(var(--gray-600), var(--navy-300));
	--color-accent: light-dark(var(--brand-violet), var(--violet-300));
	--color-accent-hover: light-dark(var(--brand-magenta), var(--magenta-300));
	--color-focus: var(--brand-magenta);

	--color-surface: light-dark(rgb(255 255 255 / 0.74), rgb(18 28 52 / 0.66));
	--color-surface-border: light-dark(rgb(7 17 27 / 0.08), rgb(201 211 234 / 0.12));
	--color-chip-bg: light-dark(var(--violet-100), rgb(182 147 255 / 0.14));
	--color-chip-text: light-dark(var(--brand-violet), var(--violet-300));
	--color-live: var(--brand-orange);

	/* Trzy akcenty = trzy paski logo (kafelki, ikony, filary). Na ciemnym tle jaśniejsze — kontrast tekstu i ikon. */
	--color-accent-1: light-dark(var(--brand-violet), var(--violet-300));
	--color-accent-2: light-dark(var(--magenta-700), var(--magenta-300));
	--color-accent-3: light-dark(var(--orange-700), var(--orange-300));
	--color-accent-1-soft: light-dark(rgb(87 8 161 / 0.08), rgb(182 147 255 / 0.14));
	--color-accent-2-soft: light-dark(rgb(237 39 134 / 0.08), rgb(255 122 184 / 0.14));
	--color-accent-3-soft: light-dark(rgb(246 111 35 / 0.1), rgb(255 163 107 / 0.14));
	--color-accent-1-solid: var(--brand-violet);
	--color-accent-2-solid: var(--brand-magenta);
	--color-accent-3-solid: var(--brand-orange);

	/* Sekcje: jasne przeplatane delikatnym tłem, ciemnogranatowe rozdzielające (KSC Manager, Kontakt).
	   Sekcja ciemna ma color-scheme: dark — każdy token light-dark() bierze w niej wartość ciemną sam. */
	--color-section-tint: light-dark(var(--gray-0), rgb(18 28 52 / 0.45));
	--color-section-dark: var(--navy-900);
	--color-section-dark-glow: var(--violet-glow);
	--color-header-bg: light-dark(rgb(245 246 250 / 0.82), rgb(6 12 26 / 0.8));
	--color-statement-bg: light-dark(var(--violet-100), rgb(182 147 255 / 0.1));
	--color-on-brand: var(--gray-0);
	--color-brand-glow: var(--brand-magenta);
	--color-selection-bg: var(--brand-magenta);

	--color-shadow: light-dark(rgb(35 25 80 / 0.1), rgb(0 0 0 / 0.45));

	/* Tło: płaszczyzny po lewej i trzy pasy marki po prawej (SVG w index.html). Pasy wygasają ku dołowi. */
	--color-plane: light-dark(rgb(7 17 27 / 0.045), rgb(163 176 205 / 0.07));
	--color-plane-edge: light-dark(rgb(255 255 255 / 0.9), rgb(163 176 205 / 0.22));
	--color-band-violet: light-dark(rgb(87 8 161 / 0.42), rgb(108 40 210 / 0.95));
	--color-band-magenta: light-dark(rgb(237 39 134 / 0.42), rgb(237 39 134 / 0.95));
	--color-band-orange: light-dark(rgb(246 111 35 / 0.42), rgb(246 111 35 / 0.95));
	--color-band-edge: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.6));
	--color-band-fade: light-dark(rgb(255 255 255 / 0), rgb(6 12 26 / 0));

	--gradient-brand: linear-gradient(90deg, var(--brand-violet), var(--brand-magenta) 55%, var(--brand-orange));
	--gradient-text: linear-gradient(90deg, var(--color-accent), var(--brand-magenta) 60%, var(--brand-orange));

	/* Ekran kontaktu — taki sam w obu motywach. */
	--crt-bg: var(--crt-black);
	--crt-text: var(--amber-400);
	--crt-dim: rgb(255 179 71 / 0.5);
	--crt-glow: rgb(255 140 30 / 0.55);
	--crt-scanline: rgb(0 0 0 / 0.28);
	--crt-bar-bg: var(--amber-400);
	--crt-bar-text: var(--crt-black);
	--crt-border: var(--amber-600);

	/* Pismo */
	--font-sans: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'VT323', ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 800;

	--text-xs: 0.78rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
	--text-h3: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
	--text-h2: clamp(1.65rem, 1.3rem + 1.5vw, 2.6rem);
	--text-pillar: clamp(1.2rem, 0.95rem + 0.9vw, 1.65rem);
	--text-statement: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
	--text-h1: clamp(1.6rem, 0.6rem + 4.3vw, 4.1rem);
	--text-crt: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);

	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--tracking-tight: -0.025em;
	--tracking-wide: 0.12em;

	/* Odstępy — skala 4 px */
	--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;
	--gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
	--content-width: 46rem;
	--header-height: 4.5rem;
	--page-width: 76rem;

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;

	--shadow-card: 0 1px 2px var(--color-shadow), 0 18px 40px -18px var(--color-shadow);

	/* Ruch */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 260ms;
	--duration-blink: 1.06s;
}

:root[data-theme='light'] {
	color-scheme: light;
}
:root[data-theme='dark'] {
	color-scheme: dark;
}

/* ── Wartości zależne od motywu, które nie są kolorami ─────────────────────────────────────── */

:root {
	--logo: url('../img/logo-light.webp');
	--show-when-light: inline-block;
	--show-when-dark: none;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--logo: url('../img/logo-dark.webp');
		--show-when-light: none;
		--show-when-dark: inline-block;
	}
}
:root[data-theme='dark'] {
	--logo: url('../img/logo-dark.webp');
	--show-when-light: none;
	--show-when-dark: inline-block;
}