@1doc/1ds-react 0.0.1

package/dist/components/Text/Text.css

@@ -0,0 +1,1213 @@
+/* ===========================================
+   TEXT COMPONENT - Typography
+   =========================================== */
+
+/* Base */
+.umds-text {
+    font-family: var(--umds-semantic-font-family-base);
+    margin: 0;
+    padding: 0;
+}
+
+/* ===========================================
+   VARIANT STYLES (Base - Mobile First)
+   =========================================== */
+
+/* Display */
+.umds-text--display {
+    font-size: var(--umds-primitive-font-size-display);
+    font-weight: var(--umds-primitive-font-weight-bold);
+    line-height: var(--umds-primitive-font-line-height-xs);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-tight);
+}
+
+/* Heading 1 */
+.umds-text--h1 {
+    font-size: var(--umds-primitive-font-size-xxxl);
+    font-weight: var(--umds-primitive-font-weight-bold);
+    line-height: var(--umds-primitive-font-line-height-xs);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-snug);
+}
+
+/* Heading 2 */
+.umds-text--h2 {
+    font-size: var(--umds-primitive-font-size-xxl);
+    font-weight: var(--umds-primitive-font-weight-bold);
+    line-height: var(--umds-primitive-font-line-height-sm);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-snug);
+}
+
+/* Heading 3 */
+.umds-text--h3 {
+    font-size: var(--umds-primitive-font-size-xl);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: var(--umds-primitive-font-line-height-sm);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Heading 4 */
+.umds-text--h4 {
+    font-size: var(--umds-primitive-font-size-lg);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: var(--umds-primitive-font-line-height-sm);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Heading 5 */
+.umds-text--h5 {
+    font-size: var(--umds-primitive-font-size-md);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: var(--umds-primitive-font-line-height-md);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Heading 6 */
+.umds-text--h6 {
+    font-size: var(--umds-primitive-font-size-sm);
+    font-weight: var(--umds-primitive-font-weight-semibold);
+    line-height: var(--umds-primitive-font-line-height-md);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Subtitle 1 */
+.umds-text--subtitle1 {
+    font-size: var(--umds-primitive-font-size-xs);
+    font-weight: var(--umds-primitive-font-weight-medium);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-wide);
+}
+
+/* Subtitle 2 */
+.umds-text--subtitle2 {
+    font-size: var(--umds-primitive-font-size-xxs);
+    font-weight: var(--umds-primitive-font-weight-medium);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-wide);
+}
+
+/* Body 1 */
+.umds-text--body1 {
+    font-size: var(--umds-primitive-font-size-xs);
+    font-weight: var(--umds-primitive-font-weight-regular);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Body 2 */
+.umds-text--body2 {
+    font-size: var(--umds-primitive-font-size-xxs);
+    font-weight: var(--umds-primitive-font-weight-regular);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* Caption */
+.umds-text--caption {
+    font-size: var(--umds-primitive-font-size-xxxs);
+    font-weight: var(--umds-primitive-font-weight-regular);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-wide);
+}
+
+/* Overline */
+.umds-text--overline {
+    font-size: var(--umds-primitive-font-size-xxxs);
+    font-weight: var(--umds-primitive-font-weight-medium);
+    line-height: var(--umds-primitive-font-line-height-lg);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-wider);
+    text-transform: uppercase;
+}
+
+/* Label */
+.umds-text--label {
+    font-size: var(--umds-primitive-font-size-xxs);
+    font-weight: var(--umds-primitive-font-weight-medium);
+    line-height: var(--umds-primitive-font-line-height-md);
+    letter-spacing: var(--umds-primitive-font-letter-spacing-default);
+}
+
+/* ===========================================
+   RESPONSIVE VARIANTS (SM - 576px+)
+   =========================================== */
+@media (min-width: 576px) {
+    .umds-text--sm-display {
+        font-size: var(--umds-primitive-font-size-display);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--sm-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--sm-h2 {
+        font-size: var(--umds-primitive-font-size-xxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--sm-h3 {
+        font-size: var(--umds-primitive-font-size-xl);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--sm-h4 {
+        font-size: var(--umds-primitive-font-size-lg);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--sm-h5 {
+        font-size: var(--umds-primitive-font-size-md);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--sm-h6 {
+        font-size: var(--umds-primitive-font-size-sm);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--sm-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--sm-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--sm-body1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--sm-body2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--sm-caption {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--sm-overline {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+        text-transform: uppercase;
+    }
+
+    .umds-text--sm-label {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    /* Visual overrides for SM */
+    .umds-text--visual-sm-display {
+        font-size: var(--umds-primitive-font-size-display) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-sm-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-sm-h2 {
+        font-size: var(--umds-primitive-font-size-xxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-sm-h3 {
+        font-size: var(--umds-primitive-font-size-xl) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-sm-h4 {
+        font-size: var(--umds-primitive-font-size-lg) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-sm-h5 {
+        font-size: var(--umds-primitive-font-size-md) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-sm-h6 {
+        font-size: var(--umds-primitive-font-size-sm) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-sm-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-sm-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-sm-body1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-sm-body2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-sm-caption {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-sm-overline {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+        text-transform: uppercase !important;
+    }
+
+    .umds-text--visual-sm-label {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+}
+
+/* ===========================================
+   RESPONSIVE VARIANTS (MD - 768px+)
+   =========================================== */
+@media (min-width: 768px) {
+    .umds-text--md-display {
+        font-size: var(--umds-primitive-font-size-display);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--md-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--md-h2 {
+        font-size: var(--umds-primitive-font-size-xxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--md-h3 {
+        font-size: var(--umds-primitive-font-size-xl);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--md-h4 {
+        font-size: var(--umds-primitive-font-size-lg);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--md-h5 {
+        font-size: var(--umds-primitive-font-size-md);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--md-h6 {
+        font-size: var(--umds-primitive-font-size-sm);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--md-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--md-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--md-body1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--md-body2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--md-caption {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--md-overline {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+        text-transform: uppercase;
+    }
+
+    .umds-text--md-label {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    /* Visual overrides for MD */
+    .umds-text--visual-md-display {
+        font-size: var(--umds-primitive-font-size-display) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-md-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-md-h2 {
+        font-size: var(--umds-primitive-font-size-xxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-md-h3 {
+        font-size: var(--umds-primitive-font-size-xl) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-md-h4 {
+        font-size: var(--umds-primitive-font-size-lg) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-md-h5 {
+        font-size: var(--umds-primitive-font-size-md) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-md-h6 {
+        font-size: var(--umds-primitive-font-size-sm) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-md-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-md-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-md-body1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-md-body2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-md-caption {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-md-overline {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+        text-transform: uppercase !important;
+    }
+
+    .umds-text--visual-md-label {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+}
+
+/* ===========================================
+   RESPONSIVE VARIANTS (LG - 992px+)
+   =========================================== */
+@media (min-width: 992px) {
+    .umds-text--lg-display {
+        font-size: var(--umds-primitive-font-size-display);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--lg-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--lg-h2 {
+        font-size: var(--umds-primitive-font-size-xxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--lg-h3 {
+        font-size: var(--umds-primitive-font-size-xl);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--lg-h4 {
+        font-size: var(--umds-primitive-font-size-lg);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--lg-h5 {
+        font-size: var(--umds-primitive-font-size-md);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--lg-h6 {
+        font-size: var(--umds-primitive-font-size-sm);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--lg-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--lg-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--lg-body1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--lg-body2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--lg-caption {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--lg-overline {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+        text-transform: uppercase;
+    }
+
+    .umds-text--lg-label {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    /* Visual overrides for LG */
+    .umds-text--visual-lg-display {
+        font-size: var(--umds-primitive-font-size-display) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-lg-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-lg-h2 {
+        font-size: var(--umds-primitive-font-size-xxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-lg-h3 {
+        font-size: var(--umds-primitive-font-size-xl) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-lg-h4 {
+        font-size: var(--umds-primitive-font-size-lg) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-lg-h5 {
+        font-size: var(--umds-primitive-font-size-md) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-lg-h6 {
+        font-size: var(--umds-primitive-font-size-sm) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-lg-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-lg-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-lg-body1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-lg-body2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-lg-caption {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-lg-overline {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+        text-transform: uppercase !important;
+    }
+
+    .umds-text--visual-lg-label {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+}
+
+/* ===========================================
+   RESPONSIVE VARIANTS (XL - 1200px+)
+   =========================================== */
+@media (min-width: 1200px) {
+    .umds-text--xl-display {
+        font-size: var(--umds-primitive-font-size-display);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--xl-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--xl-h2 {
+        font-size: var(--umds-primitive-font-size-xxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xl-h3 {
+        font-size: var(--umds-primitive-font-size-xl);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xl-h4 {
+        font-size: var(--umds-primitive-font-size-lg);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xl-h5 {
+        font-size: var(--umds-primitive-font-size-md);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--xl-h6 {
+        font-size: var(--umds-primitive-font-size-sm);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--xl-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xl-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xl-body1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xl-body2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xl-caption {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xl-overline {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+        text-transform: uppercase;
+    }
+
+    .umds-text--xl-label {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    /* Visual overrides for XL */
+    .umds-text--visual-xl-display {
+        font-size: var(--umds-primitive-font-size-display) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-xl-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-xl-h2 {
+        font-size: var(--umds-primitive-font-size-xxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xl-h3 {
+        font-size: var(--umds-primitive-font-size-xl) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xl-h4 {
+        font-size: var(--umds-primitive-font-size-lg) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xl-h5 {
+        font-size: var(--umds-primitive-font-size-md) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-xl-h6 {
+        font-size: var(--umds-primitive-font-size-sm) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-xl-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xl-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xl-body1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xl-body2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xl-caption {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xl-overline {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+        text-transform: uppercase !important;
+    }
+
+    .umds-text--visual-xl-label {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+}
+
+/* ===========================================
+   RESPONSIVE VARIANTS (XXL - 1400px+)
+   =========================================== */
+@media (min-width: 1400px) {
+    .umds-text--xxl-display {
+        font-size: var(--umds-primitive-font-size-display);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--xxl-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-xs);
+    }
+
+    .umds-text--xxl-h2 {
+        font-size: var(--umds-primitive-font-size-xxl);
+        font-weight: var(--umds-primitive-font-weight-bold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xxl-h3 {
+        font-size: var(--umds-primitive-font-size-xl);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xxl-h4 {
+        font-size: var(--umds-primitive-font-size-lg);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-sm);
+    }
+
+    .umds-text--xxl-h5 {
+        font-size: var(--umds-primitive-font-size-md);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--xxl-h6 {
+        font-size: var(--umds-primitive-font-size-sm);
+        font-weight: var(--umds-primitive-font-weight-semibold);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    .umds-text--xxl-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xxl-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xxl-body1 {
+        font-size: var(--umds-primitive-font-size-xs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xxl-body2 {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xxl-caption {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-regular);
+        line-height: var(--umds-primitive-font-line-height-lg);
+    }
+
+    .umds-text--xxl-overline {
+        font-size: var(--umds-primitive-font-size-xxxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-lg);
+        text-transform: uppercase;
+    }
+
+    .umds-text--xxl-label {
+        font-size: var(--umds-primitive-font-size-xxs);
+        font-weight: var(--umds-primitive-font-weight-medium);
+        line-height: var(--umds-primitive-font-line-height-md);
+    }
+
+    /* Visual overrides for XXL */
+    .umds-text--visual-xxl-display {
+        font-size: var(--umds-primitive-font-size-display) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-xxl-h1 {
+        font-size: var(--umds-primitive-font-size-xxxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-xs) !important;
+    }
+
+    .umds-text--visual-xxl-h2 {
+        font-size: var(--umds-primitive-font-size-xxl) !important;
+        font-weight: var(--umds-primitive-font-weight-bold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xxl-h3 {
+        font-size: var(--umds-primitive-font-size-xl) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xxl-h4 {
+        font-size: var(--umds-primitive-font-size-lg) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-sm) !important;
+    }
+
+    .umds-text--visual-xxl-h5 {
+        font-size: var(--umds-primitive-font-size-md) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-xxl-h6 {
+        font-size: var(--umds-primitive-font-size-sm) !important;
+        font-weight: var(--umds-primitive-font-weight-semibold) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+
+    .umds-text--visual-xxl-subtitle1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xxl-subtitle2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xxl-body1 {
+        font-size: var(--umds-primitive-font-size-xs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xxl-body2 {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xxl-caption {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-regular) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+    }
+
+    .umds-text--visual-xxl-overline {
+        font-size: var(--umds-primitive-font-size-xxxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-lg) !important;
+        text-transform: uppercase !important;
+    }
+
+    .umds-text--visual-xxl-label {
+        font-size: var(--umds-primitive-font-size-xxs) !important;
+        font-weight: var(--umds-primitive-font-weight-medium) !important;
+        line-height: var(--umds-primitive-font-line-height-md) !important;
+    }
+}
+
+/* ===========================================
+   VISUAL OVERRIDES (Base - applies to all breakpoints)
+   =========================================== */
+.umds-text--visual-display {
+    font-size: var(--umds-primitive-font-size-display) !important;
+    font-weight: var(--umds-primitive-font-weight-bold) !important;
+    line-height: var(--umds-primitive-font-line-height-xs) !important;
+}
+
+.umds-text--visual-h1 {
+    font-size: var(--umds-primitive-font-size-xxxl) !important;
+    font-weight: var(--umds-primitive-font-weight-bold) !important;
+    line-height: var(--umds-primitive-font-line-height-xs) !important;
+}
+
+.umds-text--visual-h2 {
+    font-size: var(--umds-primitive-font-size-xxl) !important;
+    font-weight: var(--umds-primitive-font-weight-bold) !important;
+    line-height: var(--umds-primitive-font-line-height-sm) !important;
+}
+
+.umds-text--visual-h3 {
+    font-size: var(--umds-primitive-font-size-xl) !important;
+    font-weight: var(--umds-primitive-font-weight-semibold) !important;
+    line-height: var(--umds-primitive-font-line-height-sm) !important;
+}
+
+.umds-text--visual-h4 {
+    font-size: var(--umds-primitive-font-size-lg) !important;
+    font-weight: var(--umds-primitive-font-weight-semibold) !important;
+    line-height: var(--umds-primitive-font-line-height-sm) !important;
+}
+
+.umds-text--visual-h5 {
+    font-size: var(--umds-primitive-font-size-md) !important;
+    font-weight: var(--umds-primitive-font-weight-semibold) !important;
+    line-height: var(--umds-primitive-font-line-height-md) !important;
+}
+
+.umds-text--visual-h6 {
+    font-size: var(--umds-primitive-font-size-sm) !important;
+    font-weight: var(--umds-primitive-font-weight-semibold) !important;
+    line-height: var(--umds-primitive-font-line-height-md) !important;
+}
+
+.umds-text--visual-subtitle1 {
+    font-size: var(--umds-primitive-font-size-xs) !important;
+    font-weight: var(--umds-primitive-font-weight-medium) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+}
+
+.umds-text--visual-subtitle2 {
+    font-size: var(--umds-primitive-font-size-xxs) !important;
+    font-weight: var(--umds-primitive-font-weight-medium) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+}
+
+.umds-text--visual-body1 {
+    font-size: var(--umds-primitive-font-size-xs) !important;
+    font-weight: var(--umds-primitive-font-weight-regular) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+}
+
+.umds-text--visual-body2 {
+    font-size: var(--umds-primitive-font-size-xxs) !important;
+    font-weight: var(--umds-primitive-font-weight-regular) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+}
+
+.umds-text--visual-caption {
+    font-size: var(--umds-primitive-font-size-xxxs) !important;
+    font-weight: var(--umds-primitive-font-weight-regular) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+}
+
+.umds-text--visual-overline {
+    font-size: var(--umds-primitive-font-size-xxxs) !important;
+    font-weight: var(--umds-primitive-font-weight-medium) !important;
+    line-height: var(--umds-primitive-font-line-height-lg) !important;
+    text-transform: uppercase !important;
+}
+
+.umds-text--visual-label {
+    font-size: var(--umds-primitive-font-size-xxs) !important;
+    font-weight: var(--umds-primitive-font-weight-medium) !important;
+    line-height: var(--umds-primitive-font-line-height-md) !important;
+}
+
+/* ===========================================
+   ALIGNMENT
+   =========================================== */
+.umds-text--align-left {
+    text-align: left;
+}
+
+.umds-text--align-center {
+    text-align: center;
+}
+
+.umds-text--align-right {
+    text-align: right;
+}
+
+.umds-text--align-justify {
+    text-align: justify;
+}
+
+/* ===========================================
+   COLORS
+   =========================================== */
+.umds-text--color-primary {
+    color: var(--umds-semantic-color-neutral-pure);
+}
+
+.umds-text--color-secondary {
+    color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+.umds-text--color-disabled {
+    color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-text--color-error {
+    color: var(--umds-semantic-color-feedback-negative-pure);
+}
+
+.umds-text--color-inherit {
+    color: inherit;
+}
+
+/* ===========================================
+   FONT WEIGHTS
+   =========================================== */
+.umds-text--weight-thin {
+    font-weight: var(--umds-primitive-font-weight-thin);
+}
+
+.umds-text--weight-light {
+    font-weight: var(--umds-primitive-font-weight-light);
+}
+
+.umds-text--weight-regular {
+    font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-text--weight-medium {
+    font-weight: var(--umds-primitive-font-weight-medium);
+}
+
+.umds-text--weight-semibold {
+    font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
+.umds-text--weight-bold {
+    font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-text--weight-extrabold {
+    font-weight: var(--umds-primitive-font-weight-extrabold);
+}
+
+.umds-text--weight-black {
+    font-weight: var(--umds-primitive-font-weight-black);
+}
+
+/* ===========================================
+   TEXT UTILITIES
+   =========================================== */
+
+/* No Wrap (Ellipsis) */
+.umds-text--nowrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Line Clamp */
+.umds-text--clamp {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--umds-text-max-lines, 2);
+    overflow: hidden;
+}
+
+/* Text Transform */
+.umds-text--transform-none {
+    text-transform: none;
+}
+
+.umds-text--transform-capitalize {
+    text-transform: capitalize;
+}
+
+.umds-text--transform-uppercase {
+    text-transform: uppercase;
+}
+
+.umds-text--transform-lowercase {
+    text-transform: lowercase;
+}
+
+/* Gutter Bottom */
+.umds-text--gutter-bottom {
+    margin-bottom: var(--umds-primitive-spacing-xxs);
+}