/* Scania brand palette (from the Scania Design System in Figma). */
:root
{
	--scania-blue: #041e42;
	--scania-red: #d6001c;
	--scania-green: #2c5234;
	--scania-orange: #e35205;
	--scania-pale-green: #94a596;
	--scania-beige: #ceb888;
	--scania-light-grey: #c8c9c7;
	--scania-medium-grey: #97999b;
	--scania-dark-grey: #53565a;
	--scania-white: #fafafa;
	--scania-black: #000000;

	/* Scania UI scales (from the design system). */
	--blue-700: #0f3263;
	--grey-100: #edeff3;
	--grey-200: #d1d7e0;
	--grey-650: #475467;
	--red-50: #ffdfe3;

	/* Semantic roles, mapped to Scania tokens. */
	--bg: var(--scania-white);
	--surface: var(--scania-white);
	--border: var(--grey-200);
	--text: var(--scania-blue);
	--muted: var(--grey-650);
	--accent: var(--scania-blue);
	--accent-hover: var(--blue-700);
	--accent-text: var(--scania-white);
	--error: var(--scania-red);
	--error-bg: var(--red-50);
}

*
{
	box-sizing: border-box;
}

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

body
{
	font-family: 'Scania Sans', Arial, Helvetica, sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
}

h1
{
	font-size: 40px;
	line-height: calc(1em + 4px);
	letter-spacing: -0.04em;
}
h2
{
	font-size: 32px;
	line-height: calc(1em + 4px);
	letter-spacing: -0.04em;
}
p
{
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.02em;
}

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

a:hover
{
	text-decoration: underline;
}

/* ---- Content pages ---- */
.site-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--scania-blue);
	padding: 16px 16px 16px 24px;
}
.site-header .wordmark
{
	display: block;
	height: 22px;
	width: auto;
}

.site-header .gripen
{
	display: block;
	height: 32px;
	width: auto;
}

.content
{
	max-width: 768px;
	margin: 0 auto;
	padding: 64px 24px;
}

.content h1
{
	margin-top: 0;
}

/* ---- Login / logged-out pages ---- */
.login-wrap
{
	min-height: calc(100vh - 64px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.login-card
{
	width: 100%;
	max-width: 360px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2rem;
}

.login-card h2
{
	margin: 0 0 16px;
}

.login-card .subtitle
{
	margin: 0 0 1.5rem;
	color: var(--muted);
	font-size: 14px;
}

.field
{
	margin-bottom: 1rem;
}

.field label
{
	display: block;
	margin-bottom: 0.5rem;
	font-size: 14px;
	color: var(--muted);
}

.field input
{
	width: 100%;
	padding: 0.75rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 4px;
	background: var(--surface);
	color: var(--text);
	font-size: 1rem;
}

.field input:focus
{
	outline: none;
	border-color: var(--accent);
}

button.submit
{
	width: 100%;
	padding: 1rem;
	border: none;
	border-radius: 4px;
	background: var(--accent);
	color: var(--accent-text);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

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

.error
{
	margin: 0 0 1rem;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	background: var(--error-bg);
	color: var(--error);
	font-size: 14px;
}