/**
 * Faddom Design Tokens — global style guide
 *
 * Usage:
 *   color: var(--faddom-color-aqua-800);
 *   font-size: var(--faddom-type-heading-small-size);
 *   class="faddom-type-body-medium"
 *
 */

:root {
	/* ------------------------------------------------------------------ */
	/* Breakpoints */
	/* ------------------------------------------------------------------ */
	--faddom-bp-mobile-max: 767px;
	--faddom-bp-tablet-max: 1024px;
	--faddom-bp-desktop-max: 1366px;
	--faddom-bp-widescreen-min: 2400px;

	/* ------------------------------------------------------------------ */
	/* Colors — Aqua                                                      */
	/* ------------------------------------------------------------------ */
	--faddom-color-aqua-900: #062323;
	--faddom-color-aqua-800: #032d2d; /* Brand */
	--faddom-color-aqua-700: #084545;
	--faddom-color-aqua-600: #085858; /* Brand */
	--faddom-color-aqua-500: #098484;
	--faddom-color-aqua-400: #2a9a9b;
	--faddom-color-aqua-300: #64c1c1;
	--faddom-color-aqua-200: #8adada;
	--faddom-color-aqua-100: #ace6e6;
	--faddom-color-aqua-75: #cbeeee;
	--faddom-color-aqua-50: #e6f4f4; /* Brand */
	--faddom-color-aqua-25: #f7fbfb;

	/* ------------------------------------------------------------------ */
	/* Colors — Orange                                                    */
	/* ------------------------------------------------------------------ */
	--faddom-color-orange-400: #ff982b;
	--faddom-color-orange-300: #ffab50; /* Brand */

	/* ------------------------------------------------------------------ */
	/* Colors — Bright Aqua                                               */
	/* ------------------------------------------------------------------ */
	--faddom-color-bright-aqua-400: #00e0e0;
	--faddom-color-bright-aqua-300: #3df3f3; /* Brand */
	--faddom-color-bright-aqua-200: #adfcfc;

	/* ------------------------------------------------------------------ */
	/* Colors — Granite                                                   */
	/* ------------------------------------------------------------------ */
	--faddom-color-granite-600: #3e4f4f;
	--faddom-color-granite-500: #486666;
	--faddom-color-granite-400: #5c7a7a;

	/* ------------------------------------------------------------------ */
	/* Colors — Neutrals                                                  */
	/* ------------------------------------------------------------------ */
	--faddom-color-white: #ffffff;
	--faddom-color-dark: #021111;

	/* Semantic aliases */
	--faddom-color-text: var(--faddom-color-aqua-800);
	--faddom-color-text-muted: var(--faddom-color-granite-500);
	--faddom-color-brand: var(--faddom-color-aqua-800);
	--faddom-color-brand-mid: var(--faddom-color-aqua-600);
	--faddom-color-cta: var(--faddom-color-orange-300);
	--faddom-color-cta-strong: var(--faddom-color-orange-400);
	--faddom-color-surface: var(--faddom-color-aqua-50);
	--faddom-color-border: rgba(6, 35, 35, 0.2); /* Aqua-900 @ 20% */

	/* ------------------------------------------------------------------ */
	/* Font families                                                      */
	/* ------------------------------------------------------------------ */
	--faddom-font-heading: "Kalice Regular", "Kalice Trial", "Kalice", serif;
	--faddom-font-body: "Aktiv Grotesk", "AktivGrotesk", sans-serif;

	/* ------------------------------------------------------------------ */
	/* Typography — Desktop (default / widescreen+)                       */
	/* H1 Heading large                                                   */
	/* ------------------------------------------------------------------ */
	--faddom-type-heading-large-family: var(--faddom-font-heading);
	--faddom-type-heading-large-size: 72px;
	--faddom-type-heading-large-weight: 400;
	--faddom-type-heading-large-line: 80px;
	--faddom-type-heading-large-tracking: -0.01em;

	/* H2 Heading medium */
	--faddom-type-heading-medium-family: var(--faddom-font-heading);
	--faddom-type-heading-medium-size: 60px;
	--faddom-type-heading-medium-weight: 400;
	--faddom-type-heading-medium-line: 68px;
	--faddom-type-heading-medium-tracking: -0.01em;

	/* H3 Heading small */
	--faddom-type-heading-small-family: var(--faddom-font-heading);
	--faddom-type-heading-small-size: 48px;
	--faddom-type-heading-small-weight: 400;
	--faddom-type-heading-small-line: 56px;
	--faddom-type-heading-small-tracking: -0.01em;

	/* H4 Title large */
	--faddom-type-title-large-family: var(--faddom-font-body);
	--faddom-type-title-large-size: 40px;
	--faddom-type-title-large-weight: 400;
	--faddom-type-title-large-line: 48px;
	--faddom-type-title-large-tracking: -0.02em;

	/* H5 Title medium */
	--faddom-type-title-medium-family: var(--faddom-font-body);
	--faddom-type-title-medium-size: 32px;
	--faddom-type-title-medium-weight: 400;
	--faddom-type-title-medium-line: 40px;
	--faddom-type-title-medium-tracking: -0.02em;

	/* H6 Title small */
	--faddom-type-title-small-family: var(--faddom-font-body);
	--faddom-type-title-small-size: 24px;
	--faddom-type-title-small-weight: 400;
	--faddom-type-title-small-line: 32px;
	--faddom-type-title-small-tracking: -0.02em;

	/* Body Large */
	--faddom-type-body-large-family: var(--faddom-font-body);
	--faddom-type-body-large-size: 20px;
	--faddom-type-body-large-weight: 400;
	--faddom-type-body-large-line: 32px;
	--faddom-type-body-large-tracking: -0.02em;

	/* Body Large Emphasis */
	--faddom-type-body-large-emphasis-family: var(--faddom-font-body);
	--faddom-type-body-large-emphasis-size: 20px;
	--faddom-type-body-large-emphasis-weight: 500;
	--faddom-type-body-large-emphasis-line: 32px;
	--faddom-type-body-large-emphasis-tracking: -0.02em;

	/* Body Medium */
	--faddom-type-body-medium-family: var(--faddom-font-body);
	--faddom-type-body-medium-size: 18px;
	--faddom-type-body-medium-weight: 400;
	--faddom-type-body-medium-line: 28px;
	--faddom-type-body-medium-tracking: -0.01em;

	/* Body Medium Emphasis */
	--faddom-type-body-medium-emphasis-family: var(--faddom-font-body);
	--faddom-type-body-medium-emphasis-size: 18px;
	--faddom-type-body-medium-emphasis-weight: 500;
	--faddom-type-body-medium-emphasis-line: 28px;
	--faddom-type-body-medium-emphasis-tracking: -0.01em;

	/* Body Small */
	--faddom-type-body-small-family: var(--faddom-font-body);
	--faddom-type-body-small-size: 16px;
	--faddom-type-body-small-weight: 400;
	--faddom-type-body-small-line: 24px;
	--faddom-type-body-small-tracking: -0.01em;

	/* Body Small Emphasis */
	--faddom-type-body-small-emphasis-family: var(--faddom-font-body);
	--faddom-type-body-small-emphasis-size: 16px;
	--faddom-type-body-small-emphasis-weight: 500;
	--faddom-type-body-small-emphasis-line: 24px;
	--faddom-type-body-small-emphasis-tracking: -0.01em;

	/* Body XSmall */
	--faddom-type-body-xsmall-family: var(--faddom-font-body);
	--faddom-type-body-xsmall-size: 14px;
	--faddom-type-body-xsmall-weight: 400;
	--faddom-type-body-xsmall-line: 20px;
	--faddom-type-body-xsmall-tracking: -0.02em;

	/* Body XSmall Emphasis */
	--faddom-type-body-xsmall-emphasis-family: var(--faddom-font-body);
	--faddom-type-body-xsmall-emphasis-size: 14px;
	--faddom-type-body-xsmall-emphasis-weight: 500;
	--faddom-type-body-xsmall-emphasis-line: 20px;
	--faddom-type-body-xsmall-emphasis-tracking: -0.02em;

	/* CAPTION 13 / M */
	--faddom-type-caption-m-family: var(--faddom-font-body);
	--faddom-type-caption-m-size: 13px;
	--faddom-type-caption-m-weight: 500;
	--faddom-type-caption-m-line: 20px;
	--faddom-type-caption-m-tracking: 0;
	--faddom-type-caption-m-transform: uppercase;

	/* CAPTION 12 / S */
	--faddom-type-caption-s-family: var(--faddom-font-body);
	--faddom-type-caption-s-size: 12px;
	--faddom-type-caption-s-weight: 500;
	--faddom-type-caption-s-line: 16px;
	--faddom-type-caption-s-tracking: 0.05em;
	--faddom-type-caption-s-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Tablet — up to 1024px                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	:root {
		--faddom-type-heading-large-size: 56px;
		--faddom-type-heading-large-line: 60px;
		--faddom-type-heading-large-tracking: -0.01em;

		--faddom-type-heading-medium-size: 44px;
		--faddom-type-heading-medium-line: 48px;
		--faddom-type-heading-medium-tracking: -0.01em;

		--faddom-type-heading-small-size: 36px;
		--faddom-type-heading-small-line: 42px;
		--faddom-type-heading-small-tracking: -0.01em;

		--faddom-type-title-large-size: 28px;
		--faddom-type-title-large-line: 36px;
		--faddom-type-title-large-tracking: -0.02em;

		--faddom-type-title-medium-size: 24px;
		--faddom-type-title-medium-line: 32px;
		--faddom-type-title-medium-tracking: -0.02em;

		--faddom-type-title-small-size: 20px;
		--faddom-type-title-small-line: 28px;
		--faddom-type-title-small-tracking: -0.02em;

		--faddom-type-body-large-size: 18px;
		--faddom-type-body-large-line: 26px;
		--faddom-type-body-large-tracking: -0.02em;

		--faddom-type-body-large-emphasis-size: 18px;
		--faddom-type-body-large-emphasis-line: 26px;
		--faddom-type-body-large-emphasis-tracking: -0.02em;

		--faddom-type-body-medium-size: 16px;
		--faddom-type-body-medium-line: 24px;
		--faddom-type-body-medium-tracking: -0.01em;

		--faddom-type-body-medium-emphasis-size: 16px;
		--faddom-type-body-medium-emphasis-line: 24px;
		--faddom-type-body-medium-emphasis-tracking: -0.01em;

		--faddom-type-body-small-size: 14px;
		--faddom-type-body-small-line: 22px;
		--faddom-type-body-small-tracking: -0.01em;

		--faddom-type-body-small-emphasis-size: 14px;
		--faddom-type-body-small-emphasis-line: 22px;
		--faddom-type-body-small-emphasis-tracking: -0.01em;

		--faddom-type-caption-m-size: 12px;
		--faddom-type-caption-m-line: 18px;
		--faddom-type-caption-m-tracking: -0.02em;

		--faddom-type-caption-s-size: 12px;
		--faddom-type-caption-s-line: 18px;
		--faddom-type-caption-s-tracking: -0.02em;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                               */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
	:root {
		--faddom-type-heading-large-size: 40px;
		--faddom-type-heading-large-line: 48px;
		--faddom-type-heading-large-tracking: -0.01em;

		--faddom-type-heading-medium-size: 34px;
		--faddom-type-heading-medium-line: 42px;
		--faddom-type-heading-medium-tracking: -0.01em;

		--faddom-type-heading-small-size: 28px;
		--faddom-type-heading-small-line: 36px;
		--faddom-type-heading-small-tracking: -0.01em;

		--faddom-type-title-large-size: 24px;
		--faddom-type-title-large-line: 31px;
		--faddom-type-title-large-tracking: -0.04em;

		--faddom-type-title-medium-size: 22px;
		--faddom-type-title-medium-line: 30px;
		--faddom-type-title-medium-tracking: -0.04em;

		--faddom-type-title-small-size: 18px;
		--faddom-type-title-small-line: 26px;
		--faddom-type-title-small-tracking: -0.04em;

		--faddom-type-body-large-size: 18px;
		--faddom-type-body-large-line: 28px;
		--faddom-type-body-large-tracking: -0.01em;

		--faddom-type-body-large-emphasis-size: 18px;
		--faddom-type-body-large-emphasis-line: 28px;
		--faddom-type-body-large-emphasis-tracking: -0.01em;

		--faddom-type-body-medium-size: 16px;
		--faddom-type-body-medium-line: 24px;
		--faddom-type-body-medium-tracking: -0.01em;

		--faddom-type-body-medium-emphasis-size: 16px;
		--faddom-type-body-medium-emphasis-line: 24px;
		--faddom-type-body-medium-emphasis-tracking: -0.01em;

		--faddom-type-body-small-size: 14px;
		--faddom-type-body-small-line: 22px;
		--faddom-type-body-small-tracking: -0.01em;

		--faddom-type-body-small-emphasis-size: 14px;
		--faddom-type-body-small-emphasis-line: 22px;
		--faddom-type-body-small-emphasis-tracking: -0.01em;

		--faddom-type-body-xsmall-size: 12px;
		--faddom-type-body-xsmall-line: 20px;
		--faddom-type-body-xsmall-tracking: -0.01em;

		--faddom-type-body-xsmall-emphasis-size: 12px;
		--faddom-type-body-xsmall-emphasis-line: 20px;
		--faddom-type-body-xsmall-emphasis-tracking: -0.01em;

		--faddom-type-caption-m-size: 12px;
		--faddom-type-caption-m-line: 16px;
		--faddom-type-caption-m-tracking: 0.06em;

		--faddom-type-caption-s-size: 11px;
		--faddom-type-caption-s-line: 16px;
		--faddom-type-caption-s-tracking: 0.05em;
	}
}

/* ------------------------------------------------------------------ */
/* Utility classes — apply a full type style in one class             */
/* ------------------------------------------------------------------ */
.faddom-type-heading-large {
	font-family: var(--faddom-type-heading-large-family);
	font-size: var(--faddom-type-heading-large-size);
	font-weight: var(--faddom-type-heading-large-weight);
	line-height: var(--faddom-type-heading-large-line);
	letter-spacing: var(--faddom-type-heading-large-tracking);
}

.faddom-type-heading-medium {
	font-family: var(--faddom-type-heading-medium-family);
	font-size: var(--faddom-type-heading-medium-size);
	font-weight: var(--faddom-type-heading-medium-weight);
	line-height: var(--faddom-type-heading-medium-line);
	letter-spacing: var(--faddom-type-heading-medium-tracking);
}

.faddom-type-heading-small {
	font-family: var(--faddom-type-heading-small-family);
	font-size: var(--faddom-type-heading-small-size);
	font-weight: var(--faddom-type-heading-small-weight);
	line-height: var(--faddom-type-heading-small-line);
	letter-spacing: var(--faddom-type-heading-small-tracking);
}

.faddom-type-title-large {
	font-family: var(--faddom-type-title-large-family);
	font-size: var(--faddom-type-title-large-size);
	font-weight: var(--faddom-type-title-large-weight);
	line-height: var(--faddom-type-title-large-line);
	letter-spacing: var(--faddom-type-title-large-tracking);
}

.faddom-type-title-medium {
	font-family: var(--faddom-type-title-medium-family);
	font-size: var(--faddom-type-title-medium-size);
	font-weight: var(--faddom-type-title-medium-weight);
	line-height: var(--faddom-type-title-medium-line);
	letter-spacing: var(--faddom-type-title-medium-tracking);
}

.faddom-type-title-small {
	font-family: var(--faddom-type-title-small-family);
	font-size: var(--faddom-type-title-small-size);
	font-weight: var(--faddom-type-title-small-weight);
	line-height: var(--faddom-type-title-small-line);
	letter-spacing: var(--faddom-type-title-small-tracking);
}

.faddom-type-body-large {
	font-family: var(--faddom-type-body-large-family);
	font-size: var(--faddom-type-body-large-size);
	font-weight: var(--faddom-type-body-large-weight);
	line-height: var(--faddom-type-body-large-line);
	letter-spacing: var(--faddom-type-body-large-tracking);
}

.faddom-type-body-large-emphasis {
	font-family: var(--faddom-type-body-large-emphasis-family);
	font-size: var(--faddom-type-body-large-emphasis-size);
	font-weight: var(--faddom-type-body-large-emphasis-weight);
	line-height: var(--faddom-type-body-large-emphasis-line);
	letter-spacing: var(--faddom-type-body-large-emphasis-tracking);
}

.faddom-type-body-medium {
	font-family: var(--faddom-type-body-medium-family);
	font-size: var(--faddom-type-body-medium-size);
	font-weight: var(--faddom-type-body-medium-weight);
	line-height: var(--faddom-type-body-medium-line);
	letter-spacing: var(--faddom-type-body-medium-tracking);
}

.faddom-type-body-medium-emphasis {
	font-family: var(--faddom-type-body-medium-emphasis-family);
	font-size: var(--faddom-type-body-medium-emphasis-size);
	font-weight: var(--faddom-type-body-medium-emphasis-weight);
	line-height: var(--faddom-type-body-medium-emphasis-line);
	letter-spacing: var(--faddom-type-body-medium-emphasis-tracking);
}

.faddom-type-body-small {
	font-family: var(--faddom-type-body-small-family);
	font-size: var(--faddom-type-body-small-size);
	font-weight: var(--faddom-type-body-small-weight);
	line-height: var(--faddom-type-body-small-line);
	letter-spacing: var(--faddom-type-body-small-tracking);
}

.faddom-type-body-small-emphasis {
	font-family: var(--faddom-type-body-small-emphasis-family);
	font-size: var(--faddom-type-body-small-emphasis-size);
	font-weight: var(--faddom-type-body-small-emphasis-weight);
	line-height: var(--faddom-type-body-small-emphasis-line);
	letter-spacing: var(--faddom-type-body-small-emphasis-tracking);
}

.faddom-type-body-xsmall {
	font-family: var(--faddom-type-body-xsmall-family);
	font-size: var(--faddom-type-body-xsmall-size);
	font-weight: var(--faddom-type-body-xsmall-weight);
	line-height: var(--faddom-type-body-xsmall-line);
	letter-spacing: var(--faddom-type-body-xsmall-tracking);
}

.faddom-type-body-xsmall-emphasis {
	font-family: var(--faddom-type-body-xsmall-emphasis-family);
	font-size: var(--faddom-type-body-xsmall-emphasis-size);
	font-weight: var(--faddom-type-body-xsmall-emphasis-weight);
	line-height: var(--faddom-type-body-xsmall-emphasis-line);
	letter-spacing: var(--faddom-type-body-xsmall-emphasis-tracking);
}

.faddom-type-caption-m {
	font-family: var(--faddom-type-caption-m-family);
	font-size: var(--faddom-type-caption-m-size);
	font-weight: var(--faddom-type-caption-m-weight);
	line-height: var(--faddom-type-caption-m-line);
	letter-spacing: var(--faddom-type-caption-m-tracking);
	text-transform: var(--faddom-type-caption-m-transform);
}

.faddom-type-caption-s {
	font-family: var(--faddom-type-caption-s-family);
	font-size: var(--faddom-type-caption-s-size);
	font-weight: var(--faddom-type-caption-s-weight);
	line-height: var(--faddom-type-caption-s-line);
	letter-spacing: var(--faddom-type-caption-s-tracking);
	text-transform: var(--faddom-type-caption-s-transform);
}