/* Moralo's look (Docs/Design.md): warm white pages, rose for every action, cream for accents, a warm
   dark ink instead of black; names and titles in DM Serif Display (the wordmark's font, OFL, served with the app - no
   font from a third party; a serif stands in until it has loaded), everything else in the device's own font (San
   Francisco on an iPhone, Roboto on Android, Segoe on Windows - nothing to download). Buttons are pills, cards round.
   Radzen's and Bootstrap's own variables are set from these, so their components follow without per-page styling.
   Dark (2026-10-07): the same roles in warm darks - only the tokens below the light ones change (the blocks after this
   one), by the device's own setting or the user's choice in Settings (data-theme on <html>, js/theme.js). */
:root {
	color-scheme: light;
	--moralo-cream: #FFF1E6;
	--moralo-rose: #E2445C;
	--moralo-page: #FFF8F2;
	/* What stands on the page: cards, inputs, the bottom bar, dialogs. */
	--moralo-surface: #FFFFFF;
	/* Lifted above a cream track - the chosen one of a few (the selectbar). */
	--moralo-raised: #FFFFFF;
	--moralo-ink: #2B1A1E;
	--moralo-ink-soft: #7A5A60;
	--moralo-ink-muted: #A8898E;
	--moralo-line: #EFDCCF;
	/* A faint wash of the ink - a quote in a bubble. */
	--moralo-tint: rgba(43, 26, 30, 0.06);
	/* Only ever as an outline or text (ending a chat, signing out) - never a filled button next to the rose. */
	--moralo-danger: #B42318;
	/* Behind photos (cards, tiles, the whole profile) - dark in both themes, the photos' own frame. */
	--moralo-photo-backdrop: #2B1A1E;
	/* A search hit in the chat. */
	--moralo-mark: #FFE08A;
	--moralo-on-mark: #2B1A1E;
	--moralo-wordmark-font: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--moralo-system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Radzen */
	--rz-primary: var(--moralo-rose);
	--rz-primary-light: #E86A7D;
	--rz-primary-lighter: rgba(226, 68, 92, 0.12);
	--rz-primary-dark: #C9364D;
	--rz-primary-darker: #A82B40;
	--rz-on-primary: #FFFFFF;
	--rz-on-primary-lighter: var(--moralo-rose);
	--rz-secondary: #A82B40;
	--rz-secondary-dark: #8A2337;
	--rz-danger: var(--moralo-danger);
	--rz-danger-light: #D0473D;
	--rz-danger-lighter: rgba(180, 35, 24, 0.1);
	--rz-danger-dark: #93190F;
	--rz-danger-darker: #7A140C;
	/* The greys turned warm: Radzen's hovers, borders and quiet surfaces sit on the cream instead of a cold grey. */
	--rz-base-50: #FFFBF7;
	--rz-base-100: var(--moralo-page);
	--rz-base-200: var(--moralo-cream);
	--rz-base-300: var(--moralo-line);
	--rz-base-400: #D9C2B6;
	--rz-base-500: #B39A92;
	--rz-base-600: #8E757A;
	--rz-base-700: var(--moralo-ink-soft);
	--rz-base-800: #4A3337;
	--rz-base-900: var(--moralo-ink);
	--rz-body-background-color: var(--moralo-page);
	--rz-base-background-color: var(--moralo-surface);
	--rz-notification-container-background-color: var(--moralo-surface);
	--rz-base: var(--moralo-cream);
	--rz-on-base: var(--moralo-ink);
	/* What a hovered neutral button (No, "Prijave korisnika") writes in - Radzen's is a fixed near-black, unreadable in the dark. */
	--rz-on-base-light: var(--moralo-ink);
	--rz-on-base-lighter: var(--moralo-ink);
	--rz-text-font-family: var(--moralo-system-font);
	--rz-text-title-color: var(--moralo-ink);
	--rz-text-color: var(--moralo-ink);
	--rz-text-secondary-color: var(--moralo-ink-soft);
	--rz-text-tertiary-color: var(--moralo-ink-muted);
	--rz-border-radius: 12px;
	--rz-input-border-radius: 12px;
	--rz-button-border-radius: 999px;
	--rz-dialog-border-radius: 18px;
	--rz-switch-checked-background-color: var(--moralo-rose);
	--rz-switch-checked-circle-background-color: #FFFFFF;
	/* Choices (language, the discovery filter): a cream track, the chosen one a white pill on it. */
	--rz-selectbar-background-color: var(--moralo-cream);
	--rz-selectbar-border: var(--moralo-cream);
	--rz-selectbar-border-radius: 999px;
	--rz-selectbar-selected-background-color: var(--moralo-raised);
	--rz-selectbar-selected-color: var(--moralo-ink);
	--rz-selectbar-selected-border: var(--moralo-line);

	/* Bootstrap (the grid, and what it styles by itself: body, links, form text) */
	--bs-body-bg: var(--moralo-page);
	--bs-body-color: var(--moralo-ink);
	--bs-body-font-family: var(--moralo-system-font);
	--bs-secondary-color: var(--moralo-ink-soft);
	--bs-border-color: var(--moralo-line);
	--bs-link-color: var(--moralo-rose);
	--bs-link-color-rgb: 226, 68, 92;
	--bs-link-hover-color: #A82B40;
	--bs-link-hover-color-rgb: 168, 43, 64;
}

