/* Colour palettes for the public part.
 *
 * Four schemes are available, each in a light and a dark variant:
 *   qrnavod  — ink + teal from the QRNAVOD logo, the default
 *   holub    — holubem.cz (paper, leaf, clay)
 *   izispect — iziSPECT logo (ink, electric blue, pass green)
 *   tamtech  — tamtech.cz (ink, teal)
 *
 * The palette and the mode are set on <html> as data-palette and data-theme.
 * They are read from a cookie on the server, so the first paint is already
 * correct and nothing flashes.
 */

:root,
:root[data-palette="qrnavod"] {
	--bg: #f7fafb;
	--bg-soft: #eef4f6;
	--surface: #ffffff;
	--surface-soft: #f9fbfc;
	--ink: #101828;
	--ink-soft: #475467;
	--ink-faint: #556579;
	--line: #e1e7ec;
	--line-strong: #c9d4dd;
	--brand: #0b7285;
	--brand-deep: #085a69;
	--brand-soft: #e6f4f6;
	--on-brand: #ffffff;
	--accent: #0b7285;
	--danger: #b42318;
	--danger-soft: #fdf1f0;
	--danger-line: #f2d3d0;
	--ok: #067647;
	--ok-soft: #eef8f1;
	--ok-line: #cfe7d9;
	--warn-soft: #fff8e6;
	--warn-line: #f0dfae;
	--warn-ink: #7a5a12;
	--shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
}

:root[data-palette="holub"] {
	--bg: #f3f1e9;
	--bg-soft: #efebe1;
	--surface: #fffdf8;
	--surface-soft: #faf7ef;
	--ink: #17211b;
	--ink-soft: #59645d;
	--ink-faint: #55605a;
	--line: #e5e0d3;
	--line-strong: #d5cfbe;
	--brand: #1c5b45;
	--brand-deep: #104333;
	--brand-soft: #e4eee7;
	--on-brand: #ffffff;
	--accent: #b9674a;
	--danger: #a63e34;
	--danger-soft: #fdf1f0;
	--danger-line: #f2d3d0;
	--ok: #125c33;
	--ok-soft: #eef8f1;
	--ok-line: #cfe7d9;
	--warn-soft: #fdf6e3;
	--warn-line: #e8d9a8;
	--warn-ink: #7a5a12;
	--shadow: 0 1px 3px rgba(23, 33, 27, 0.1);
}

:root[data-palette="izispect"] {
	--bg: #f4f6fa;
	--bg-soft: #eaeef6;
	--surface: #ffffff;
	--surface-soft: #f7f9fc;
	--ink: #0a1220;
	--ink-soft: #4a566b;
	--ink-faint: #4a586f;
	--line: #e2e8f2;
	--line-strong: #cdd6e5;
	--brand: #0067d6;
	--brand-deep: #004a9c;
	--brand-soft: #e6f2ff;
	--on-brand: #ffffff;
	--accent: #00a6ff;
	--danger: #b3261e;
	--danger-soft: #fdf1f0;
	--danger-line: #f2d3d0;
	--ok: #0f8b4c;
	--ok-soft: #eafaf1;
	--ok-line: #bfead3;
	--warn-soft: #fff8e6;
	--warn-line: #f0dfae;
	--warn-ink: #7a5a12;
	--shadow: 0 1px 3px rgba(10, 18, 32, 0.12);
}

:root[data-palette="tamtech"] {
	--bg: #f5f8fa;
	--bg-soft: #eef3f6;
	--surface: #ffffff;
	--surface-soft: #f8fbfc;
	--ink: #102030;
	--ink-soft: #44586b;
	--ink-faint: #536476;
	--line: #e4e8ec;
	--line-strong: #cfd8e0;
	--brand: #007a7a;
	--brand-deep: #005f5f;
	--brand-soft: #e6f6f6;
	--on-brand: #ffffff;
	--accent: #00a6a6;
	--danger: #b3261e;
	--danger-soft: #fdf1f0;
	--danger-line: #f2d3d0;
	--ok: #1a7f43;
	--ok-soft: #eef8f1;
	--ok-line: #cfe7d9;
	--warn-soft: #fff8e6;
	--warn-line: #f0dfae;
	--warn-ink: #7a5a12;
	--shadow: 0 1px 3px rgba(16, 32, 48, 0.12);
}

