/*
 * Foodle modern stylesheet — minimal kiegészítés a Bootstrap 5-höz.
 *
 * A korábbi `foodle.build.css` Bootstrap 3 + UNINETT téma volt, ami a
 * CDN-ről betöltött BS5-öt felülírta és attól tűnt minden „régi stílusúnak".
 * Ezt a stylesheetet kifejezetten a BS5-höz tervezzük, csak Foodle-specifikus
 * kiegészítéseket tartalmaz (hero gradient, profile dropdown, foodle-info card).
 */

:root {
	/* Tisztán fehér-kék paletta. A korábbi lila/rózsaszín akcensek (volt:
	   accent #7c3aed lila + hero-vég #db2777 rózsaszín) ki — egy árnyalat-
	   családból építkezünk: a primary mély kék (1d4ed8), az accent világos
	   kék (3b82f6); így a gradientek lila/rózsaszín helyett kékárnyalatok.
	   A `--foodle-body-*` / `--foodle-surface-*` tokenek azért szemantikusak
	   (nem konkrét sz.), hogy a [data-bs-theme="dark"] blokk egyszerűen
	   tudja invertálni a felhasználói felület hátterét anélkül, hogy minden
	   szabályban külön kellene felülbírálni. */
	--foodle-primary:        #1d4ed8;
	--foodle-primary-strong: #1e3a8a;
	--foodle-accent:         #3b82f6;
	--foodle-light:          #dbeafe;
	--foodle-dark:           #0b1f44;
	--foodle-soft:           #eff6ff;

	--foodle-body-bg:        #eff6ff;
	--foodle-body-color:     #1e293b;
	--foodle-surface:        #ffffff;
	--foodle-surface-2:      #f8fafc;
	--foodle-border:         #e2e8f0;
	--foodle-border-strong:  #cbd5e1;
	--foodle-muted:          #64748b;
	--foodle-heading:        #0f172a;
	--foodle-link:           var(--foodle-primary);
	--foodle-link-hover:     var(--foodle-primary-strong);
	--foodle-shadow-sm:      0 1px 2px rgba(29, 78, 216, 0.04), 0 6px 18px rgba(29, 78, 216, 0.06);
	--foodle-shadow-md:      0 4px 12px rgba(15, 23, 42, 0.05);
	--foodle-shadow-lg:      0 12px 32px rgba(15, 23, 42, 0.18);
}

/* ── Dark mode paletta ─────────────────────────────────────────────────────
   A BS5.3 `data-bs-theme="dark"` natívan kezeli a BS-komponensek többségét
   (form-control, dropdown, modal, table, alert stb.); itt csak a saját
   `--foodle-*` tokeneket és a BS3-shim/„foodle-*" elemeket állítjuk.
   Az árnyalatok slate-skálából jönnek (Tailwind), hogy modern, semleges
   sötét felületet kapjunk — nem hideg, nem barna; pure black helyett
   slate-900 (kíméletesebb szemnek). */
[data-bs-theme="dark"] {
	--foodle-primary:        #3b82f6;
	--foodle-primary-strong: #60a5fa;
	--foodle-accent:         #60a5fa;
	--foodle-light:          #1e3a8a;
	--foodle-dark:           #020617;
	--foodle-soft:           #1e293b;

	--foodle-body-bg:        #0b1220;
	--foodle-body-color:     #e2e8f0;
	--foodle-surface:        #111a2e;
	--foodle-surface-2:      #1a2540;
	--foodle-border:         #233152;
	--foodle-border-strong:  #334155;
	--foodle-muted:          #94a3b8;
	--foodle-heading:        #f1f5f9;
	--foodle-link:           #93c5fd;
	--foodle-link-hover:     #bfdbfe;
	--foodle-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
	--foodle-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.45);
	--foodle-shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.55);

	color-scheme: dark;
}

