@maggioli-design-system/styles 15.11.1 → 16.0.1

package/dist/css/typography.css

@@ -1,165 +1,221 @@
+/*
+@magma-design-system/design-tokens v14.1.0
+Generated by Style Dictionary
+Do not edit directly
+Generated at Mon, 08 Jun 2026 14:52:21 GMT
+*/
 
-.typography-title-h1 {
-    min-height: 3rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 3rem;
-    line-height: 3rem;
-    letter-spacing: -0.025em;
-    font-weight: 900;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-h2 {
-    min-height: 2.5rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    letter-spacing: -0.025em;
-    font-weight: 900;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-h3 {
-    min-height: 2.25rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-    letter-spacing: -0.025em;
-    font-weight: 900;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-h4 {
-    min-height: 2rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-h5 {
-    min-height: 1.75rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-h6 {
-    min-height: 1.5rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-title-action {
-    min-height: 1.5rem;
-    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    font-weight: 500;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-paragraph {
-    min-height: 2rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1.25rem;
-    line-height: 2rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-detail {
-    min-height: 1.5rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-caption {
-    min-height: 1.25rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-label {
-    min-height: 1rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-option {
-    min-height: 0.625rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.625rem;
-    line-height: 0.625rem;
-    letter-spacing: -0.025em;
-    font-weight: 700;
-    text-transform: uppercase;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-info-tip {
-    min-height: 1rem;
-    font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-read-paragraph {
-    min-height: 2rem;
-    font-family: 'Merriweather', Times, 'Times New Roman', serif;
-    font-size: 1.25rem;
-    line-height: 2rem;
-    font-weight: 300;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-read-detail {
-    min-height: 1.5rem;
-    font-family: 'Merriweather', Times, 'Times New Roman', serif;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    font-weight: 300;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-read-caption {
-    min-height: 1.25rem;
-    font-family: 'Merriweather', Times, 'Times New Roman', serif;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-code-snippet {
-    min-height: 1.5rem;
-    font-family: 'Roboto Mono', 'Courier New', monospace;
-    font-size: 1rem;
-    line-height: 1.5rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
-}
-.typography-code-hack {
-    min-height: 1.25rem;
-    font-family: 'Roboto Mono', 'Courier New', monospace;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale
+:root {
+  --font-title:  Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-info:  Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-read:  'Merriweather', Times, 'Times New Roman', serif;
+  --font-code:  'Roboto Mono', 'Courier New', monospace;
+
+  --text-size-title-h1: 3rem;
+  --text-size-title-h1--font-weight: 900;
+  --text-size-title-h1--letter-spacing: -0.025em;
+  --text-size-title-h1--line-height: 3rem;
+  --text-size-title-h2: 2.25rem;
+  --text-size-title-h2--font-weight: 900;
+  --text-size-title-h2--letter-spacing: -0.025em;
+  --text-size-title-h2--line-height: 2.5rem;
+  --text-size-title-h3: 1.875rem;
+  --text-size-title-h3--font-weight: 900;
+  --text-size-title-h3--letter-spacing: -0.025em;
+  --text-size-title-h3--line-height: 2.25rem;
+  --text-size-title-h4: 1.5rem;
+  --text-size-title-h4--font-weight: 900;
+  --text-size-title-h4--letter-spacing: -0.025em;
+  --text-size-title-h4--line-height: 2rem;
+  --text-size-title-h5: 1.25rem;
+  --text-size-title-h5--font-weight: 900;
+  --text-size-title-h5--letter-spacing: -0.025em;
+  --text-size-title-h5--line-height: 1.75rem;
+  --text-size-title-h6: 1rem;
+  --text-size-title-h6--font-weight: 700;
+  --text-size-title-h6--letter-spacing: -0.025em;
+  --text-size-title-h6--line-height: 1.5rem;
+  --text-size-title-action: 0.875rem;
+  --text-size-title-action--font-weight: 500;
+  --text-size-title-action--line-height: 1.5rem;
+  --text-size-info-paragraph: 1.25rem;
+  --text-size-info-paragraph--font-weight: 400;
+  --text-size-info-paragraph--line-height: 2rem;
+  --text-size-info-detail: 1rem;
+  --text-size-info-detail--font-weight: 400;
+  --text-size-info-detail--line-height: 1.5rem;
+  --text-size-info-caption: 0.875rem;
+  --text-size-info-caption--font-weight: 400;
+  --text-size-info-caption--line-height: 1.25rem;
+  --text-size-info-label: 0.75rem;
+  --text-size-info-label--font-weight: 700;
+  --text-size-info-label--line-height: 1rem;
+  --text-size-info-option: 0.625rem;
+  --text-size-info-option--font-weight: 700;
+  --text-size-info-option--letter-spacing: -0.025em;
+  --text-size-info-option--line-height: 0.625rem;
+  --text-size-info-tip: 0.75rem;
+  --text-size-info-tip--font-weight: 400;
+  --text-size-info-tip--line-height: 1rem;
+  --text-size-read-paragraph: 1.25rem;
+  --text-size-read-paragraph--font-weight: 300;
+  --text-size-read-paragraph--line-height: 2rem;
+  --text-size-read-detail: 1rem;
+  --text-size-read-detail--font-weight: 300;
+  --text-size-read-detail--line-height: 1.5rem;
+  --text-size-read-caption: 0.875rem;
+  --text-size-read-caption--font-weight: 400;
+  --text-size-read-caption--line-height: 1.25rem;
+  --text-size-code-snippet: 1rem;
+  --text-size-code-snippet--font-weight: 400;
+  --text-size-code-snippet--line-height: 1.5rem;
+  --text-size-code-hack: 0.875rem;
+  --text-size-code-hack--font-weight: 400;
+  --text-size-code-hack--line-height: 1.25rem;
+
+  --leading-2xs: 0.625rem;
+  --leading-xs: 1rem;
+  --leading-sm: 1.25rem;
+  --leading-md: 1.5rem;
+  --leading-lg: 1.75rem;
+  --leading-xl: 2rem;
+  --leading-2xl: 2.25rem;
+  --leading-3xl: 2.5rem;
+  --leading-4xl: 3rem;
+
+  --spacing: 0.0025rem;
+  --spacing-none: 0px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 64px;
+  --spacing-4xl: 96px;
+  --spacing-phrase: 50ch;
+  --spacing-prose: 65ch;
+  --spacing-text: 75ch;
+  --spacing-title: 30ch;
+
+  --container-4xs: 128px;
+  --container-3xs: 192px;
+  --container-2xs: 240px;
+  --container-xs: 320px;
+  --container-sm: 384px;
+  --container-md: 448px;
+  --container-lg: 512px;
+  --container-xl: 568px;
+  --container-2xl: 640px;
+  --container-3xl: 768px;
+  --container-4xl: 960px;
+  --container-5xl: 1024px;
+  --container-6xl: 1152px;
+  --container-7xl: 1280px;
+
+  --breakpoint-mobile: 480px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-wide: 1280px;
+  --breakpoint-large: 1440px;
+  --breakpoint-xlarge: 1600px;
+  --breakpoint-tv: 1920px;
+
+  --aspect-cover: 5/3;
+  --aspect-picture: 4/3;
+  --aspect-landscape: 4/2;
+  --aspect-panorama: 4/1;
+  --aspect-square: 1/1;
+  --aspect-a4: 1/1.4;
+  --aspect-book: 1/1.4;
+  --aspect-video: 16/9;
+
+  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
+  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
+
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  --border-none: 0;
+  --border-xs: 1px;
+  --border-sm: 2px;
+  --border-md: 3px;
+  --border-lg: 4px;
+  --border-xl: 5px;
+
+  --radius-none: 0px;
+  --radius-3xs: 4px;
+  --radius-2xs: 6px;
+  --radius-xs: 8px;
+  --radius-sm: 10px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+  --radius-2xl: 24px;
+  --radius-3xl: 32px;
+  --radius-4xl: 48px;
+  --radius-5xl: 64px;
+  --radius-full: 1000px;
+
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-xs-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-sm-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-md-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-lg-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-2xl-sharp: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inset-sm: inset 0 2px 4px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.01);
+  --shadow-inset-md: inset 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.02);
+  --shadow-inset-lg: inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
+  --shadow-inset-xl: inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04);
+  --shadow-glow-near-strong: rgb(0 0 0 / 0.2) 0px 12px 28px 0px, rgb(0 0 0 / 0.1) 0px 2px 4px 0px;
+  --shadow-glow-distant-weak: rgb(0 0 0 / 0.2) 0px 60px 40px -7px;
+  --shadow-glow-distant-strong: rgb(0 0 0 / 0.25) 0px 50px 100px -20px, rgb(0 0 0 / 0.3) 0px 30px 60px -30px;
+  --shadow-box-md: rgb(0 0 0 / 0.06) 0px 0px 0px 1px, rgb(0 0 0 / 0.03) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.04) 0px 2px 2px -1px, rgb(0 0 0 / 0.04) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.03) 0px 5px 5px -2.5px, rgb(0 0 0 / 0.03) 0px 10px 10px -5px, rgb(0 0 0 / 0.03) 0px 24px 24px -8px;
+  --shadow-box-lg: rgb(0 0 0 / 0.25) 0px 4px 8px -2px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
+  --shadow-box-xl: rgb(0 0 0 / 0.05) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 1px 1px -0.5px, rgb(0 0 0 / 0.1) 0px 3px 3px -1.5px, rgb(0 0 0 / 0.1) 0px 6px 6px -3px, rgb(0 0 0 / 0.1) 0px 12px 12px -6px, rgb(0 0 0 / 0.1) 0px 24px 24px -12px;
+  --shadow-box-solid-weak: rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
+  --shadow-box-solid-strong: rgb(0 0 0 / 0.4) 0px 2px 4px, rgb(0 0 0 / 0.3) 0px 7px 13px -3px, rgb(0 0 0 / 0.35) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset;
+  --shadow-outline-weak: 0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-outline-md: 0 0 0 1px rgb(0 0 0 / 0.1);
+  --shadow-outline-glow-weak: rgb(0 0 0 / 0.05) 0px 6px 24px 0px, rgb(0 0 0 / 0.08) 0px 0px 0px 1px;
+  --shadow-outline-glow-strong: rgb(0 0 0 / 0.16) 0px 10px 36px 0px, rgb(0 0 0 / 0.06) 0px 0px 0px 1px;
+  --shadow-outline-strong: rgb(0 0 0 / 0.25) 0px 1px 1px, rgb(0 0 0 / 0.13) 0px 0px 1px 1px;
+  --shadow-highlight-weak: rgb(0 0 0 / 0.3) 0px 0px 0px 1px;
+  --shadow-highlight-md: rgb(0 0 0 / 0.5) 0px 0px 0px 1px, rgb(0 0 0 / 0.3) 0px 4px 6px -1px;
+  --shadow-highlight-strong: rgb(0 0 0 / 0.4) 0px 0px 0px 2px, rgb(0 0 0 / 0.65) 0px 4px 6px -1px;
 }

package/dist/css/utility-typography.css

@@ -0,0 +1,254 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer utilities {
+  .focus-zoom {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    --tw-ease: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    transition-timing-function: var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+    outline: var(--magma-outline-blur);
+    outline-offset: var(--magma-outline-blur-offset);
+    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
+  }
+  .focus-zoom--focused,
+  .focus-zoom:focus-visible {
+    --magma-outline-blur-offset: var(--magma-outline-focus-offset);
+    --magma-outline-blur: var(--magma-outline-focus);
+  }
+  .focus-zoom--light.focus-zoom--focused,
+  .focus-zoom--light:focus-visible {
+    --magma-outline-blur: 2px solid rgb(var(--tone-neutral));
+  }
+}
+.typography-title-h1 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h1, 3rem);
+  line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h2 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h2, 2.25rem);
+  line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h3 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h3, 1.875rem);
+  line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h4 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h4, 1.5rem);
+  line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h5 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h5, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight, 900));
+  --tw-font-weight: var(--font-weight-black, 900);
+  font-weight: var(--font-weight-black, 900);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-h6 {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-h6, 1rem);
+  line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-action {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-action, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight, 500));
+  --tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-paragraph {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-paragraph, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-detail {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-detail, 1rem);
+  line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-caption {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-caption, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-label {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-label, 0.75rem);
+  line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-option {
+  min-height: auto;
+  text-box: trim-both cap alphabetic;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-option, 0.625rem);
+  line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
+  letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing, -0.025em));
+  font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight, 700));
+  --tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  text-transform: uppercase;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-info-tip {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-info-tip, 0.75rem);
+  line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
+  font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-paragraph {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-paragraph, 1.25rem);
+  line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight, 300));
+  --tw-font-weight: var(--font-weight-light, 300);
+  font-weight: var(--font-weight-light, 300);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-detail {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-detail, 1rem);
+  line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight, 300));
+  --tw-font-weight: var(--font-weight-light, 300);
+  font-weight: var(--font-weight-light, 300);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-read-caption {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
+  font-size: var(--text-size-read-caption, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-code-snippet {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
+  font-size: var(--text-size-code-snippet, 1rem);
+  line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
+  font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-code-hack {
+  min-height: auto;
+  text-box: trim-both text;
+  font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
+  font-size: var(--text-size-code-hack, 0.875rem);
+  line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
+  font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight, 400));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-font-weight: initial;
+    }
+  }
+}