/* Dark: by the device's setting unless the user chose light, or by the user's choice. The two blocks are the same. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--moralo-cream: #33262A;
		--moralo-page: #1A1214;
		--moralo-surface: #261C1F;
		--moralo-raised: #4A383E;
		--moralo-ink: #F6EAE4;
		--moralo-ink-soft: #C8B0AB;
		--moralo-ink-muted: #8E7874;
		--moralo-line: #42333A;
		--moralo-tint: rgba(246, 234, 228, 0.08);
		--moralo-danger: #F2776A;
		--moralo-mark: #F2C94C;
		--rz-primary-lighter: rgba(226, 68, 92, 0.22);
		--rz-danger-lighter: rgba(242, 119, 106, 0.16);
		--rz-base-50: #211719;
		--rz-base-400: #5C484C;
		--rz-base-500: #7E696C;
		--rz-base-600: #A28D8E;
		--rz-base-800: #E4D4CF;
		--rz-dialog-mask-background-color: #000000;
		--rz-scrollbar-color: rgba(255, 255, 255, 0.14);
		--bs-link-hover-color: #F0788A;
		--bs-link-hover-color-rgb: 240, 120, 138;
		--bs-danger: #F2776A;
		--bs-danger-rgb: 242, 119, 106;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--moralo-cream: #33262A;
	--moralo-page: #1A1214;
	--moralo-surface: #261C1F;
	--moralo-raised: #4A383E;
	--moralo-ink: #F6EAE4;
	--moralo-ink-soft: #C8B0AB;
	--moralo-ink-muted: #8E7874;
	--moralo-line: #42333A;
	--moralo-tint: rgba(246, 234, 228, 0.08);
	--moralo-danger: #F2776A;
	--moralo-mark: #F2C94C;
	--rz-primary-lighter: rgba(226, 68, 92, 0.22);
	--rz-danger-lighter: rgba(242, 119, 106, 0.16);
	--rz-base-50: #211719;
	--rz-base-400: #5C484C;
	--rz-base-500: #7E696C;
	--rz-base-600: #A28D8E;
	--rz-base-800: #E4D4CF;
	--rz-dialog-mask-background-color: #000000;
	--rz-scrollbar-color: rgba(255, 255, 255, 0.14);
	--bs-link-hover-color: #F0788A;
	--bs-link-hover-color-rgb: 240, 120, 138;
	--bs-danger: #F2776A;
	--bs-danger-rgb: 242, 119, 106;
}

/* The wordmark's font: index.html preloads it, so it is there for the first paint; until it is, no stand-in font is
   drawn (block) - the wordmark in Georgia for a moment and then in its own font was a visible jump (2026-10-08). */
@font-face {
	font-family: 'DM Serif Display';
	src: url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
	font-display: block;
}

html, body {
	font-family: var(--moralo-system-font);
	margin: 0;
	height: 100%;
	background: var(--moralo-page);
	color: var(--moralo-ink);
}

/* Titles and names speak in the wordmark's voice; DM Serif has one weight. */
h1, h2, h3, .rz-dialog-title {
	font-family: var(--moralo-wordmark-font);
	font-weight: 400;
}

/* Buttons speak in sentence case, as text does - the material theme's spaced capitals sound like a machine. */
.rz-button,
.rz-button-xs,
.rz-button-sm,
.rz-button-md,
.rz-button-lg {
	text-transform: none;
	letter-spacing: normal;
}

/* Choices (language, units, the look, the filter): the bar itself is the cream track and every option its own pill on
   it - the chosen one raised, a hovered one tinted. Radzen paints each option with the track and squares the middle
   ones, so a middle option on its own (chosen, hovered) showed as a box. */
.rz-selectbar {
	background-color: var(--moralo-cream);
	border-radius: 999px;
}

.rz-selectbar .rz-button {
	border-radius: 999px;
}

.rz-selectbar .rz-button:not(.rz-state-active) {
	background-color: transparent;
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.rz-selectbar .rz-button:not(.rz-state-active):not(.rz-state-disabled):hover {
		background-color: var(--moralo-tint);
		/* Radzen's own is a fixed dark grey - unreadable in the dark. */
		color: var(--moralo-ink);
	}
}

/* While the app loads: the mark and the wordmark on cream (its dark counterpart in the dark; the heart takes the
   background's colour). The mark exactly where and as big as Android's own splash draws it in the phone app - in the
   middle, in a 108 px box (MAUI's splash image, Moralo.SplashTheme) - and the wordmark under it, so the one becomes the
   other without a jump (the user saw "two different splash screens", 2026-10-08). */
.loading-splash {
	position: relative;
	height: 100vh;
	background: var(--moralo-cream);
}

.loading-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 108px;
	height: 108px;
	transform: translate(-50%, -50%);
}

.loading-wordmark {
	position: absolute;
	top: calc(50% + 54px);
	right: 0;
	left: 0;
	font-family: var(--moralo-wordmark-font);
	font-size: 2.75rem;
	line-height: 1;
	text-align: center;
	color: var(--moralo-rose);
}

#blazor-error-ui {
	background: lightyellow;
	color: #2B1A1E;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

#blazor-error-ui .dismiss {
	cursor: pointer;
	position: absolute;
	right: 0.75rem;
	top: 0.5rem;
}

.loading-heart {
	fill: var(--moralo-cream);
}

/* Typing on a phone - the chat's composer has the focus and the keyboard is up (html[data-typing], set by
   Chat.razor.js from the page's height, so it comes back when the keyboard goes even if the focus stays): the bottom bar
   goes for that long and the page gets its room, as in every messenger. In landscape the keyboard left the page ~155px,
   the bar took a third of it and the composer was out of sight (the Xiaomi, 2026-10-08). */
html[data-typing] .bottom-nav {
	display: none;
}

html[data-typing] .with-bottom-nav {
	--bottom-nav-height: 0px;
}