/*
 * Márka-réteg a Bootstrap 5.3 fölött (CDN-ről, változatlanul). A Bootstrap
 * saját komponens-színei (.btn-primary, .form-control:focus, ...) statikus
 * hex-értékekre vannak fordítva, nem a --bs-primary custom property-ból
 * származnak futásidőben - ezért az átszínezésükhöz Sass-újrafordítás
 * nélkül mindegyiket explicit felül kell írni itt, színmódonként egyszer.
 */

:root {
	--bs-body-font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

	--bs-primary: #6d5ef5;
	--bs-primary-rgb: 109, 94, 245;
	--bs-link-color: #6d5ef5;
	--bs-link-color-rgb: 109, 94, 245;
	--bs-link-hover-color: #5747e0;
	--bs-link-hover-color-rgb: 87, 71, 224;

	--bs-border-radius: 0.75rem;
	--bs-border-radius-sm: 0.5rem;
	--bs-border-radius-lg: 1rem;

	--brand-focus-border: #b8aefb;
	--brand-focus-shadow-rgb: 109, 94, 245;

	--bs-body-bg: #f7f6fe;
}

[data-bs-theme="dark"] {
	--bs-primary: #9b8cff;
	--bs-primary-rgb: 155, 140, 255;
	--bs-link-color: #9b8cff;
	--bs-link-color-rgb: 155, 140, 255;
	--bs-link-hover-color: #b3a7ff;
	--bs-link-hover-color-rgb: 179, 167, 255;

	--brand-focus-border: #6b5ecf;
	--brand-focus-shadow-rgb: 155, 140, 255;

	--bs-body-bg: #15131f;
	--bs-tertiary-bg: #1c1930;
}

body {
	min-height: 100vh;
	background-image: radial-gradient(circle at 15% 0%, rgba(109, 94, 245, 0.10), transparent 45%),
		radial-gradient(circle at 100% 20%, rgba(109, 94, 245, 0.08), transparent 40%);
	background-attachment: fixed;
}

.navbar-brand {
	letter-spacing: -0.02em;
}

.card {
	border: none;
	box-shadow: 0 1rem 2.5rem rgba(20, 15, 60, 0.08);
}

[data-bs-theme="dark"] .card {
	box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

/* Teljes szélességű mód: a Bootstrap .container töréspontonkénti max-width-je megszűnik. */
[data-layout="fluid"] .container {
	max-width: none;
}

#theme-toggle,
#layout-toggle {
	width: 2.25rem;
	height: 2.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/* A .btn-primary statikus hex-értékekre van fordítva állapotonként - lásd a fájl fejléc-kommentjét. */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #6d5ef5;
	--bs-btn-border-color: #6d5ef5;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #5a4ae3;
	--bs-btn-hover-border-color: #5445d6;
	--bs-btn-focus-shadow-rgb: 133, 117, 247;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #5445d6;
	--bs-btn-active-border-color: #4f3fc9;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #6d5ef5;
	--bs-btn-disabled-border-color: #6d5ef5;
}

[data-bs-theme="dark"] .btn-primary {
	--bs-btn-color: #171225;
	--bs-btn-bg: #9b8cff;
	--bs-btn-border-color: #9b8cff;
	--bs-btn-hover-color: #171225;
	--bs-btn-hover-bg: #ac9fff;
	--bs-btn-hover-border-color: #ac9fff;
	--bs-btn-focus-shadow-rgb: 155, 140, 255;
	--bs-btn-active-color: #171225;
	--bs-btn-active-bg: #b8adff;
	--bs-btn-active-border-color: #b8adff;
	--bs-btn-disabled-color: #171225;
	--bs-btn-disabled-bg: #9b8cff;
	--bs-btn-disabled-border-color: #9b8cff;
}

/* Nem-hibás fókuszgyűrű a márkaszínben - a .form-control:focus alapértelmezett
   border/shadow értéke a Bootstrap kékjére van hardkódolva, ugyanaz az ok, mint a fenti .btn-primary-nál. */
.form-control:focus:not(.is-invalid) {
	border-color: var(--brand-focus-border);
	box-shadow: 0 0 0 0.25rem rgba(var(--brand-focus-shadow-rgb), 0.25);
}

/* A böngészők saját, erőltetett háttérrel festik ki az autofillelt mezőket
   (világos sárgás/kékes árnyalat), teljesen figyelmen kívül hagyva a
   background-color-t - ezt csak egy mező méretű belső (inset) box-shadow
   tudja felülfesteni, és csak a -webkit-text-fill-color (nem a color)
   hat az autofillelt szövegre magára. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--bs-body-color);
	-webkit-box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
	box-shadow: 0 0 0 1000px var(--bs-body-bg) inset;
	caret-color: var(--bs-body-color);
	transition: background-color 600000s 0s, color 600000s 0s;
}

/* Függőleges elválasztó vonal közepes és nagyobb kijelzőn (a Bootstrap nem tartalmaz ilyen segédosztályt). */
@media (min-width: 768px) {
	.border-md-start {
		border-left: var(--bs-border-width) solid var(--bs-border-color);
	}
}