body {
	/* "Inter" most már ténylegesen elérhető (Google Fonts a header.php.twig-ben),
	   ezért előrébb kerül a fallback-láncban, hogy modern, jól olvasható tipográfiát
	   kapjon a felhasználó az OS default helyett. */
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	background: var(--foodle-body-bg);
	color: var(--foodle-body-color);
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color .2s ease, color .2s ease;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: -0.015em;
	/* Szándékosan nincs `color` itt: a fejlécek a szülőtől (body / .text-white
	   / .navbar-dark) öröklik a sz. A direkt `color` korábbi verzióban a
	   hero h1 és a navbar-brand fehér szövegét feketére írta sötét háttéren. */
}

/* ── Navbar ───────────────────────────────────────────────────────────── */
.navbar.bg-primary {
	background: linear-gradient(90deg, var(--foodle-primary-strong) 0%, var(--foodle-primary) 60%, var(--foodle-accent) 100%) !important;
	border: 0;
}
.navbar-brand {
	font-weight: 600;
	letter-spacing: -0.01em;
}
/* Logo „pill" a gradiens fölé: fehér, lekerekített, halvány árnyékú chip
   körbeveszi a logo képét, hogy színes vagy sokszínű logo is kontrasztos
   maradjon a navbar gradiensén. A `<span>` appName szöveg érintetlen marad
   (változatlanul fehéren olvasható). A height fix marad 28px-en, csak az
   álló padding ad keretet — így a navbar-bar magassága sem ugrik. */
.navbar-brand img {
	background: #ffffff;
	padding: 4px 8px;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
	box-sizing: content-box;
}
.navbar .dropdown-menu {
	box-shadow: var(--foodle-shadow-lg);
	border: 0;
	border-radius: 0.75rem;
	min-width: 16rem;
}
.navbar .dropdown-item {
	padding: 0.55rem 1rem;
}
.navbar .dropdown-header-user {
	padding: 0.75rem 1rem 0.25rem;
}
.navbar .dropdown-header-user .name {
	font-weight: 600;
	color: var(--foodle-heading);
}
.navbar .dropdown-header-user .email {
	font-size: 0.8rem;
	color: var(--foodle-muted);
	word-break: break-all;
}

/* Navbar téma-toggle gomb (a HeaderBar.js illeszti be). Stílus: szellős
   kerek hit-area, mint a többi nav-link, halvány hover. */
.navbar .theme-toggle {
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.85);
	padding: 0.4rem 0.6rem;
	margin-right: 0.35rem;
	border-radius: 0.5rem;
	font-size: 1.05rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, color .15s ease;
}
.navbar .theme-toggle:hover,
.navbar .theme-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	outline: none;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.foodle-hero {
	background: linear-gradient(120deg, var(--foodle-primary-strong) 0%, var(--foodle-primary) 55%, var(--foodle-accent) 100%);
	border-radius: 1rem;
	overflow: hidden;
	position: relative;
}
.foodle-hero::after {
	content: "";
	position: absolute;
	top: -60%;
	right: -20%;
	width: 60%;
	height: 220%;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
	pointer-events: none;
}
.foodle-hero-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: rgba(255,255,255,0.18);
	color: #fff;
	font-size: 1.1rem;
	backdrop-filter: blur(4px);
}
.tracking-wide { letter-spacing: 0.08em; }

