@import url(font.css);
@import url(type.css);
@import url(element.css);
@import url(card.css);
@import url(form.css);
@import url(layout.css);

:root {
	--red  : #E4002B;
	--green: #3A7A3A;
	--amber: #C47D1A;
	--slate: #2B3A47;
	--blue : #0033A0;

	--gradient-red   : linear-gradient(var(--red), color-mix(in srgb, var(--red), #000 22%));
	--gradient-green : linear-gradient(var(--green), color-mix(in srgb, var(--green), #000 22%));
	--gradient-amber : linear-gradient(var(--amber), color-mix(in srgb, var(--amber), #000 22%));
	--gradient-slate : linear-gradient(color-mix(in srgb, var(--slate), #fff 16%), var(--slate));
	--gradient-hero  : linear-gradient(135deg, var(--blue) 0%, #2A63C6 100%);

	--gradient-orange: linear-gradient(#FF8A1E, #E35B00);
	--gradient-sky   : linear-gradient(#3AA0E0, #1C6FB0);

	--link : #0645AD;
	--paper: #EAF0F5;

	--card-line: color-mix(in srgb, var(--slate), #fff 75%);
	--row-line : color-mix(in srgb, var(--slate), #fff 93%);

	--tx-strong: #182530;
	--tx-body  : #38424B;
	--tx-mid   : #4A555E;
	--tx-soft  : #77828B;

	--sans: "IBM Plex Sans", Arial, sans-serif;
	--disp: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, monospace;

	--track-tight: -0.02em;
	--track-label: 0.05em;

	--space-2xs: calc(var(--space) * 0.25);
	--space-xs : calc(var(--space) * 0.5);
	--space-sm : calc(var(--space) * 0.75);
	--space    : 0.75rem;
	--space-lg : calc(var(--space) * 1.5);
	--space-xl : calc(var(--space) * 2);
}

* {
	box-sizing: border-box;
	margin    : 0;
	padding   : 0;
}

body {
	color                 : var(--tx-strong);
	font-size             : 0.75rem;
	line-height           : 1.5;
	font-family           : var(--sans);
	-webkit-font-smoothing: antialiased;
}

a {
	color          : var(--link);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	padding   : 0;
	border    : none;
	background: none;
	color     : inherit;
	font      : inherit;
	text-align: left;
	cursor    : pointer;
}