@flitsmeister/design-system 3.0.1 → 3.1.0

package/styles/fm-design-system/fm-design-system.css

@@ -0,0 +1,921 @@
+/* Generated by tokens/scripts/export-tokens.js — do not edit.
+ *
+ * Values live on --fm-* so Tailwind @theme can map --color-* / --spacing-*
+ * without overwriting these declarations. Public names are aliases:
+ *   --color-blue-600: var(--fm-color-blue-600);
+ * Load this file as a separate entry from the Tailwind stylesheet.
+ */
+
+:root {
+  /* Blue */
+  --fm-color-blue-100: #d0ebff;
+  --color-blue-100: var(--fm-color-blue-100);
+  --fm-color-blue-200: #adcbe4;
+  --color-blue-200: var(--fm-color-blue-200);
+  --fm-color-blue-300: #93c5fd;
+  --color-blue-300: var(--fm-color-blue-300);
+  --fm-color-blue-400: #4dabf7;
+  --color-blue-400: var(--fm-color-blue-400);
+  --fm-color-blue-50: #daecfc;
+  --color-blue-50: var(--fm-color-blue-50);
+  --fm-color-blue-500: #0086f5;
+  --color-blue-500: var(--fm-color-blue-500);
+  --fm-color-blue-600: #007fe8;
+  --color-blue-600: var(--fm-color-blue-600);
+  --fm-color-blue-700: #1c7ed6;
+  --color-blue-700: var(--fm-color-blue-700);
+  --fm-color-blue-800: #066cbf;
+  --color-blue-800: var(--fm-color-blue-800);
+  --fm-color-blue-900: #0c469e;
+  --color-blue-900: var(--fm-color-blue-900);
+  --fm-color-blue-950: #273744;
+  --color-blue-950: var(--fm-color-blue-950);
+
+  /* Cyan */
+  --fm-color-cyan-100: #c5f6fa;
+  --color-cyan-100: var(--fm-color-cyan-100);
+  --fm-color-cyan-200: #99e9f2;
+  --color-cyan-200: var(--fm-color-cyan-200);
+  --fm-color-cyan-300: #66d9e8;
+  --color-cyan-300: var(--fm-color-cyan-300);
+  --fm-color-cyan-400: #3bc9db;
+  --color-cyan-400: var(--fm-color-cyan-400);
+  --fm-color-cyan-50: #e3fafc;
+  --color-cyan-50: var(--fm-color-cyan-50);
+  --fm-color-cyan-500: #22b8cf;
+  --color-cyan-500: var(--fm-color-cyan-500);
+  --fm-color-cyan-600: #15aabf;
+  --color-cyan-600: var(--fm-color-cyan-600);
+  --fm-color-cyan-700: #1098ad;
+  --color-cyan-700: var(--fm-color-cyan-700);
+  --fm-color-cyan-800: #0c8599;
+  --color-cyan-800: var(--fm-color-cyan-800);
+  --fm-color-cyan-900: #0b7285;
+  --color-cyan-900: var(--fm-color-cyan-900);
+
+  /* Grape */
+  --fm-color-grape-100: #f3d9fa;
+  --color-grape-100: var(--fm-color-grape-100);
+  --fm-color-grape-200: #eebefa;
+  --color-grape-200: var(--fm-color-grape-200);
+  --fm-color-grape-300: #e599f7;
+  --color-grape-300: var(--fm-color-grape-300);
+  --fm-color-grape-400: #d66bf2;
+  --color-grape-400: var(--fm-color-grape-400);
+  --fm-color-grape-50: #f8f0fc;
+  --color-grape-50: var(--fm-color-grape-50);
+  --fm-color-grape-500: #ae61fa;
+  --color-grape-500: var(--fm-color-grape-500);
+  --fm-color-grape-600: #c539eb;
+  --color-grape-600: var(--fm-color-grape-600);
+  --fm-color-grape-700: #ae40f2;
+  --color-grape-700: var(--fm-color-grape-700);
+  --fm-color-grape-800: #a738ff;
+  --color-grape-800: var(--fm-color-grape-800);
+  --fm-color-grape-900: #862e9c;
+  --color-grape-900: var(--fm-color-grape-900);
+  --fm-color-grape-950: #69197d;
+  --color-grape-950: var(--fm-color-grape-950);
+
+  /* Gray */
+  --fm-color-gray-100: #f0f1f2;
+  --color-gray-100: var(--fm-color-gray-100);
+  --fm-color-gray-200: #e1e3e5;
+  --color-gray-200: var(--fm-color-gray-200);
+  --fm-color-gray-300: #cbcfd2;
+  --color-gray-300: var(--fm-color-gray-300);
+  --fm-color-gray-400: #aab1b6;
+  --color-gray-400: var(--fm-color-gray-400);
+  --fm-color-gray-50: #f0f1f2;
+  --color-gray-50: var(--fm-color-gray-50);
+  --fm-color-gray-500: #6a747b;
+  --color-gray-500: var(--fm-color-gray-500);
+  --fm-color-gray-600: #40464a;
+  --color-gray-600: var(--fm-color-gray-600);
+  --fm-color-gray-700: #2b2f32;
+  --color-gray-700: var(--fm-color-gray-700);
+  --fm-color-gray-800: #1d1f20;
+  --color-gray-800: var(--fm-color-gray-800);
+  --fm-color-gray-900: #161616;
+  --color-gray-900: var(--fm-color-gray-900);
+  --fm-color-gray-950: #0d0d0d;
+  --color-gray-950: var(--fm-color-gray-950);
+
+  /* Green */
+  --fm-color-green-100: #d3f9d8;
+  --color-green-100: var(--fm-color-green-100);
+  --fm-color-green-200: #b2f2bb;
+  --color-green-200: var(--fm-color-green-200);
+  --fm-color-green-300: #8ce99a;
+  --color-green-300: var(--fm-color-green-300);
+  --fm-color-green-400: #69db7c;
+  --color-green-400: var(--fm-color-green-400);
+  --fm-color-green-50: #ebfbee;
+  --color-green-50: var(--fm-color-green-50);
+  --fm-color-green-500: #51cf66;
+  --color-green-500: var(--fm-color-green-500);
+  --fm-color-green-600: #40c057;
+  --color-green-600: var(--fm-color-green-600);
+  --fm-color-green-700: #38a849;
+  --color-green-700: var(--fm-color-green-700);
+  --fm-color-green-800: #39a049;
+  --color-green-800: var(--fm-color-green-800);
+  --fm-color-green-900: #2b8a3e;
+  --color-green-900: var(--fm-color-green-900);
+  --fm-color-green-950: #17401d;
+  --color-green-950: var(--fm-color-green-950);
+
+  /* Indigo */
+  --fm-color-indigo-100: #dbe4ff;
+  --color-indigo-100: var(--fm-color-indigo-100);
+  --fm-color-indigo-200: #bac8ff;
+  --color-indigo-200: var(--fm-color-indigo-200);
+  --fm-color-indigo-300: #91a7ff;
+  --color-indigo-300: var(--fm-color-indigo-300);
+  --fm-color-indigo-400: #748ffc;
+  --color-indigo-400: var(--fm-color-indigo-400);
+  --fm-color-indigo-50: #edf2ff;
+  --color-indigo-50: var(--fm-color-indigo-50);
+  --fm-color-indigo-500: #2e74ff;
+  --color-indigo-500: var(--fm-color-indigo-500);
+  --fm-color-indigo-600: #386bff;
+  --color-indigo-600: var(--fm-color-indigo-600);
+  --fm-color-indigo-700: #4263eb;
+  --color-indigo-700: var(--fm-color-indigo-700);
+  --fm-color-indigo-800: #345cce;
+  --color-indigo-800: var(--fm-color-indigo-800);
+  --fm-color-indigo-900: #364fc7;
+  --color-indigo-900: var(--fm-color-indigo-900);
+
+  /* Lime */
+  --fm-color-lime-100: #e9fac8;
+  --color-lime-100: var(--fm-color-lime-100);
+  --fm-color-lime-200: #d8f5a2;
+  --color-lime-200: var(--fm-color-lime-200);
+  --fm-color-lime-300: #faff12;
+  --color-lime-300: var(--fm-color-lime-300);
+  --fm-color-lime-400: #c2d84d;
+  --color-lime-400: var(--fm-color-lime-400);
+  --fm-color-lime-50: #f4fce3;
+  --color-lime-50: var(--fm-color-lime-50);
+  --fm-color-lime-500: #9fff53;
+  --color-lime-500: var(--fm-color-lime-500);
+  --fm-color-lime-600: #82c91e;
+  --color-lime-600: var(--fm-color-lime-600);
+  --fm-color-lime-700: #7db527;
+  --color-lime-700: var(--fm-color-lime-700);
+  --fm-color-lime-800: #66a80f;
+  --color-lime-800: var(--fm-color-lime-800);
+  --fm-color-lime-900: #5c940d;
+  --color-lime-900: var(--fm-color-lime-900);
+
+  /* Orange */
+  --fm-color-orange-100: #ffe8cc;
+  --color-orange-100: var(--fm-color-orange-100);
+  --fm-color-orange-200: #ffd8a8;
+  --color-orange-200: var(--fm-color-orange-200);
+  --fm-color-orange-300: #ffc078;
+  --color-orange-300: var(--fm-color-orange-300);
+  --fm-color-orange-400: #fe942a;
+  --color-orange-400: var(--fm-color-orange-400);
+  --fm-color-orange-50: #fff8f0;
+  --color-orange-50: var(--fm-color-orange-50);
+  --fm-color-orange-500: #ff8b17;
+  --color-orange-500: var(--fm-color-orange-500);
+  --fm-color-orange-600: #fd7e14;
+  --color-orange-600: var(--fm-color-orange-600);
+  --fm-color-orange-700: #f76707;
+  --color-orange-700: var(--fm-color-orange-700);
+  --fm-color-orange-800: #e8590c;
+  --color-orange-800: var(--fm-color-orange-800);
+  --fm-color-orange-900: #d9480f;
+  --color-orange-900: var(--fm-color-orange-900);
+  --fm-color-orange-950: #481805;
+  --color-orange-950: var(--fm-color-orange-950);
+
+  /* Pink */
+  --fm-color-pink-100: #ffdeeb;
+  --color-pink-100: var(--fm-color-pink-100);
+  --fm-color-pink-200: #fcc2d7;
+  --color-pink-200: var(--fm-color-pink-200);
+  --fm-color-pink-300: #faa2c1;
+  --color-pink-300: var(--fm-color-pink-300);
+  --fm-color-pink-400: #f783ac;
+  --color-pink-400: var(--fm-color-pink-400);
+  --fm-color-pink-50: #fff0f6;
+  --color-pink-50: var(--fm-color-pink-50);
+  --fm-color-pink-500: #f06595;
+  --color-pink-500: var(--fm-color-pink-500);
+  --fm-color-pink-600: #e64980;
+  --color-pink-600: var(--fm-color-pink-600);
+  --fm-color-pink-700: #d6336c;
+  --color-pink-700: var(--fm-color-pink-700);
+  --fm-color-pink-800: #c2255c;
+  --color-pink-800: var(--fm-color-pink-800);
+  --fm-color-pink-900: #a61e4d;
+  --color-pink-900: var(--fm-color-pink-900);
+
+  /* Red */
+  --fm-color-red-100: #ffe3e3;
+  --color-red-100: var(--fm-color-red-100);
+  --fm-color-red-200: #ffc9c9;
+  --color-red-200: var(--fm-color-red-200);
+  --fm-color-red-300: #ffa8a8;
+  --color-red-300: var(--fm-color-red-300);
+  --fm-color-red-400: #ff8787;
+  --color-red-400: var(--fm-color-red-400);
+  --fm-color-red-50: #fff5f5;
+  --color-red-50: var(--fm-color-red-50);
+  --fm-color-red-500: #ff6b6b;
+  --color-red-500: var(--fm-color-red-500);
+  --fm-color-red-600: #fa4848;
+  --color-red-600: var(--fm-color-red-600);
+  --fm-color-red-700: #f24d4d;
+  --color-red-700: var(--fm-color-red-700);
+  --fm-color-red-800: #e03131;
+  --color-red-800: var(--fm-color-red-800);
+  --fm-color-red-900: #c92a2a;
+  --color-red-900: var(--fm-color-red-900);
+  --fm-color-red-950: #492728;
+  --color-red-950: var(--fm-color-red-950);
+
+  /* System */
+  --fm-color-system-black: #000000;
+  --color-system-black: var(--fm-color-system-black);
+  --fm-color-system-01: #ff2cac;
+  --color-system-01: var(--fm-color-system-01);
+  --fm-color-system-2: #31daec;
+  --color-system-2: var(--fm-color-system-2);
+  --fm-color-system-3: #ffbe17;
+  --color-system-3: var(--fm-color-system-3);
+  --fm-color-system-4: #10ff7d;
+  --color-system-4: var(--fm-color-system-4);
+  --fm-color-system-white: #ffffff;
+  --color-system-white: var(--fm-color-system-white);
+
+  /* Teal */
+  --fm-color-teal-100: #c3fae8;
+  --color-teal-100: var(--fm-color-teal-100);
+  --fm-color-teal-200: #96f2d7;
+  --color-teal-200: var(--fm-color-teal-200);
+  --fm-color-teal-300: #63e6be;
+  --color-teal-300: var(--fm-color-teal-300);
+  --fm-color-teal-400: #38d9a9;
+  --color-teal-400: var(--fm-color-teal-400);
+  --fm-color-teal-50: #e6fcf5;
+  --color-teal-50: var(--fm-color-teal-50);
+  --fm-color-teal-500: #20c997;
+  --color-teal-500: var(--fm-color-teal-500);
+  --fm-color-teal-600: #12b886;
+  --color-teal-600: var(--fm-color-teal-600);
+  --fm-color-teal-700: #0ca678;
+  --color-teal-700: var(--fm-color-teal-700);
+  --fm-color-teal-800: #099268;
+  --color-teal-800: var(--fm-color-teal-800);
+  --fm-color-teal-900: #087f5b;
+  --color-teal-900: var(--fm-color-teal-900);
+
+  /* Violet */
+  --fm-color-violet-100: #e5dbff;
+  --color-violet-100: var(--fm-color-violet-100);
+  --fm-color-violet-200: #c9b2dd;
+  --color-violet-200: var(--fm-color-violet-200);
+  --fm-color-violet-300: #b197fc;
+  --color-violet-300: var(--fm-color-violet-300);
+  --fm-color-violet-400: #9775fa;
+  --color-violet-400: var(--fm-color-violet-400);
+  --fm-color-violet-50: #f3f0ff;
+  --color-violet-50: var(--fm-color-violet-50);
+  --fm-color-violet-500: #845ef7;
+  --color-violet-500: var(--fm-color-violet-500);
+  --fm-color-violet-600: #7950f2;
+  --color-violet-600: var(--fm-color-violet-600);
+  --fm-color-violet-700: #4f19e9;
+  --color-violet-700: var(--fm-color-violet-700);
+  --fm-color-violet-800: #6741d9;
+  --color-violet-800: var(--fm-color-violet-800);
+  --fm-color-violet-900: #5f3dc4;
+  --color-violet-900: var(--fm-color-violet-900);
+  --fm-color-violet-950: #2b224e;
+  --color-violet-950: var(--fm-color-violet-950);
+
+  /* Yellow */
+  --fm-color-yellow-100: #fff3bf;
+  --color-yellow-100: var(--fm-color-yellow-100);
+  --fm-color-yellow-200: #ffec99;
+  --color-yellow-200: var(--fm-color-yellow-200);
+  --fm-color-yellow-300: #ffeb12;
+  --color-yellow-300: var(--fm-color-yellow-300);
+  --fm-color-yellow-400: #ffd60a;
+  --color-yellow-400: var(--fm-color-yellow-400);
+  --fm-color-yellow-50: #fff9db;
+  --color-yellow-50: var(--fm-color-yellow-50);
+  --fm-color-yellow-500: #ffcc00;
+  --color-yellow-500: var(--fm-color-yellow-500);
+  --fm-color-yellow-600: #fab005;
+  --color-yellow-600: var(--fm-color-yellow-600);
+  --fm-color-yellow-700: #f59f00;
+  --color-yellow-700: var(--fm-color-yellow-700);
+  --fm-color-yellow-800: #f08c00;
+  --color-yellow-800: var(--fm-color-yellow-800);
+  --fm-color-yellow-900: #e67700;
+  --color-yellow-900: var(--fm-color-yellow-900);
+
+  /* Spacing */
+  --fm-spacing-none: 0px;
+  --spacing-none: var(--fm-spacing-none);
+  --fm-spacing-spacing: 0;
+  --spacing-spacing: var(--fm-spacing-spacing);
+  --fm-spacing-nudge: 1px;
+  --spacing-nudge: var(--fm-spacing-nudge);
+  --fm-spacing-xs3: 2px;
+  --spacing-xs3: var(--fm-spacing-xs3);
+  --fm-spacing-xs2: 4px;
+  --spacing-xs2: var(--fm-spacing-xs2);
+  --fm-spacing-xs: 8px;
+  --spacing-xs: var(--fm-spacing-xs);
+  --fm-spacing-sm: 12px;
+  --spacing-sm: var(--fm-spacing-sm);
+  --fm-spacing-md: 16px;
+  --spacing-md: var(--fm-spacing-md);
+  --fm-spacing-lg: 24px;
+  --spacing-lg: var(--fm-spacing-lg);
+  --fm-spacing-xl: 32px;
+  --spacing-xl: var(--fm-spacing-xl);
+  --fm-spacing-xl2: 40px;
+  --spacing-xl2: var(--fm-spacing-xl2);
+  --fm-spacing-xl3: 48px;
+  --spacing-xl3: var(--fm-spacing-xl3);
+  --fm-spacing-xl4: 64px;
+  --spacing-xl4: var(--fm-spacing-xl4);
+
+  /* Size */
+  --fm-size-xs3: 8px;
+  --size-xs3: var(--fm-size-xs3);
+  --fm-size-xs2: 16px;
+  --size-xs2: var(--fm-size-xs2);
+  --fm-size-xs: 20px;
+  --size-xs: var(--fm-size-xs);
+  --fm-size-sm: 24px;
+  --size-sm: var(--fm-size-sm);
+  --fm-size-md: 32px;
+  --size-md: var(--fm-size-md);
+  --fm-size-lg: 40px;
+  --size-lg: var(--fm-size-lg);
+  --fm-size-xl: 48px;
+  --size-xl: var(--fm-size-xl);
+  --fm-size-xl2: 64px;
+  --size-xl2: var(--fm-size-xl2);
+  --fm-size-xl3: 80px;
+  --size-xl3: var(--fm-size-xl3);
+  --fm-size-xl4: 96px;
+  --size-xl4: var(--fm-size-xl4);
+
+  /* Radius */
+  --fm-radius-none: 0px;
+  --radius-none: var(--fm-radius-none);
+  --fm-radius-xs3: 2px;
+  --radius-xs3: var(--fm-radius-xs3);
+  --fm-radius-xs2: 4px;
+  --radius-xs2: var(--fm-radius-xs2);
+  --fm-radius-xs: 8px;
+  --radius-xs: var(--fm-radius-xs);
+  --fm-radius-sm: 12px;
+  --radius-sm: var(--fm-radius-sm);
+  --fm-radius-md: 16px;
+  --radius-md: var(--fm-radius-md);
+  --fm-radius-lg: 24px;
+  --radius-lg: var(--fm-radius-lg);
+  --fm-radius-fmx: 26.600000381469727px;
+  --radius-fmx: var(--fm-radius-fmx);
+  --fm-radius-xl: 32px;
+  --radius-xl: var(--fm-radius-xl);
+  --fm-radius-xl2: 40px;
+  --radius-xl2: var(--fm-radius-xl2);
+  --fm-radius-xl3: 48px;
+  --radius-xl3: var(--fm-radius-xl3);
+  --fm-radius-xl4: 64px;
+  --radius-xl4: var(--fm-radius-xl4);
+  --fm-radius-round: 9001px;
+  --radius-round: var(--fm-radius-round);
+
+  /* Stroke */
+  --fm-stroke-none: 0px;
+  --stroke-none: var(--fm-stroke-none);
+  --fm-stroke-xs: 1px;
+  --stroke-xs: var(--fm-stroke-xs);
+  --fm-stroke-sm: 2px;
+  --stroke-sm: var(--fm-stroke-sm);
+  --fm-stroke-md: 4px;
+  --stroke-md: var(--fm-stroke-md);
+  --fm-stroke-lg: 8px;
+  --stroke-lg: var(--fm-stroke-lg);
+  --fm-stroke-xl: 16px;
+  --stroke-xl: var(--fm-stroke-xl);
+
+  /* Button height */
+  --fm-button-height-sm: 40px;
+  --button-height-sm: var(--fm-button-height-sm);
+  --fm-button-height-md: 48px;
+  --button-height-md: var(--fm-button-height-md);
+  --fm-button-height-lg: 60px;
+  --button-height-lg: var(--fm-button-height-lg);
+  --fm-button-height-xl: 80px;
+  --button-height-xl: var(--fm-button-height-xl);
+
+  /* Button width */
+  --fm-button-width-min: 240px;
+  --button-width-min: var(--fm-button-width-min);
+  --fm-button-width-auto: auto;
+  --button-width-auto: var(--fm-button-width-auto);
+  --fm-button-width-fill: fill;
+  --button-width-fill: var(--fm-button-width-fill);
+
+  /* Color */
+  --fm-color-content-brand-default: var(--fm-color-blue-600);
+  --color-content-brand-default: var(--fm-color-content-brand-default);
+  --fm-color-content-brand-pro: var(--fm-color-grape-500);
+  --color-content-brand-pro: var(--fm-color-content-brand-pro);
+  --fm-color-content-brand-pro-plus: #724899;
+  --color-content-brand-pro-plus: var(--fm-color-content-brand-pro-plus);
+  --fm-color-content-functional-attention: var(--fm-color-yellow-500);
+  --color-content-functional-attention: var(--fm-color-content-functional-attention);
+  --fm-color-content-functional-danger: var(--fm-color-red-700);
+  --color-content-functional-danger: var(--fm-color-content-functional-danger);
+  --fm-color-content-functional-info: var(--fm-color-indigo-800);
+  --color-content-functional-info: var(--fm-color-content-functional-info);
+  --fm-color-content-functional-success: var(--fm-color-green-800);
+  --color-content-functional-success: var(--fm-color-content-functional-success);
+  --fm-color-content-functional-traffic-mega-delay: var(--fm-color-red-900);
+  --color-content-functional-traffic-mega-delay: var(--fm-color-content-functional-traffic-mega-delay);
+  --fm-color-content-functional-warning: var(--fm-color-orange-500);
+  --color-content-functional-warning: var(--fm-color-content-functional-warning);
+  --fm-color-content-neutral-default: var(--fm-color-gray-900);
+  --color-content-neutral-default: var(--fm-color-content-neutral-default);
+  --fm-color-content-neutral-default-alt: var(--fm-color-gray-500);
+  --color-content-neutral-default-alt: var(--fm-color-content-neutral-default-alt);
+  --fm-color-content-neutral-label: #ffffff;
+  --color-content-neutral-label: var(--fm-color-content-neutral-label);
+  --fm-color-content-neutral-label-inverse: var(--fm-color-gray-900);
+  --color-content-neutral-label-inverse: var(--fm-color-content-neutral-label-inverse);
+  --fm-color-content-neutral-weak: var(--fm-color-gray-300);
+  --color-content-neutral-weak: var(--fm-color-content-neutral-weak);
+  --fm-color-feedback-warning-subtle: var(--fm-color-yellow-50);
+  --color-feedback-warning-subtle: var(--fm-color-feedback-warning-subtle);
+  --fm-color-outline-brand-default: var(--fm-color-blue-600);
+  --color-outline-brand-default: var(--fm-color-outline-brand-default);
+  --fm-color-outline-functional-avg-speed-check: var(--fm-color-indigo-900);
+  --color-outline-functional-avg-speed-check: var(--fm-color-outline-functional-avg-speed-check);
+  --fm-color-outline-functional-danger: var(--fm-color-red-700);
+  --color-outline-functional-danger: var(--fm-color-outline-functional-danger);
+  --fm-color-outline-functional-danger-alt: var(--fm-color-red-900);
+  --color-outline-functional-danger-alt: var(--fm-color-outline-functional-danger-alt);
+  --fm-color-outline-functional-info: var(--fm-color-indigo-800);
+  --color-outline-functional-info: var(--fm-color-outline-functional-info);
+  --fm-color-outline-functional-success: var(--fm-color-green-800);
+  --color-outline-functional-success: var(--fm-color-outline-functional-success);
+  --fm-color-outline-functional-warning: var(--fm-color-orange-500);
+  --color-outline-functional-warning: var(--fm-color-outline-functional-warning);
+  --fm-color-outline-functional-warning-alt: var(--fm-color-orange-800);
+  --color-outline-functional-warning-alt: var(--fm-color-outline-functional-warning-alt);
+  --fm-color-outline-neutral-default: rgba(0, 0, 0, 0.1);
+  --color-outline-neutral-default: var(--fm-color-outline-neutral-default);
+  --fm-color-outline-neutral-default-alt: rgba(0, 0, 0, 0.2);
+  --color-outline-neutral-default-alt: var(--fm-color-outline-neutral-default-alt);
+  --fm-color-outline-neutral-inverted: rgba(255, 255, 255, 0.1);
+  --color-outline-neutral-inverted: var(--fm-color-outline-neutral-inverted);
+  --fm-color-outline-neutral-inverted-strong: #ffffff;
+  --color-outline-neutral-inverted-strong: var(--fm-color-outline-neutral-inverted-strong);
+  --fm-color-outline-neutral-pin: rgba(0, 0, 0, 0.1);
+  --color-outline-neutral-pin: var(--fm-color-outline-neutral-pin);
+  --fm-color-outline-neutral-stronger: rgba(0, 0, 0, 0.3);
+  --color-outline-neutral-stronger: var(--fm-color-outline-neutral-stronger);
+  --fm-color-outline-neutral-strongest: var(--fm-color-gray-900);
+  --color-outline-neutral-strongest: var(--fm-color-outline-neutral-strongest);
+  --fm-color-special-feature-ambulance: var(--fm-color-yellow-300);
+  --color-special-feature-ambulance: var(--fm-color-special-feature-ambulance);
+  --fm-color-special-feature-avg-speed-check: var(--fm-color-indigo-600);
+  --color-special-feature-avg-speed-check: var(--fm-color-special-feature-avg-speed-check);
+  --fm-color-special-feature-default: #ffffff;
+  --color-special-feature-default: var(--fm-color-special-feature-default);
+  --fm-color-special-feature-emergency: var(--fm-color-lime-300);
+  --color-special-feature-emergency: var(--fm-color-special-feature-emergency);
+  --fm-color-special-feature-firetruck: var(--fm-color-red-900);
+  --color-special-feature-firetruck: var(--fm-color-special-feature-firetruck);
+  --fm-color-special-feature-hotspot: var(--fm-color-grape-500);
+  --color-special-feature-hotspot: var(--fm-color-special-feature-hotspot);
+  --fm-color-special-feature-parking: var(--fm-color-blue-800);
+  --color-special-feature-parking: var(--fm-color-special-feature-parking);
+  --fm-color-special-feature-parking-alt: var(--fm-color-blue-200);
+  --color-special-feature-parking-alt: var(--fm-color-special-feature-parking-alt);
+  --fm-color-special-feature-poi: var(--fm-color-gray-200);
+  --color-special-feature-poi: var(--fm-color-special-feature-poi);
+  --fm-color-special-feature-police: var(--fm-color-blue-900);
+  --color-special-feature-police: var(--fm-color-special-feature-police);
+  --fm-color-special-feature-signal: var(--fm-color-lime-500);
+  --color-special-feature-signal: var(--fm-color-special-feature-signal);
+  --fm-color-special-feature-speed-cam: #1eb3ff;
+  --color-special-feature-speed-cam: var(--fm-color-special-feature-speed-cam);
+  --fm-color-special-feature-speed-trap: var(--fm-color-blue-600);
+  --color-special-feature-speed-trap: var(--fm-color-special-feature-speed-trap);
+  --fm-color-special-feature-tol: var(--fm-color-gray-600);
+  --color-special-feature-tol: var(--fm-color-special-feature-tol);
+  --fm-color-special-feature-traffic-cam: var(--fm-color-gray-200);
+  --color-special-feature-traffic-cam: var(--fm-color-special-feature-traffic-cam);
+  --fm-color-special-feature-wrong-way-driver: #cdf418;
+  --color-special-feature-wrong-way-driver: var(--fm-color-special-feature-wrong-way-driver);
+  --fm-color-special-gradient-gerrit-end: var(--fm-color-lime-700);
+  --color-special-gradient-gerrit-end: var(--fm-color-special-gradient-gerrit-end);
+  --fm-color-special-gradient-gerrit-start: var(--fm-color-lime-400);
+  --color-special-gradient-gerrit-start: var(--fm-color-special-gradient-gerrit-start);
+  --fm-color-special-gradient-pro-end: var(--fm-color-violet-700);
+  --color-special-gradient-pro-end: var(--fm-color-special-gradient-pro-end);
+  --fm-color-special-gradient-pro-start: var(--fm-color-grape-700);
+  --color-special-gradient-pro-start: var(--fm-color-special-gradient-pro-start);
+  --fm-color-special-road-avg-speed-check: var(--fm-color-indigo-600);
+  --color-special-road-avg-speed-check: var(--fm-color-special-road-avg-speed-check);
+  --fm-color-special-road-avg-speed-check-alt: var(--fm-color-indigo-900);
+  --color-special-road-avg-speed-check-alt: var(--fm-color-special-road-avg-speed-check-alt);
+  --fm-color-special-road-danger: var(--fm-color-red-700);
+  --color-special-road-danger: var(--fm-color-special-road-danger);
+  --fm-color-special-road-danger-alt: var(--fm-color-red-900);
+  --color-special-road-danger-alt: var(--fm-color-special-road-danger-alt);
+  --fm-color-special-road-default: var(--fm-color-gray-600);
+  --color-special-road-default: var(--fm-color-special-road-default);
+  --fm-color-special-road-route: #1eb3ff;
+  --color-special-road-route: var(--fm-color-special-road-route);
+  --fm-color-special-road-route-alt: var(--fm-color-blue-600);
+  --color-special-road-route-alt: var(--fm-color-special-road-route-alt);
+  --fm-color-special-road-route-strong: var(--fm-color-gray-500);
+  --color-special-road-route-strong: var(--fm-color-special-road-route-strong);
+  --fm-color-special-road-route-strong-alt: var(--fm-color-gray-600);
+  --color-special-road-route-strong-alt: var(--fm-color-special-road-route-strong-alt);
+  --fm-color-special-road-route-weak: var(--fm-color-gray-400);
+  --color-special-road-route-weak: var(--fm-color-special-road-route-weak);
+  --fm-color-special-road-route-weak-alt: var(--fm-color-gray-500);
+  --color-special-road-route-weak-alt: var(--fm-color-special-road-route-weak-alt);
+  --fm-color-special-road-warning: var(--fm-color-orange-500);
+  --color-special-road-warning: var(--fm-color-special-road-warning);
+  --fm-color-special-road-warning-alt: var(--fm-color-orange-800);
+  --color-special-road-warning-alt: var(--fm-color-special-road-warning-alt);
+  --fm-color-special-shadow-default: rgba(0, 0, 0, 0.15);
+  --color-special-shadow-default: var(--fm-color-special-shadow-default);
+  --fm-color-surface-brand-default: var(--fm-color-blue-600);
+  --color-surface-brand-default: var(--fm-color-surface-brand-default);
+  --fm-color-surface-brand-default-alt: var(--fm-color-blue-100);
+  --color-surface-brand-default-alt: var(--fm-color-surface-brand-default-alt);
+  --fm-color-surface-brand-default-alt-hover: var(--fm-color-blue-300);
+  --color-surface-brand-default-alt-hover: var(--fm-color-surface-brand-default-alt-hover);
+  --fm-color-surface-brand-default-hover: var(--fm-color-blue-800);
+  --color-surface-brand-default-hover: var(--fm-color-surface-brand-default-hover);
+  --fm-color-surface-brand-pro: var(--fm-color-grape-500);
+  --color-surface-brand-pro: var(--fm-color-surface-brand-pro);
+  --fm-color-surface-brand-pro-alt: var(--fm-color-grape-100);
+  --color-surface-brand-pro-alt: var(--fm-color-surface-brand-pro-alt);
+  --fm-color-surface-brand-pro-plus: #724899;
+  --color-surface-brand-pro-plus: var(--fm-color-surface-brand-pro-plus);
+  --fm-color-surface-functional-attention: var(--fm-color-yellow-500);
+  --color-surface-functional-attention: var(--fm-color-surface-functional-attention);
+  --fm-color-surface-functional-attention-alt: var(--fm-color-yellow-50);
+  --color-surface-functional-attention-alt: var(--fm-color-surface-functional-attention-alt);
+  --fm-color-surface-functional-danger: var(--fm-color-red-700);
+  --color-surface-functional-danger: var(--fm-color-surface-functional-danger);
+  --fm-color-surface-functional-danger-alt: var(--fm-color-red-100);
+  --color-surface-functional-danger-alt: var(--fm-color-surface-functional-danger-alt);
+  --fm-color-surface-functional-danger-alt-hover: var(--fm-color-red-300);
+  --color-surface-functional-danger-alt-hover: var(--fm-color-surface-functional-danger-alt-hover);
+  --fm-color-surface-functional-danger-hover: var(--fm-color-red-900);
+  --color-surface-functional-danger-hover: var(--fm-color-surface-functional-danger-hover);
+  --fm-color-surface-functional-info: var(--fm-color-indigo-600);
+  --color-surface-functional-info: var(--fm-color-surface-functional-info);
+  --fm-color-surface-functional-info-alt: var(--fm-color-indigo-100);
+  --color-surface-functional-info-alt: var(--fm-color-surface-functional-info-alt);
+  --fm-color-surface-functional-success: var(--fm-color-green-800);
+  --color-surface-functional-success: var(--fm-color-surface-functional-success);
+  --fm-color-surface-functional-success-alt: var(--fm-color-green-100);
+  --color-surface-functional-success-alt: var(--fm-color-surface-functional-success-alt);
+  --fm-color-surface-functional-success-hover: var(--fm-color-green-950);
+  --color-surface-functional-success-hover: var(--fm-color-surface-functional-success-hover);
+  --fm-color-surface-functional-warning: var(--fm-color-orange-500);
+  --color-surface-functional-warning: var(--fm-color-surface-functional-warning);
+  --fm-color-surface-functional-warning-alt: var(--fm-color-orange-50);
+  --color-surface-functional-warning-alt: var(--fm-color-surface-functional-warning-alt);
+  --fm-color-surface-functional-warning-alt-hover: var(--fm-color-orange-200);
+  --color-surface-functional-warning-alt-hover: var(--fm-color-surface-functional-warning-alt-hover);
+  --fm-color-surface-neutral-default: var(--fm-color-gray-200);
+  --color-surface-neutral-default: var(--fm-color-surface-neutral-default);
+  --fm-color-surface-neutral-default-higher: var(--fm-color-gray-100);
+  --color-surface-neutral-default-higher: var(--fm-color-surface-neutral-default-higher);
+  --fm-color-surface-neutral-default-highest: #ffffff;
+  --color-surface-neutral-default-highest: var(--fm-color-surface-neutral-default-highest);
+  --fm-color-surface-neutral-default-hover: var(--fm-color-gray-300);
+  --color-surface-neutral-default-hover: var(--fm-color-surface-neutral-default-hover);
+  --fm-color-surface-neutral-default-lower: var(--fm-color-gray-700);
+  --color-surface-neutral-default-lower: var(--fm-color-surface-neutral-default-lower);
+  --fm-color-surface-neutral-default-lowest: var(--fm-color-gray-900);
+  --color-surface-neutral-default-lowest: var(--fm-color-surface-neutral-default-lowest);
+  --fm-color-surface-utility-default-higher-opac0: rgba(240, 241, 242, 0);
+  --color-surface-utility-default-higher-opac0: var(--fm-color-surface-utility-default-higher-opac0);
+  --fm-color-surface-utility-default-opac30: rgba(255, 255, 255, 0.3);
+  --color-surface-utility-default-opac30: var(--fm-color-surface-utility-default-opac30);
+  --fm-color-surface-utility-default-opac75: rgba(255, 255, 255, 0.75);
+  --color-surface-utility-default-opac75: var(--fm-color-surface-utility-default-opac75);
+  --fm-color-surface-utility-scrim: rgba(0, 0, 0, 0.66);
+  --color-surface-utility-scrim: var(--fm-color-surface-utility-scrim);
+  --fm-color-surface-utility-scrim-darker: rgba(0, 0, 0, 0.85);
+  --color-surface-utility-scrim-darker: var(--fm-color-surface-utility-scrim-darker);
+  --fm-color-surface-utility-scrim-lighter: rgba(0, 0, 0, 0.1);
+  --color-surface-utility-scrim-lighter: var(--fm-color-surface-utility-scrim-lighter);
+  --fm-color-system-black: #000000;
+  --color-system-black: var(--fm-color-system-black);
+  --fm-color-system-color: false;
+  --color-system-color: var(--fm-color-system-color);
+  --fm-color-system-dark: false;
+  --color-system-dark: var(--fm-color-system-dark);
+  --fm-color-system-show-dark: 0;
+  --color-system-show-dark: var(--fm-color-system-show-dark);
+  --fm-color-system-show-light: 100;
+  --color-system-show-light: var(--fm-color-system-show-light);
+  --fm-color-system-theme: light;
+  --color-system-theme: var(--fm-color-system-theme);
+  --fm-color-system-utility01: var(--fm-color-system-01);
+  --color-system-utility01: var(--fm-color-system-utility01);
+  --fm-color-system-utility02: var(--fm-color-system-2);
+  --color-system-utility02: var(--fm-color-system-utility02);
+  --fm-color-system-utility03: var(--fm-color-system-3);
+  --color-system-utility03: var(--fm-color-system-utility03);
+  --fm-color-system-utility04: var(--fm-color-system-4);
+  --color-system-utility04: var(--fm-color-system-utility04);
+  --fm-color-system-white: #ffffff;
+  --color-system-white: var(--fm-color-system-white);
+
+  /* Blur */
+  --fm-blur-sharpest: 2;
+  --blur-sharpest: var(--fm-blur-sharpest);
+  --fm-blur-sharp: 4;
+  --blur-sharp: var(--fm-blur-sharp);
+  --fm-blur-default: 8;
+  --blur-default: var(--fm-blur-default);
+  --fm-blur-soft: 16;
+  --blur-soft: var(--fm-blur-soft);
+  --fm-blur-softer: 32;
+  --blur-softer: var(--fm-blur-softer);
+
+  /* Timing */
+  --fm-timing-fastest: 0.10000000149011612;
+  --timing-fastest: var(--fm-timing-fastest);
+  --fm-timing-fast: 0.20000000298023224;
+  --timing-fast: var(--fm-timing-fast);
+  --fm-timing-default: 0.4000000059604645;
+  --timing-default: var(--fm-timing-default);
+  --fm-timing-slow: 0.6000000238418579;
+  --timing-slow: var(--fm-timing-slow);
+  --fm-timing-slowest: 1;
+  --timing-slowest: var(--fm-timing-slowest);
+
+  /* Opacity */
+  --fm-opacity-faded: 0.1;
+  --opacity-faded: var(--fm-opacity-faded);
+  --fm-opacity-disabled: 0.2;
+  --opacity-disabled: var(--fm-opacity-disabled);
+  --fm-opacity-default: 0.66;
+  --opacity-default: var(--fm-opacity-default);
+  --fm-opacity-pressed: 0.8;
+  --opacity-pressed: var(--fm-opacity-pressed);
+  --fm-opacity-solid: 0.9;
+  --opacity-solid: var(--fm-opacity-solid);
+
+  /* Shadow */
+  --fm-shadow-lower: 4;
+  --shadow-lower: var(--fm-shadow-lower);
+  --fm-shadow-default: 8;
+  --shadow-default: var(--fm-shadow-default);
+  --fm-shadow-higher: 10;
+  --shadow-higher: var(--fm-shadow-higher);
+
+  /* Effects */
+  --fm-effects-effects: 0;
+  --effects-effects: var(--fm-effects-effects);
+
+  /* Typography */
+  --fm-font-letter-spacing-xs: -2;
+  --font-letter-spacing-xs: var(--fm-font-letter-spacing-xs);
+  --fm-font-letter-spacing-sm: -1;
+  --font-letter-spacing-sm: var(--fm-font-letter-spacing-sm);
+  --fm-font-letter-spacing-md: 0;
+  --font-letter-spacing-md: var(--fm-font-letter-spacing-md);
+  --fm-font-letter-spacing-lg: 1;
+  --font-letter-spacing-lg: var(--fm-font-letter-spacing-lg);
+  --fm-font-letter-spacing-xl: 2;
+  --font-letter-spacing-xl: var(--fm-font-letter-spacing-xl);
+  --fm-font-letter-spacing-xl2: 3;
+  --font-letter-spacing-xl2: var(--fm-font-letter-spacing-xl2);
+  --fm-font-letter-spacing-xl3: 4;
+  --font-letter-spacing-xl3: var(--fm-font-letter-spacing-xl3);
+  --fm-text-default: 8;
+  --text-default: var(--fm-text-default);
+  --fm-text-xs: 12px;
+  --text-xs: var(--fm-text-xs);
+  --fm-text-sm: 14px;
+  --text-sm: var(--fm-text-sm);
+  --fm-text-md: 16px;
+  --text-md: var(--fm-text-md);
+  --fm-text-lg: 18px;
+  --text-lg: var(--fm-text-lg);
+  --fm-text-xl: 20px;
+  --text-xl: var(--fm-text-xl);
+  --fm-text-xl2: 24px;
+  --text-xl2: var(--fm-text-xl2);
+  --fm-text-xl3: 32px;
+  --text-xl3: var(--fm-text-xl3);
+  --fm-text-xl4: 40px;
+  --text-xl4: var(--fm-text-xl4);
+  --fm-text-xl5: 72px;
+  --text-xl5: var(--fm-text-xl5);
+  --fm-leading-xs: 80%;
+  --leading-xs: var(--fm-leading-xs);
+  --fm-text-xl6: 80px;
+  --text-xl6: var(--fm-text-xl6);
+  --fm-leading-sm: 90%;
+  --leading-sm: var(--fm-leading-sm);
+  --fm-leading-md: 100%;
+  --leading-md: var(--fm-leading-md);
+  --fm-text-xl7: 104px;
+  --text-xl7: var(--fm-text-xl7);
+  --fm-leading-lg: 110%;
+  --leading-lg: var(--fm-leading-lg);
+  --fm-leading-xl: 120%;
+  --leading-xl: var(--fm-leading-xl);
+  --fm-leading-xl2: 130%;
+  --leading-xl2: var(--fm-leading-xl2);
+  --fm-leading-xl3: 150%;
+  --leading-xl3: var(--fm-leading-xl3);
+  --fm-font-body: Inter;
+  --font-body: var(--fm-font-body);
+  --fm-font-display: Inter;
+  --font-display: var(--fm-font-display);
+  --fm-font-headline: Inter;
+  --font-headline: var(--fm-font-headline);
+  --fm-font-label: Inter;
+  --font-label: var(--fm-font-label);
+  --fm-font-title: Inter;
+  --font-title: var(--fm-font-title);
+  --fm-font-weight-black: 900;
+  --font-weight-black: var(--fm-font-weight-black);
+  --fm-font-weight-bold: 700;
+  --font-weight-bold: var(--fm-font-weight-bold);
+  --fm-font-weight-extra-bold: 800;
+  --font-weight-extra-bold: var(--fm-font-weight-extra-bold);
+  --fm-font-weight-extra-bold-italic: 800;
+  --font-weight-extra-bold-italic: var(--fm-font-weight-extra-bold-italic);
+  --fm-font-weight-medium: 500;
+  --font-weight-medium: var(--fm-font-weight-medium);
+  --fm-font-weight-regular: 400;
+  --font-weight-regular: var(--fm-font-weight-regular);
+  --fm-font-weight-semi-bold: 600;
+  --font-weight-semi-bold: var(--fm-font-weight-semi-bold);
+}
+:root.dark {
+  /* Color */
+  --fm-color-content-brand-default: var(--fm-color-blue-500);
+  --fm-color-content-functional-danger: var(--fm-color-red-600);
+  --fm-color-content-functional-info: var(--fm-color-indigo-500);
+  --fm-color-content-functional-success: var(--fm-color-green-700);
+  --fm-color-content-functional-traffic-mega-delay: #ffffff;
+  --fm-color-content-functional-warning: var(--fm-color-orange-400);
+  --fm-color-content-neutral-default: var(--fm-color-gray-100);
+  --fm-color-content-neutral-default-alt: var(--fm-color-gray-400);
+  --fm-color-content-neutral-label: var(--fm-color-gray-100);
+  --fm-color-content-neutral-label-inverse: #000000;
+  --fm-color-content-neutral-weak: var(--fm-color-gray-500);
+  --fm-color-outline-brand-default: var(--fm-color-blue-500);
+  --fm-color-outline-functional-danger: var(--fm-color-red-600);
+  --fm-color-outline-functional-info: var(--fm-color-indigo-500);
+  --fm-color-outline-functional-success: var(--fm-color-green-700);
+  --fm-color-outline-functional-warning: var(--fm-color-orange-400);
+  --fm-color-outline-neutral-default: rgba(255, 255, 255, 0.1);
+  --fm-color-outline-neutral-default-alt: rgba(255, 255, 255, 0.2);
+  --fm-color-outline-neutral-inverted: rgba(0, 0, 0, 0.1);
+  --fm-color-outline-neutral-inverted-strong: #000000;
+  --fm-color-outline-neutral-stronger: rgba(255, 255, 255, 0.3);
+  --fm-color-outline-neutral-strongest: var(--fm-color-gray-100);
+  --fm-color-special-feature-avg-speed-check: var(--fm-color-indigo-500);
+  --fm-color-special-feature-default: var(--fm-color-gray-600);
+  --fm-color-special-feature-parking-alt: var(--fm-color-blue-950);
+  --fm-color-special-feature-poi: var(--fm-color-gray-600);
+  --fm-color-special-feature-tol: var(--fm-color-gray-500);
+  --fm-color-special-feature-traffic-cam: var(--fm-color-gray-600);
+  --fm-color-special-road-avg-speed-check: var(--fm-color-indigo-500);
+  --fm-color-special-road-danger: var(--fm-color-red-600);
+  --fm-color-special-road-default: var(--fm-color-gray-500);
+  --fm-color-special-road-route-alt: var(--fm-color-blue-500);
+  --fm-color-special-road-route-strong: var(--fm-color-gray-400);
+  --fm-color-special-road-route-strong-alt: var(--fm-color-gray-500);
+  --fm-color-special-road-route-weak: var(--fm-color-gray-500);
+  --fm-color-special-road-route-weak-alt: var(--fm-color-gray-600);
+  --fm-color-special-road-warning: var(--fm-color-orange-400);
+  --fm-color-special-shadow-default: rgba(0, 0, 0, 0.3);
+  --fm-color-surface-brand-default: var(--fm-color-blue-500);
+  --fm-color-surface-brand-default-alt: var(--fm-color-blue-950);
+  --fm-color-surface-brand-default-alt-hover: var(--fm-color-blue-800);
+  --fm-color-surface-brand-default-hover: var(--fm-color-blue-700);
+  --fm-color-surface-brand-pro-alt: var(--fm-color-grape-900);
+  --fm-color-surface-functional-danger: var(--fm-color-red-600);
+  --fm-color-surface-functional-danger-alt: var(--fm-color-red-950);
+  --fm-color-surface-functional-danger-alt-hover: var(--fm-color-red-900);
+  --fm-color-surface-functional-info: var(--fm-color-indigo-500);
+  --fm-color-surface-functional-info-alt: var(--fm-color-indigo-900);
+  --fm-color-surface-functional-success: var(--fm-color-green-700);
+  --fm-color-surface-functional-success-alt: var(--fm-color-green-950);
+  --fm-color-surface-functional-success-hover: var(--fm-color-green-900);
+  --fm-color-surface-functional-warning: var(--fm-color-orange-400);
+  --fm-color-surface-functional-warning-alt: var(--fm-color-orange-950);
+  --fm-color-surface-functional-warning-alt-hover: var(--fm-color-orange-800);
+  --fm-color-surface-neutral-default: var(--fm-color-gray-900);
+  --fm-color-surface-neutral-default-higher: var(--fm-color-gray-800);
+  --fm-color-surface-neutral-default-highest: var(--fm-color-gray-700);
+  --fm-color-surface-neutral-default-hover: var(--fm-color-gray-500);
+  --fm-color-surface-neutral-default-lower: var(--fm-color-gray-950);
+  --fm-color-surface-neutral-default-lowest: #000000;
+  --fm-color-surface-utility-default-higher-opac0: rgba(29, 31, 32, 0);
+  --fm-color-surface-utility-default-opac30: rgba(0, 0, 0, 0.3);
+  --fm-color-surface-utility-default-opac75: rgba(0, 0, 0, 0.75);
+  --fm-color-surface-utility-scrim-darker: rgba(0, 0, 0, 0.66);
+  --fm-color-system-color: true;
+  --fm-color-system-dark: true;
+  --fm-color-system-show-dark: 100;
+  --fm-color-system-show-light: 0;
+  --fm-color-system-theme: dark;
+}
+
+@layer utilities {
+  .type-display-lg {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-black);
+    font-size: var(--text-xl7);
+    line-height: var(--leading-lg);
+  }
+  .type-display,
+  .type-display-md {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-extra-bold);
+    font-size: var(--text-xl6);
+    line-height: var(--leading-xl);
+  }
+  .type-display-sm {
+    font-family: var(--font-display);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--text-xl5);
+    line-height: normal;
+  }
+  .type-headline-lg {
+    font-family: var(--font-headline);
+    font-weight: var(--font-weight-black);
+    font-size: var(--text-xl4);
+    line-height: var(--leading-xl);
+  }
+  .type-headline,
+  .type-headline-md {
+    font-family: var(--font-headline);
+    font-weight: var(--font-weight-extra-bold);
+    font-size: var(--text-xl3);
+    line-height: var(--leading-xl2);
+  }
+  .type-title-lg {
+    font-family: var(--font-title);
+    font-weight: var(--font-weight-semi-bold);
+    font-size: var(--text-xl2);
+    line-height: var(--leading-xl2);
+  }
+  .type-title,
+  .type-title-md {
+    font-family: var(--font-title);
+    font-weight: var(--font-weight-semi-bold);
+    font-size: var(--text-xl);
+    line-height: var(--leading-xl2);
+  }
+  .type-body-lg {
+    font-family: var(--font-body);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-xl3);
+  }
+  .type-body,
+  .type-body-md {
+    font-family: var(--font-body);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-xl3);
+  }
+  .type-body-sm {
+    font-family: var(--font-body);
+    font-weight: var(--font-weight-regular);
+    font-size: var(--text-sm);
+    line-height: var(--leading-xl3);
+  }
+  body .type-special {
+    font-weight: var(--font-weight-extra-bold);
+    font-style: italic;
+  }
+  body .type-prominent {
+    font-weight: var(--font-weight-bold);
+  }
+}