/* Colours and typography from the Viva brand bank, as in viva-chatbot's brand.css (copied: the two
   plugins share no files). Scoped to this plugin's own elements. */
@font-face {
	font-family: 'Viva DM Sans';
	src: url('fonts/DMSans-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Viva DM Sans';
	src: url('fonts/DMSans-Medium.ttf') format('truetype');
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Viva DM Sans';
	src: url('fonts/DMSans-Bold.ttf') format('truetype');
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'RB Faktum Neue';
	src: url('fonts/NeueFaktum-Regular.otf') format('opentype');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'RB Faktum Neue';
	src: url('fonts/NeueFaktum-Medium.otf') format('opentype');
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'RB Faktum Neue';
	src: url('fonts/NeueFaktum-SemiBold.otf') format('opentype');
	font-style: normal;
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'RB Faktum Neue';
	src: url('fonts/NeueFaktum-Bold.otf') format('opentype');
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

/* Tokens. Teal and lime are surfaces and decoration only: neither passes contrast as text on white.
   A site colour (Site settings) replaces the colour tokens on a bot's root (Brand::tokens()). */
.vcb,
.vcb-page {
	--vcb-green: #074a36;
	--vcb-ink: #13392e;
	--vcb-accent: #2c735e;
	--vcb-teal: #49c09d;
	--vcb-lime: #cae780;
	--vcb-mint: #e4fff7;
	--vcb-wash: #f2f6f4;
	--vcb-line: rgba(19, 57, 46, 0.16);
	--vcb-line-strong: #6f8a80;
	--vcb-muted: #4a5f57;
	/* The same colours as red, green, blue, for shadows and rings at their own opacity. */
	--vcb-shadow: 7, 74, 54;
	--vcb-accent-rgb: 44, 115, 94;
	--vcb-warn-wash: #fff4d6;
	--vcb-warn-ink: #5f4500;
	--vcb-display: 'RB Faktum Neue', 'Viva DM Sans', -apple-system, 'Segoe UI', sans-serif;
	--vcb-body: 'Viva DM Sans', -apple-system, 'Segoe UI', sans-serif;
	color: var(--vcb-ink);
	font-family: var(--vcb-body);
	line-height: 1.5;
}

/* Important, because themes often set focus styles that way (Viva's base theme does), and this ring
   has to win. The white band keeps it visible on dark pages. */
.vcb :focus-visible,
.vcb-page :focus-visible {
	outline: 2px solid var(--vcb-green) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 4px #fff;
}

/* Buttons */
.vcb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 36px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--vcb-green);
	border-radius: 8px;
	background: var(--vcb-green);
	color: #fff;
	font-family: var(--vcb-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.vcb-btn:hover,
.vcb-btn:focus {
	background: var(--vcb-ink);
	color: #fff;
}

.vcb-btn--quiet {
	border-color: var(--vcb-line-strong);
	background: #fff;
	color: var(--vcb-green);
}

.vcb-btn--quiet:hover,
.vcb-btn--quiet:focus {
	background: var(--vcb-mint);
	color: var(--vcb-green);
}

/* Status badges always carry text; the dot is decoration. */
.vcb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	font-family: var(--vcb-body);
	font-size: 13px;
	font-weight: 500;
}

.vcb-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.vcb-badge--ok {
	background: var(--vcb-mint);
	color: var(--vcb-green);
}

.vcb-badge--warn {
	background: var(--vcb-warn-wash);
	color: var(--vcb-warn-ink);
}

.vcb-badge--off {
	background: #eceff1;
	color: #3d4a46;
}

@media (forced-colors: active) {
	.vcb-btn,
	.vcb-badge {
		border: 1px solid CanvasText;
	}
}