:root {
	--ka-orange: #f18a23;
	--ka-orange-hover: #e07d16;
	--ka-orange-deep: #e0631f;
	--ka-orange-deeper: #c9560f;
	--ka-magenta: #a01259;
	--ka-magenta-dark: #7d1140;
	--ka-magenta-hover: #8a0e4c;
	--ka-ink: #1f2b46;
	--ka-muted: #5d6670;
	--ka-faint: #9a948a;
	--ka-cream: #faf7f2;
	--ka-cream-2: #fce9d4;
	--ka-cream-3: #fbeee0;
	--ka-green: #29a651;
	--ka-blue: #0d3950;
}

* {
	box-sizing: border-box;
}

/* The [hidden] attribute must always win over component display rules
   (e.g. modal overlays use display:flex). JS toggles the attribute to reveal. */
[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
	padding: 0;
}

::selection {
	background: var(--ka-magenta);
	color: #fff;
}

@keyframes kaFade {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes kaSlide {
	from {
		transform: translateX(100%);
	}
	to {
		transform: none;
	}
}