@total_onion/onion-library 3.2.0 → 3.2.2

package/components/fields-core-typography-mixins-v3/core-typography-mixins-v3.scss

@@ -0,0 +1,1080 @@
+@use '../fields-core-functions-v3/core-functions-v3';
+@use '../fields-core-mixins-v3/core-mixins-v3';
+@use '../../breakpoints';
+
+@mixin h-xl-size {
+	font-size: clamp(
+		var(--h-xl-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-xl-desktop, 280)),
+		var(--h-xl-font-size-max-desktop, 180px)
+	);
+	line-height: var(--h-xl-line-height);
+	letter-spacing: var(--h-xl-letter-spacing);
+}
+@mixin h-xl {
+	letter-spacing: var(--h-xl-letter-spacing);
+	line-height: var(--h-xl-line-height);
+	font-family: var(--h-xl-font-family);
+	--default-font-weight: var(--h-xl-default-font-weight);
+	font-weight: var(--default-font-weight);
+	strong,
+	b {
+		font-weight: var(--h-xl-bold-font-weight);
+	}
+	font-size: clamp(
+		var(--h-xl-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-xl-mobile, 44), 'mobile'),
+		var(--h-xl-font-size-max-mobile, 180px)
+	);
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-xl-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-xl-portrait, 44), 'portrait'),
+			var(--h-xl-font-size-max-mobile, 180px)
+		);
+	}
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-xl-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-xl-landscape, 70), 'landscape'),
+			var(--h-xl-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-xl-size();
+	}
+}
+@mixin h-l-size {
+	font-size: clamp(
+		var(--h-l-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-l-desktop, 220)),
+		var(--h-l-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-l-letter-spacing);
+	line-height: var(--h-l-line-height);
+}
+@mixin h-l {
+	letter-spacing: var(--h-l-letter-spacing);
+	line-height: var(--h-l-line-height);
+	font-family: var(--h-l-font-family);
+	--default-font-weight: var(--h-l-default-font-weight);
+	font-weight: var(--h-l-default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-l-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-l-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-l-mobile, 32), 'mobile'),
+		var(--h-l-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-l-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-l-portrait, 32), 'portrait'),
+			var(--h-l-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-l-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-l-landscape, 44), 'landscape'),
+			var(--h-l-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-l-size();
+	}
+}
+@mixin h-m-size {
+	font-size: clamp(
+		var(--h-m-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-m-desktop, 32)),
+		var(--h-m-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-m-letter-spacing);
+	line-height: var(--h-m-line-height);
+}
+@mixin h-m {
+	letter-spacing: var(--h-m-letter-spacing);
+	line-height: var(--h-m-line-height);
+	font-family: var(--h-m-font-family);
+	--default-font-weight: var(--h-m-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-m-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-m-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-m-mobile, 24)),
+		var(--h-m-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-m-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-m-portrait, 24)),
+			var(--h-m-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-m-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-m-landscape, 32)),
+			var(--h-m-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-m-size();
+	}
+}
+@mixin h-s-size {
+	font-size: clamp(
+		var(--h-s-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-s-desktop, 24)),
+		var(--h-s-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-s-letter-spacing);
+	line-height: var(--h-s-line-height);
+}
+@mixin h-s {
+	letter-spacing: var(--h-s-letter-spacing);
+	line-height: var(--h-s-line-height);
+	font-family: var(--h-s-font-family);
+	--default-font-weight: var(--h-s-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-s-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-s-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-s-mobile, 20), 'mobile'),
+		var(--h-s-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-s-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-s-portrait, 20), 'portrait'),
+			var(--h-s-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-s-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-s-landscape, 24), 'landscape'),
+			var(--h-s-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-s-size();
+	}
+}
+@mixin h-xs-size {
+	font-size: clamp(
+		var(--h-xs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-xs-desktop, 18)),
+		var(--h-xs-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-xs-letter-spacing);
+	line-height: var(--h-xs-line-height);
+}
+@mixin h-xs {
+	letter-spacing: var(--h-xs-letter-spacing);
+	line-height: var(--h-xs-line-height);
+	font-family: var(--h-xs-font-family);
+	--default-font-weight: var(--h-xs-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-xs-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-xs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-xs-mobile, 14), 'mobile'),
+		var(--h-xs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-xs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-xs-portrait, 14), 'portrait'),
+			var(--h-xs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-xs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-xs-landscape, 18), 'landscape'),
+			var(--h-xs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-xs-size();
+	}
+}
+@mixin h-xxs-size {
+	font-size: clamp(
+		var(--h-xxs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-xxs-desktop, 16)),
+		var(--h-xxs-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-xxs-letter-spacing);
+	line-height: var(--h-xxs-line-height);
+}
+@mixin h-xxs {
+	letter-spacing: var(--h-xxs-letter-spacing);
+	line-height: var(--h-xxs-line-height);
+	font-family: var(--h-xxs-font-family);
+	--default-font-weight: var(--h-xxs-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-xxs-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-xxs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-xxs-mobile, 12), 'mobile'),
+		var(--h-xxs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-xxs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-xxs-portrait, 12), 'portrait'),
+			var(--h-xxs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-xxs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--h-xxs-landscape, 16), 'landscape'),
+			var(--h-xxs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-xxs-size();
+	}
+}
+@mixin h-xxxs-size {
+	font-size: clamp(
+		var(--h-xxxs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--h-xxxs-desktop, 12)),
+		var(--h-xxxs-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--h-xxxs-letter-spacing);
+	line-height: var(--h-xxxs-line-height);
+}
+@mixin h-xxxs {
+	letter-spacing: var(--h-xxxs-letter-spacing);
+	line-height: var(--h-xxxs-line-height);
+	font-family: var(--h-xxxs-font-family);
+	--default-font-weight: var(--h-xxxs-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--h-xxxs-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--h-xxxs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--h-xxxs-mobile, 10), 'mobile'),
+		var(--h-xxxs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--h-xxxs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--h-xxxs-portrait, 10), 'portrait'),
+			var(--h-xxxs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--h-xxxs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(
+				var(--h-xxxs-landscape, 12),
+				'landscape'
+			),
+			var(--h-xxxs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include h-xxxs-size();
+	}
+}
+
+@mixin sh-xxxl-size {
+	font-size: clamp(
+		var(--sh-xxxl-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-xxxl-desktop, 70)),
+		var(--sh-xxxl-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-xxxl-letter-spacing);
+	line-height: var(--sh-xxxl-line-height);
+}
+
+@mixin sh-xxxl {
+	letter-spacing: var(--sh-xxxl-letter-spacing);
+	line-height: var(--sh-xxxl-line-height);
+	font-family: var(--sh-xxxl-font-family);
+	--default-font-weight: var(--sh-xxxl-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-xxxl-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-xxxl-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-xxxl-mobile, 60)),
+		var(--sh-xxxl-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-xxxl-size();
+	}
+}
+
+@mixin sh-xxl-size {
+	font-size: clamp(
+		var(--sh-xxl-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-xxl-desktop, 52)),
+		var(--sh-xxl-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-xxl-letter-spacing);
+	line-height: var(--sh-xxl-line-height);
+}
+
+@mixin sh-xxl {
+	letter-spacing: var(--sh-xxl-letter-spacing);
+	line-height: var(--sh-xxl-line-height);
+	font-family: var(--sh-xxl-font-family);
+	--default-font-weight: var(--sh-xxl-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-xxl-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-xxl-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-xxl-mobile, 40)),
+		var(--sh-xxl-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-xxl-size();
+	}
+}
+
+@mixin sh-xl-size {
+	font-size: clamp(
+		var(--sh-xl-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-xl-desktop, 52)),
+		var(--sh-xl-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-xl-letter-spacing);
+	line-height: var(--sh-xl-line-height);
+}
+@mixin sh-xl {
+	letter-spacing: var(--sh-xl-letter-spacing);
+	line-height: var(--sh-xl-line-height);
+	font-family: var(--sh-xl-font-family);
+	--default-font-weight: var(--sh-xl-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-xl-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-xl-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-xl-mobile, 44)),
+		var(--sh-xl-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-xl-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-xl-portrait, 44), 'portrait'),
+			var(--sh-xl-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-xl-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-xl-landscape, 70), 'landscape'),
+			var(--sh-xl-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-xl-size();
+	}
+}
+@mixin sh-l-size {
+	font-size: clamp(
+		var(--sh-l-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-l-desktop, 44)),
+		var(--sh-l-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-l-letter-spacing);
+	line-height: var(--sh-l-line-height);
+}
+@mixin sh-l {
+	letter-spacing: var(--sh-l-letter-spacing);
+	line-height: var(--sh-l-line-height);
+	font-family: var(--sh-l-font-family);
+	--default-font-weight: var(--sh-l-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-l-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-l-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-l-mobile, 32)),
+		var(--sh-l-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-l-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-l-portrait, 32)),
+			var(--sh-l-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-l-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-l-landscape, 44)),
+			var(--sh-l-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-l-size();
+	}
+}
+@mixin sh-m-size {
+	font-size: clamp(
+		var(--sh-m-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-m-desktop, 30)),
+		var(--sh-m-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-m-letter-spacing);
+	line-height: var(--sh-m-line-height);
+}
+@mixin sh-m {
+	letter-spacing: var(--sh-m-letter-spacing);
+	line-height: var(--sh-m-line-height);
+	font-family: var(--sh-m-font-family);
+	--default-font-weight: var(--sh-m-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-m-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-m-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-m-mobile, 24)),
+		var(--sh-m-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-m-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-m-portrait, 24)),
+			var(--sh-m-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-m-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-m-landscape, 32)),
+			var(--sh-m-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-m-size();
+	}
+}
+@mixin sh-s-size {
+	font-size: clamp(
+		var(--sh-s-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-s-desktop, 26)),
+		var(--sh-s-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-s-letter-spacing);
+	line-height: var(--sh-s-line-height);
+}
+@mixin sh-s {
+	letter-spacing: var(--sh-s-letter-spacing);
+	line-height: var(--sh-s-line-height);
+	font-family: var(--sh-s-font-family);
+	--default-font-weight: var(--sh-s-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-s-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-s-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-s-mobile, 20)),
+		var(--sh-s-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-s-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-s-portrait, 20)),
+			var(--sh-s-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-s-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-s-landscape, 24)),
+			var(--sh-s-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-s-size();
+	}
+}
+@mixin sh-xs-size {
+	font-size: clamp(
+		var(--sh-xs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-xs-desktop, 18)),
+		var(--sh-xs-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-xs-letter-spacing);
+	line-height: var(--sh-xs-line-height);
+}
+@mixin sh-xs {
+	letter-spacing: var(--sh-xs-letter-spacing);
+	line-height: var(--sh-xs-line-height);
+	font-family: var(--sh-xs-font-family);
+	--default-font-weight: var(--sh-xs-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-xs-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-xs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-xs-mobile, 14)),
+		var(--sh-xs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-xs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-xs-portrait, 14)),
+			var(--sh-xs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-xs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-xs-landscape, 18)),
+			var(--sh-xs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-xs-size();
+	}
+}
+@mixin sh-xxs-size {
+	font-size: clamp(
+		var(--sh-xxs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--sh-xxs-desktop, 16)),
+		var(--sh-xxs-font-size-max-desktop, 180px)
+	);
+	letter-spacing: var(--sh-xxs-letter-spacing);
+	line-height: var(--sh-xxs-line-height);
+}
+@mixin sh-xxs {
+	letter-spacing: var(--sh-xxs-letter-spacing);
+	line-height: var(--sh-xxs-line-height);
+	font-family: var(--sh-xxs-font-family);
+	--default-font-weight: var(--sh-xxs-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--sh-xxs-bold-font-weight);
+	}
+
+	font-size: clamp(
+		var(--sh-xxs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--sh-xxs-mobile, 12)),
+		var(--sh-xxs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--sh-xxs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--sh-xxs-portrait, 12)),
+			var(--sh-xxs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--sh-xxs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--sh-xxs-landscape, 16)),
+			var(--sh-xxs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include sh-xxs-size();
+	}
+}
+@mixin p-l-size {
+	font-size: clamp(
+		var(--p-l-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-l-desktop, 20)),
+		var(--p-l-font-size-max-desktop, 180px)
+	);
+	line-height: var(--paragraph-large-line-height);
+	letter-spacing: var(--paragraph-large-letter-spacing);
+}
+@mixin p-l {
+	line-height: var(--paragraph-large-line-height);
+	letter-spacing: var(--paragraph-large-letter-spacing);
+	font-family: var(--paragraph-large-font-family);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-l-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-l-mobile, 18), 'mobile'),
+		var(--p-l-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-l-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-l-portrait, 18), 'portrait'),
+			var(--p-l-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-l-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-l-landscape, 20), 'landscape'),
+			var(--p-l-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-l-size();
+	}
+}
+
+@mixin p-size {
+	font-size: clamp(
+		var(--p-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-desktop, 18)),
+		var(--p-font-size-max-desktop, 180px)
+	);
+}
+@mixin p {
+	line-height: var(--paragraph-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-font-family);
+	--default-font-weight: var(--paragraph-default-font-weight);
+	font-weight: var(--default-font-weight);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-mobile, 16)),
+		var(--p-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-portrait, 16)),
+			var(--p-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-landscape, 18)),
+			var(--p-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-size();
+	}
+}
+@mixin p-s-size {
+	font-size: clamp(
+		var(--p-s-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-s-desktop, 16)),
+		var(--p-s-font-size-max-desktop, 180px)
+	);
+}
+@mixin p-s {
+	line-height: var(--paragraph-small-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-font-family);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-s-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-s-mobile, 14), 'mobile'),
+		var(--p-s-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-s-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-s-portrait, 14), 'portrait'),
+			var(--p-s-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-s-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-s-landscape, 16), 'landscape'),
+			var(--p-s-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-s-size();
+	}
+}
+@mixin p-xs-size {
+	font-size: clamp(
+		var(--p-xs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-xs-desktop, 14)),
+		var(--p-xs-font-size-max-desktop, 180px)
+	);
+}
+@mixin p-xs {
+	line-height: var(--paragraph-extra-small-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-extra-small-line-height);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-extra-small-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-xs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-xs-mobile, 12)),
+		var(--p-xs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-xs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-xs-portrait, 12)),
+			var(--p-xs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-xs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-xs-landscape, 14)),
+			var(--p-xs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-xs-size();
+	}
+}
+@mixin p-xs-size {
+	font-size: clamp(
+		var(--p-xs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-xs-desktop, 12)),
+		var(--p-xs-font-size-max-desktop, 180px)
+	);
+}
+@mixin p-xs {
+	line-height: var(--paragraph-extra-small-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-font-family);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-extra-small-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-xs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-xs-mobile, 12)),
+		var(--p-xs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-xs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-xs-portrait, 12)),
+			var(--p-xs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-xs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-xs-landscape, 12)),
+			var(--p-xs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-xs-size();
+	}
+}
+@mixin p-xxs-size {
+	font-size: clamp(
+		var(--p-xxs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-xxs-desktop, 10)),
+		var(--p-xxs-font-size-max-desktop, 180px)
+	);
+}
+@mixin p-xxs {
+	line-height: var(--paragraph-extra-extra-small-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-font-family);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-xxs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-xxs-mobile, 10)),
+		var(--p-xxs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-xxs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-xxs-portrait, 10)),
+			var(--p-xxs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-xxs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-xxs-landscape, 10)),
+			var(--p-xxs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-xxs-size();
+	}
+}
+@mixin p-xxxs-size {
+	font-size: clamp(
+		var(--p-xxxs-font-size-min-desktop, 10px),
+		core-functions-v3.fontSize(var(--p-xxxs-desktop)),
+		var(--p-xxxs-font-size-max-desktop, 180px)
+	);
+}
+@mixin p-xxxs {
+	line-height: var(--paragraph-line-height);
+	letter-spacing: var(--paragraph-letter-spacing);
+	font-family: var(--paragraph-font-family);
+
+	strong,
+	b {
+		font-weight: var(--paragraph-bold-font-weight);
+	}
+
+	&:has(.font-tertiary) {
+		line-height: calc(
+			var(--paragraph-line-height) *
+				var(--global-line-height-multiplier-tertiary)
+		);
+	}
+
+	em {
+		font-style: italic;
+	}
+
+	font-size: clamp(
+		var(--p-xxxs-font-size-min-mobile, 10px),
+		core-functions-v3.fontSize(var(--p-xxxs-mobile)),
+		var(--p-xxxs-font-size-max-mobile, 180px)
+	);
+
+	@include core-mixins-v3.device(breakpoints.$tabPortrait) {
+		font-size: clamp(
+			var(--p-xxxs-font-size-min-mobile, 10px),
+			core-functions-v3.fontSize(var(--p-xxxs-portrait)),
+			var(--p-xxxs-font-size-max-mobile, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$tabLandscape) {
+		font-size: clamp(
+			var(--p-xxxs-font-size-min-desktop, 10px),
+			core-functions-v3.fontSize(var(--p-xxxs-landscape)),
+			var(--p-xxxs-font-size-max-desktop, 180px)
+		);
+	}
+
+	@include core-mixins-v3.device(breakpoints.$desktop) {
+		@include p-xxxs-size();
+	}
+}
+@mixin fontPrimary() {
+	font-family: var(--primary-font-family), sans-serif;
+	--font-size-multiplier: var(--global-font-multiplier-primary);
+}
+@mixin fontSecondary() {
+	font-family: var(--secondary-font-family), sans-serif;
+	--font-size-multiplier: var(--global-font-multiplier-secondary);
+}
+@mixin fontTertiary() {
+	font-family: var(--tertiary-font-family), sans-serif;
+	--font-size-multiplier: var(--global-font-multiplier-tertiary);
+}
+@mixin fontQuaternary() {
+	font-family: var(--quaternary-font-family), sans-serif;
+	--font-size-multiplier: var(--global-font-multiplier-quaternary);
+}