:root {
	--stream-bg: #050505;
	--stream-bg-soft: #111111;
	--stream-bg-card: #171717;
	--stream-border: rgba(255, 255, 255, 0.12);

	--stream-text: #ffffff;
	--stream-text-muted: #c7c7c7;
	--stream-text-soft: #8f8f8f;

	--stream-accent: #ffffff;
	--stream-accent-hover: #e5e5e5;
	--stream-accent-text: #050505;

	--stream-radius-sm: 0.5rem;
	--stream-radius-md: 0.875rem;
	--stream-radius-lg: 1.25rem;

	--stream-letter-spacing: 0.05em;
	--stream-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

* {
	box-sizing: border-box;
}

body.streaming-body {
	margin: 0;
	background: var(--stream-bg);
	color: var(--stream-text);
	font-family: "Montserrat", system-ui, sans-serif;
	letter-spacing: var(--stream-letter-spacing);
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--stream-radius-sm);
	font: inherit;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.button:hover {
	transform: translateY(-1px);
}

.button-primary {
	background: var(--stream-accent);
	color: var(--stream-accent-text);
}

.button-primary:hover {
	background: var(--stream-accent-hover);
}

.button-secondary {
	background: transparent;
	color: #ffffff;
}

.button-secondary:hover {
	background: rgba(255, 255, 255, 0.12);
}

.button-disabled {
	background: rgba(255, 255, 255, 0.1);
	color: var(--stream-text-soft);
	cursor: not-allowed;
}

.button-disabled:hover {
	transform: none;
}