/* Dark mode: the same hue family, inverted lightness. */
:root[data-theme="dark"] {
	--bg: #0d1512;
	--bg-soft: #111b17;
	--surface: #16211c;
	--surface-soft: #1b2822;
	--ink: #eef3ef;
	--ink-soft: #b3c1b8;
	--ink-faint: #a8b8ad;
	--line: #2a3830;
	--line-strong: #3a4b41;
	--brand: #6ecfae;
	--brand-deep: #96e2c6;
	--brand-soft: #1d2f27;
	--on-brand: #0d1512;
	--accent: #e2a07f;
	--danger: #ff9b90;
	--danger-soft: #2b1a18;
	--danger-line: #4a2a26;
	--ok: #8fe0b0;
	--ok-soft: #162a1f;
	--ok-line: #2c4735;
	--warn-soft: #2b2416;
	--warn-line: #4a3d22;
	--warn-ink: #f0d79a;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

:root[data-palette="izispect"][data-theme="dark"] {
	--bg: #060b14;
	--bg-soft: #0a1220;
	--surface: #0f1a2b;
	--surface-soft: #132135;
	--ink: #eaf1fb;
	--ink-soft: #a9b8cf;
	--ink-faint: #9aabc4;
	--line: #1e2c42;
	--line-strong: #2c3d57;
	--brand: #5cc4ff;
	--brand-deep: #8ad6ff;
	--brand-soft: #102338;
	--on-brand: #04121f;
	--accent: #7fd0ff;
	--danger: #ff9b93;
	--ok: #6fe39f;
}

:root[data-palette="tamtech"][data-theme="dark"] {
	--bg: #080f16;
	--bg-soft: #0c141d;
	--surface: #111a24;
	--surface-soft: #15202b;
	--ink: #e9f0f5;
	--ink-soft: #a7b7c4;
	--ink-faint: #9aabb9;
	--line: #1f2c38;
	--line-strong: #2d3d4c;
	--brand: #4fd4d4;
	--brand-deep: #7ce6e6;
	--brand-soft: #102626;
	--on-brand: #04181a;
	--accent: #6fe0e0;
}

/* QRNAVOD ink/teal: the default palette mirrors the logo (ink #101828,
   teal #0B7285, white paper). Dark mode uses the logo's reverse teal. */
:root[data-palette="qrnavod"][data-theme="dark"] {
	--bg: #0b1218;
	--bg-soft: #0f1820;
	--surface: #121c25;
	--surface-soft: #17232e;
	--ink: #eef4f7;
	--ink-soft: #a9b8c4;
	--ink-faint: #9aabb9;
	--line: #22303c;
	--line-strong: #304252;
	--brand: #4fb6c8;
	--brand-deep: #7ccbda;
	--brand-soft: #10252b;
	--on-brand: #04181a;
	--accent: #4fb6c8;
	--danger: #ff9b93;
	--danger-soft: #2b1a18;
	--danger-line: #4a2a26;
	--ok: #5fd3a0;
	--ok-soft: #162a1f;
	--ok-line: #2c4735;
	--warn-soft: #2b2416;
	--warn-line: #4a3d22;
	--warn-ink: #f0d79a;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

html {
	color-scheme: light;
}

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

body {
	background: var(--bg);
	color: var(--ink);
}

/* Theme switcher */

.theme-switch {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
}

.theme-switch select {
	margin: 0;
	padding: 0.2rem 0.4rem;
	font-size: 0.8rem;
	width: auto;
	border-color: var(--line-strong);
	background: var(--surface);
	color: var(--ink);
}

/* The look switcher carries labels like "beautiful · gemini"; give it room so
   the active look is never shown truncated. */
.theme-switch [data-ui-select] {
	min-width: 9.5rem;
}

.theme-switch button {
	margin: 0;
	padding: 0.25rem 0.5rem;
	width: auto;
	font-size: 0.8rem;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-strong);
}

.theme-switch button:hover {
	background: var(--brand-soft);
	border-color: var(--brand);
}


/* Pico ships its own blue palette. Map its variables onto our tokens so cards,
   inputs, code blocks, focus rings and buttons follow the selected palette.
   The selector must carry the palette attribute: Pico's own light theme block
   is `:root:not([data-theme=dark])` (specificity 0-2-0), so a plain `:root`
   mapping (0-1-0) loses and every unstyled <button> stayed Pico blue. */
:root[data-palette] {
	--pico-primary: var(--brand);
	--pico-primary-background: var(--brand);
	--pico-primary-hover: var(--brand-deep);
	--pico-primary-hover-background: var(--brand-deep);
	--pico-primary-focus: color-mix(in srgb, var(--brand) 35%, transparent);
	--pico-primary-inverse: var(--on-brand);
	--pico-background-color: var(--bg);
	--pico-card-background-color: var(--surface);
	--pico-card-sectioning-background-color: var(--surface-soft);
	--pico-form-element-background-color: var(--surface);
	--pico-form-element-border-color: var(--line-strong);
	--pico-form-element-color: var(--ink);
	--pico-code-background-color: var(--surface-soft);
	--pico-code-color: var(--ink);
	--pico-color: var(--ink);
	--pico-muted-color: var(--ink-soft);
	--pico-muted-border-color: var(--line);
	--pico-table-border-color: var(--line);
	--pico-border-radius: 0.4rem;
}

/* Auto mode: the server renders data-theme="auto" and the synchronous theme.js
   in <head> resolves it to an explicit light/dark attribute before the body
   paints, so the dark tokens below and every variant dark rule keep working.
   Without JavaScript the page stays light; form controls still follow the OS
   through color-scheme. */
:root[data-theme="auto"] {
	color-scheme: light dark;
}

/* A variant may inline its own model-designed logo; it uses the theme tokens and
   follows light/dark and the tenant palette automatically. */
.site-logo svg {
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
}

/* The default lockup is dark ink; on a dark header it would disappear (the
   client reported exactly that). The templates render a light and a dark lockup,
   so the visible one always contrasts with the header surface. */
.site-logo .site-logo-dark {
	display: none;
}

:root[data-theme="dark"] .site-logo img.site-logo-light {
	display: none;
}

:root[data-theme="dark"] .site-logo img.site-logo-dark {
	display: block;
}

/* Classic square style: the client rejected every rounded shape. Zero radii
   everywhere, including Pico form controls, cards, pills and the admin SPA that
   loads this stylesheet too. */
:root {
	--pico-border-radius: 0;
	--ui-radius: 0;
	--ui-radius-sm: 0;
	--ui-radius-card: 0;
	--ui-radius-pill: 0;
}

*,
*::before,
*::after {
	border-radius: 0 !important;
}

/* The theme control is the only header switch: a square icon button. */
.theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.theme-switch .theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.theme-switch .theme-toggle:hover {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand-deep);
}

.theme-switch .theme-toggle:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.theme-switch .theme-icon {
	width: 1.15rem;
	height: 1.15rem;
	display: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:root[data-theme="light"] .theme-switch .theme-icon-sun,
:root[data-theme="auto"] .theme-switch .theme-icon-sun {
	display: block;
}

:root[data-theme="dark"] .theme-switch .theme-icon-moon {
	display: block;
}