/* DabomWorks brand tokens. Import once, then use the variables anywhere. */
:root {
	/* Primary: D mark lines, "abom", hub */
	--dw-green: #128a56;
	/* Secondary: stem nodes, "WORKS", service names, buttons and links */
	--dw-teal: #0b6b73;
	/* Headings and text on light backgrounds */
	--dw-teal-dark: #083f44;
	/* Point: the node at the right of the D. Accent only, never for text */
	--dw-lime: #8fd400;

	/* The same roles on dark backgrounds */
	--dw-green-on-dark: #34e0a1;
	--dw-teal-on-dark: #3cc4cc;
	--dw-lime-on-dark: #9be01a;

	/* Neutrals used around the logo */
	--dw-ink: #14171f;
	--dw-ink-soft: #5c6170;
	--dw-divider: #c9ccd6;
	--dw-divider-on-dark: #4a5068;
	--dw-dark-bg: #14171f;

	--dw-font-logo: 'Poppins', sans-serif;
	--dw-font-body: 'Noto Sans KR', sans-serif;

	/*
	 * Logo heights. Every lockup file (logo, Flow, Crate, ...) shares the same
	 * vertical geometry, so the same height gives every service an identical
	 * D mark and "abom"; only the width changes with the service name.
	 */
	--dw-logo-s: 20px; /* footer, narrow screens (<= 420px) */
	--dw-logo-m: 24px; /* site header, app top bar: the default */
	--dw-logo-l: 32px; /* login, about dialog, other centred showcases */
}

/* Set the height only; the width follows the file's aspect ratio. */
.dw-logo {
	display: block;
	height: var(--dw-logo-m);
	width: auto;
	flex-shrink: 0;
}
.dw-logo--s {
	height: var(--dw-logo-s);
}
.dw-logo--l {
	height: var(--dw-logo-l);
}
@media (max-width: 420px) {
	.dw-logo:not(.dw-logo--l) {
		height: var(--dw-logo-s);
	}
}