/* ── Info card (jobboldali) ───────────────────────────────────────────── */
.foodle-info {
	background: linear-gradient(160deg, var(--foodle-dark) 0%, #133069 100%);
	color: #f8fafc;
	border-radius: 1rem;
}
.foodle-info h2,
.foodle-info p,
.foodle-info a {
	color: inherit;
}
.foodle-info a:hover {
	color: #fde047;
}

/* ── Generic kis vizuális javítások ───────────────────────────────────── */
.card {
	border-radius: 1rem;
	border-color: var(--foodle-border);
	box-shadow: var(--foodle-shadow-sm);
	/* Szándékosan NINCS itt `color` és `background-color`: a BS5.3 a
	   `.card`-on saját `--bs-card-color` / `--bs-card-bg` tokeneket használ,
	   amik a [data-bs-theme="dark"] alatt magától flippelnek. Ha a saját
	   tokenjeinkre tennénk, felülírnánk a `.foodle-info`-féle szándékosan
	   sötét-háttér-fehér-szöveg-kombójú kártyákat (sourceorderre azonos
	   specificitással → a `.card` nyerne, és a hero-szomszéd „Új Foodle"
	   card fekete szöveget kapna világos témán). */
}
.card-header,
.card-footer {
	background-color: var(--foodle-surface-2);
	border-color: var(--foodle-border);
}
.btn {
	border-radius: 0.625rem;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn-primary {
	background-color: var(--foodle-primary);
	border-color: var(--foodle-primary);
}
.btn-primary:hover, .btn-primary:focus {
	background-color: var(--foodle-primary-strong);
	border-color: var(--foodle-primary-strong);
	box-shadow: 0 6px 14px rgba(29, 78, 216, 0.25);
}
.btn-outline-primary {
	color: var(--foodle-primary);
	border-color: var(--foodle-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
	background-color: var(--foodle-primary);
	border-color: var(--foodle-primary);
}
.btn-light {
	color: var(--foodle-primary-strong);
}
.btn-light:hover {
	background: #fff;
	color: var(--foodle-primary-strong);
}
.list-group-flush > .list-group-item {
	border-color: var(--foodle-border);
	padding: 0.85rem 1.1rem;
	background-color: transparent;
	color: var(--foodle-body-color);
}
hr {
	color: var(--foodle-border-strong);
}
a {
	color: var(--foodle-link);
}
a:hover {
	color: var(--foodle-link-hover);
}

/* ── Help oldal: a beolvasott Markdown kézikönyv tipográfiája ────────── */
.foodle-help-content h2 {
	margin-top: 2.25rem;
	margin-bottom: 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--foodle-border, #e5e7eb);
	font-size: 1.5rem;
	color: var(--foodle-heading);
}
.foodle-help-content h2:first-child {
	margin-top: 0;
}
.foodle-help-content h3 {
	margin-top: 1.75rem;
	margin-bottom: 0.6rem;
	font-size: 1.18rem;
	color: var(--foodle-heading);
}
.foodle-help-content p,
.foodle-help-content ul,
.foodle-help-content ol {
	line-height: 1.7;
}
.foodle-help-content ul li,
.foodle-help-content ol li {
	margin-bottom: 0.35rem;
}
.foodle-help-content code {
	background: var(--foodle-surface-2, #f3f4f6);
	color: var(--foodle-heading);
	padding: 0.15em 0.4em;
	border-radius: 0.25rem;
	font-size: 0.9em;
}
.foodle-help-content pre {
	background: var(--foodle-surface-2, #f3f4f6);
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
}
.foodle-help-content blockquote {
	border-left: 4px solid var(--foodle-primary, #1d4ed8);
	background: var(--foodle-surface-2, #f8fafc);
	margin: 1.25rem 0;
	padding: 0.75rem 1.1rem;
	color: var(--foodle-muted);
}
.foodle-help-content hr {
	margin: 2.25rem 0;
	border: 0;
	border-top: 1px solid var(--foodle-border, #e5e7eb);
}
.foodle-help-content table {
	width: 100%;
	margin: 1rem 0 1.5rem;
	border-collapse: collapse;
}
.foodle-help-content th,
.foodle-help-content td {
	border: 1px solid var(--foodle-border, #e5e7eb);
	padding: 0.55rem 0.75rem;
	text-align: left;
}
.foodle-help-content th {
	background: var(--foodle-surface-2, #f1f5f9);
	font-weight: 600;
}
/* A fixed navbar miatt anchor-ugráskor a célt eltakarná a header,
   ezért scroll-margin-top pufferrel kompenzáljuk. */
.foodle-help-content :target,
.foodle-help-content h2[id],
.foodle-help-content h3[id] {
	scroll-margin-top: 90px;
}

/* ── Profile lista táblák ─────────────────────────────────────────────── */
.table.table-hover tbody tr:hover > * {
	background-color: var(--foodle-surface-2);
	--bs-table-bg-state: var(--foodle-surface-2);
}
.table > thead {
	background: var(--foodle-surface-2);
	color: var(--foodle-primary-strong);
}

.hover-translate-y {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
tr:hover .hover-translate-y {
	transform: translateY(-2px);
	box-shadow: var(--foodle-shadow-sm) !important;
	background-color: var(--foodle-surface) !important;
}

.x-small { font-size: 0.75rem; }
.ls-1 { letter-spacing: 0.05em; }
.italic { font-style: italic; }

/* ── Foodle response oldal (a JS-rendelte response táblázatokhoz) ──── */
#foodleResponse h1,
#foodleResponse h2 {
	letter-spacing: -0.01em;
}

/*
 * ── BS3 → BS5 shim ─────────────────────────────────────────────────────
 * A Foodle response template (templates/foodleresponse.html) még a régi
 * Bootstrap 3 névteret használja (panel, label, glyphicon, pull-right).
 * Ahelyett, hogy egy szuszra átírnánk az egészet, modern megjelenést
 * adunk ezeknek a class-oknak — így a felület BS5-szerű marad, anélkül,
 * hogy a JS templates-t át kéne dolgozni.
 */
.panel {
	border: 1px solid var(--foodle-border);
	border-radius: 0.85rem;
	background: var(--foodle-surface);
	color: var(--foodle-body-color);
	box-shadow: var(--foodle-shadow-sm);
	margin-bottom: 1rem;
	overflow: hidden;
}
.panel-heading {
	padding: 0.75rem 1.1rem;
	background: var(--foodle-surface-2);
	border-bottom: 1px solid var(--foodle-border);
}
.panel-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--foodle-heading);
	letter-spacing: -0.01em;
}
.panel-body {
	padding: 1rem 1.1rem;
}
.panel-default { /* BS3 default panel */ }

/* Régi UNINETT színek modern ekvivalenssel — fehér-kék paletta. */
.uninett-color-lightBlue {
	background: linear-gradient(135deg, var(--foodle-light) 0%, #bfdbfe 100%);
}
.uninett-color-orange {
	background: #fff7ed;
	color: #9a3412;
}
.uninett-color-white {
	background: transparent;
}
.uninett-padded { padding: 1rem; }

/* BS3 lebegtetés és btn-group / pull-right alignment */
.pull-right { float: right; }
.pull-left  { float: left; }

/* BS3 label → BS5 badge */
.label {
	display: inline-block;
	padding: 0.25em 0.55em;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background-color: #94a3b8;
	border-radius: 0.4rem;
}
.label-warning { background-color: #f59e0b; color: #1e293b; }
.label-success { background-color: #10b981; }
.label-danger  { background-color: #ef4444; }
.label-info    { background-color: #0ea5e9; }
.label-primary { background-color: var(--foodle-primary); }

/* Régi glyphicon helyettesítő: a Bootstrap Icons-ot (bi) használjuk a HTML-ben,
   de a glyphicon-* class-os <span>-eket szimbolikusan üresen hagyjuk, hogy ne
   törje a layoutot. Ahol konkrét ikon kell, a JS templ. át kell írni `bi`-re. */
.glyphicon {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.25em;
	vertical-align: -0.125em;
}

/* BS5 dropdown-toggle data-bs-toggle vs data-toggle (BS3) — adunk a régi
   data-toggle="dropdown"-nak is működést azzal, hogy az adatatribútumot
   átalakítjuk a HeaderBar / FoodleResponseController init-jénél (lásd JS). */

/* Régi BS3 col-md-* már van a BS5-ben is, csak más belső rendszer.
   Itt nincs különbség. */

/* "hidden-print" BS3 → BS5 print utility */
@media print {
	.hidden-print { display: none !important; }
}

/* BS3 jumbotron emulalva */
.jumbotron {
	padding: 2rem 2.25rem;
	margin-bottom: 1.5rem;
	background: var(--foodle-surface);
	color: var(--foodle-body-color);
	border-radius: 1rem;
	box-shadow: var(--foodle-shadow-md);
}

/* Régi caret nyíl */
.caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 0.3em;
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

/* ─────────────────────────────────────────────────────────────────────────
   Dark mód — edge case-ek
   ─────────────────────────────────────────────────────────────────────────
   A BS5.3 `data-bs-theme="dark"` a saját komponenseit (.bg-light, .text-*,
   .table, .form-*, .modal, .dropdown, .alert) magától elintézi; az alábbi
   szabályok csak ott szólnak, ahol a BS hardkódolt sz. van, vagy a
   foodle-specifikus felület (hero/info-card/uninett-shim) finomhangolása
   indokolt sötétben.
   ───────────────────────────────────────────────────────────────────────── */

/* Templ.-ekben gyakran használt explicit `bg-white` — sötétben sose
   maradjon hófehér. */
[data-bs-theme="dark"] .bg-white {
	background-color: var(--foodle-surface) !important;
	color: var(--foodle-body-color);
}

/* `.bg-light` BS5.3 már auto-flipel, de a saját kártya-stílusunkkal
   kombinálva érdemes egységesen a felület-2 tokenre normalizálni
   (különben a fehér body-bg-ből visszamaradt low-contrast bg-light
   alig látszik). */
[data-bs-theme="dark"] .bg-light {
	background-color: var(--foodle-surface-2) !important;
}

/* `.text-dark` BS5.3 auto-flipel a `--bs-emphasis-color`-on át, de néhány
   helyen erős kontrasztot akarunk (pl. profile fw-bold sor) — biztos ami
   biztos. */
[data-bs-theme="dark"] .text-dark {
	color: var(--foodle-heading) !important;
}

/* Hero gradient: marad élénk, de egy fokkal sötétebb tónus, hogy ne
   „izzon" sötét háttéren. */
[data-bs-theme="dark"] .foodle-hero {
	background: linear-gradient(120deg, #0c1b3d 0%, #1e3a8a 55%, #2563eb 100%);
}
[data-bs-theme="dark"] .navbar.bg-primary {
	background: linear-gradient(90deg, #0c1b3d 0%, #1e3a8a 60%, #2563eb 100%) !important;
}

/* Info card: a light-mode-ban sötétkék (var(--foodle-dark) → #133069),
   sötét módban túl közel kerül a body-bg-hez, ezért egy árnyalattal
   világosabbá és körvonalassá tesszük, hogy elkülönüljön. */
[data-bs-theme="dark"] .foodle-info {
	background: linear-gradient(160deg, #112349 0%, #1e3a8a 100%);
	border: 1px solid var(--foodle-border-strong);
}

/* Régi UNINETT színek dark variánsai. */
[data-bs-theme="dark"] .uninett-color-lightBlue {
	background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
	color: var(--foodle-heading);
}
[data-bs-theme="dark"] .uninett-color-orange {
	background: #3b2f1a;
	color: #fcd34d;
}

/* BS3 label kontrasztja sötétben — a `label-warning` sárga a sötét
   háttéren is jól olvasható maradjon. */
[data-bs-theme="dark"] .label-warning { color: #1e293b; }

/* Profile/foodle response code-elem-ek (<tt class="text-muted">), a BS5
   `.text-muted` paletta sötétben halványra fakítja — biztos megjelenés
   végett. */
[data-bs-theme="dark"] tt,
[data-bs-theme="dark"] code,
[data-bs-theme="dark"] pre {
	color: #cbd5e1;
	background-color: rgba(148, 163, 184, 0.12);
}

/* SimpleSAMLphp / egyéb 3rd-party stylesheet által szúrt fehér háttér
   védőháló — ha valami szigetet hagyna a sötét hátteren. */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
	background-color: var(--foodle-surface);
	color: var(--foodle-body-color);
	border-color: var(--foodle-border-strong);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
	background-color: var(--foodle-surface);
	color: var(--foodle-body-color);
	border-color: var(--foodle-primary);
	box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}
[data-bs-theme="dark"] .form-control::placeholder {
	color: var(--foodle-muted);
}
[data-bs-theme="dark"] .input-group-text {
	background-color: var(--foodle-surface-2);
	color: var(--foodle-body-color);
	border-color: var(--foodle-border-strong);
}

/* Alert-ek a saját kártya-paletta felett ne legyenek vakító fehérek. */
[data-bs-theme="dark"] .alert-info {
	background-color: rgba(59, 130, 246, 0.12);
	color: #bfdbfe;
	border-color: rgba(59, 130, 246, 0.35);
}
[data-bs-theme="dark"] .alert-success {
	background-color: rgba(16, 185, 129, 0.12);
	color: #a7f3d0;
	border-color: rgba(16, 185, 129, 0.35);
}
[data-bs-theme="dark"] .alert-warning {
	background-color: rgba(245, 158, 11, 0.14);
	color: #fde68a;
	border-color: rgba(245, 158, 11, 0.4);
}
[data-bs-theme="dark"] .alert-danger {
	background-color: rgba(239, 68, 68, 0.14);
	color: #fecaca;
	border-color: rgba(239, 68, 68, 0.4);
}

/* ═════════════════════════════════════════════════════════════════════════
   EXTRA TÉMÁK — `[data-foodle-theme]`
   ─────────────────────────────────────────────────────────────────────────
   A BS5.3 natívan csak `light` / `dark` themingot ismer; az alábbi extra
   palettákat ezekre az alapokra építjük rá. A bootstrap-init (header.php.twig)
   `data-bs-theme`-et light vagy dark szerinti BS-base-re állítja, mi pedig
   `data-foodle-theme`-en keresztül felülírjuk a saját `--foodle-*` tokeneket.
   Így a BS-komponensek (modal, table, dropdown, alert) tovább működnek a
   szokásos light/dark-szabályokkal, csak a Foodle-felület kapja a flair-t.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Sepia (light base) ─ meleg krém/barna, hosszan olvasásra ─────────── */
[data-foodle-theme="sepia"] {
	--foodle-primary:        #92400e;   /* amber-800 */
	--foodle-primary-strong: #78350f;   /* amber-900 */
	--foodle-accent:         #b45309;   /* amber-700 */
	--foodle-light:           #fde68a;
	--foodle-dark:            #451a03;
	--foodle-soft:            #fef3c7;

	--foodle-body-bg:        #f8f1e3;
	--foodle-body-color:     #3d2b1f;
	--foodle-surface:        #fbf6ea;
	--foodle-surface-2:      #f3ead0;
	--foodle-border:         #e7d8b3;
	--foodle-border-strong:  #c9b687;
	--foodle-muted:          #8a6d4a;
	--foodle-heading:        #3d2b1f;
	--foodle-link:           var(--foodle-accent);
	--foodle-link-hover:     var(--foodle-primary-strong);
	--foodle-shadow-sm:      0 1px 2px rgba(120, 53, 15, 0.06), 0 6px 18px rgba(120, 53, 15, 0.07);
	--foodle-shadow-md:      0 4px 12px rgba(120, 53, 15, 0.08);
	--foodle-shadow-lg:      0 12px 32px rgba(120, 53, 15, 0.16);
}
[data-foodle-theme="sepia"] .foodle-hero,
[data-foodle-theme="sepia"] .navbar.bg-primary {
	background: linear-gradient(90deg, var(--foodle-primary-strong) 0%, var(--foodle-primary) 60%, var(--foodle-accent) 100%) !important;
}
[data-foodle-theme="sepia"] .foodle-info {
	background: linear-gradient(160deg, #3d2b1f 0%, #6b3f1d 100%);
}

/* ── Ocean (dark base) ─ Solarized-szerű hideg kék/cián ──────────────── */
[data-foodle-theme="ocean"] {
	--foodle-primary:        #2aa198;   /* solarized cyan */
	--foodle-primary-strong: #268bd2;   /* solarized blue */
	--foodle-accent:         #859900;   /* solarized green */
	--foodle-light:           #073642;
	--foodle-dark:            #002b36;
	--foodle-soft:            #073642;

	--foodle-body-bg:        #002b36;   /* base03 */
	--foodle-body-color:     #93a1a1;   /* base1 */
	--foodle-surface:        #073642;   /* base02 */
	--foodle-surface-2:      #0a3f4d;
	--foodle-border:         #14525f;
	--foodle-border-strong:  #1d6577;
	--foodle-muted:          #657b83;   /* base00 */
	--foodle-heading:        #eee8d5;   /* base2 */
	--foodle-link:           #2aa198;
	--foodle-link-hover:     #38c5b9;
	--foodle-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.32);
	--foodle-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.42);
	--foodle-shadow-lg:      0 12px 32px rgba(0, 0, 0, 0.52);

	color-scheme: dark;
}
[data-foodle-theme="ocean"] .foodle-hero {
	background: linear-gradient(120deg, #002b36 0%, #073642 50%, #2aa198 100%);
}
[data-foodle-theme="ocean"] .navbar.bg-primary {
	background: linear-gradient(90deg, #002b36 0%, #073642 60%, #268bd2 100%) !important;
}
[data-foodle-theme="ocean"] .foodle-info {
	background: linear-gradient(160deg, #002b36 0%, #073642 100%);
	border: 1px solid var(--foodle-border-strong);
}
[data-foodle-theme="ocean"] tt,
[data-foodle-theme="ocean"] code,
[data-foodle-theme="ocean"] pre {
	color: #eee8d5;
	background-color: rgba(42, 161, 152, 0.10);
}

/* ── HC (dark base) ─ akadálymentes, magas kontraszt ─────────────────── */
[data-foodle-theme="hc"] {
	--foodle-primary:        #ffd60a;   /* sárga: WCAG AAA-szerű linkek */
	--foodle-primary-strong: #ffffff;
	--foodle-accent:         #ffd60a;
	--foodle-light:           #ffffff;
	--foodle-dark:            #000000;
	--foodle-soft:            #1a1a1a;

	--foodle-body-bg:        #000000;
	--foodle-body-color:     #ffffff;
	--foodle-surface:        #0a0a0a;
	--foodle-surface-2:      #161616;
	--foodle-border:         #ffffff;
	--foodle-border-strong:  #ffffff;
	--foodle-muted:          #d4d4d4;
	--foodle-heading:        #ffffff;
	--foodle-link:           #ffd60a;
	--foodle-link-hover:     #ffec5c;
	--foodle-shadow-sm:      none;
	--foodle-shadow-md:      none;
	--foodle-shadow-lg:      none;

	color-scheme: dark;
}
[data-foodle-theme="hc"] .foodle-hero,
[data-foodle-theme="hc"] .navbar.bg-primary {
	background: #000000 !important;
	border-bottom: 2px solid #ffffff;
}
[data-foodle-theme="hc"] .foodle-info {
	background: #000000;
	border: 2px solid #ffffff;
	color: #ffffff;
}
[data-foodle-theme="hc"] .card,
[data-foodle-theme="hc"] .dropdown-menu,
[data-foodle-theme="hc"] .modal-content,
[data-foodle-theme="hc"] .alert {
	border: 1px solid #ffffff !important;
}
[data-foodle-theme="hc"] a {
	text-decoration: underline;
}
[data-foodle-theme="hc"] .btn-primary {
	background-color: #ffd60a;
	color: #000000;
	border-color: #ffd60a;
}
[data-foodle-theme="hc"] .btn-outline-primary {
	color: #ffd60a;
	border-color: #ffd60a;
}
[data-foodle-theme="hc"] .btn-outline-primary:hover {
	background-color: #ffd60a;
	color: #000000;
}