@dnanpm/ui-components 0.0.5 → 0.2.0

package/dist/styles.css

@@ -1,120 +1,89 @@
+@layer dna-design-system {
+
 /**
  * Do not edit directly, this file was auto-generated.
  */
 
 :root {
-  --colors-primitive-neutral-100: #ffffff;
-  --colors-primitive-neutral-200: #f7f7f7;
-  --colors-primitive-neutral-300: #efeeed;
-  --colors-primitive-neutral-400: #e7e5e3;
-  --colors-primitive-neutral-500: #d4d2ce;
-  --colors-primitive-neutral-600: #948b89;
-  --colors-primitive-neutral-700: #505050;
-  --colors-primitive-neutral-800: #121212;
-  --colors-primitive-neutral-900: #000000;
-  --colors-primitive-pink-200: #ffbfe0;
-  --colors-primitive-pink-300: #ff82c1;
-  --colors-primitive-pink-400: #f7007f;
-  --colors-primitive-pink-500: #da0070;
-  --colors-primitive-pink-600: #ae005a;
-  --colors-primitive-plum-200: #792a59;
-  --colors-primitive-plum-300: #732654;
-  --colors-primitive-plum-400: #69214c;
-  --colors-primitive-plum-500: #551c3e;
-  --colors-primitive-plum-600: #441632;
-  --colors-primitive-sand-200: #fdfbfa;
-  --colors-primitive-sand-300: #f8f4f1;
-  --colors-primitive-sand-400: #efeae4;
-  --colors-primitive-sand-500: #ede8e1;
-  --colors-primitive-sand-600: #cabca7;
-  --colors-primitive-lemon-300: #fffaba;
-  --colors-primitive-lemon-400: #fff9a3;
-  --colors-primitive-lemon-500: #fff347;
-  --colors-primitive-orange-300: #ffdbad;
-  --colors-primitive-orange-400: #ffca85;
-  --colors-primitive-orange-500: #ffa633;
-  --colors-primitive-orange-600: #eb6600;
-  --colors-primitive-sky-300: #96e4f8;
-  --colors-primitive-sky-400: #77dcf5;
-  --colors-primitive-sky-500: #2ecaf0;
-  --colors-primitive-blue-400: #d8e9ff;
-  --colors-primitive-blue-500: #0064e2;
-  --colors-primitive-red-500: #dd0a0a;
-  --colors-primitive-green-500: #008500;
-  --colors-primitive-teal-500: #0b7c99;
-  --colors-semantic-foreground-default: #121212;
-  --colors-semantic-foreground-muted: #505050;
-  --colors-semantic-foreground-inverse: #ffffff;
-  --colors-semantic-foreground-primary-strong: #da0070;
-  --colors-semantic-foreground-primary-mid: #ff82c1;
-  --colors-semantic-foreground-primary-soft: #ffbfe0;
-  --colors-semantic-foreground-secondary-strong: #551c3e;
-  --colors-semantic-foreground-secondary-mid: #69214c;
-  --colors-semantic-foreground-secondary-soft: #792a59;
-  --colors-semantic-foreground-status-error: #dd0a0a;
-  --colors-semantic-foreground-status-warning: #eb6600;
-  --colors-semantic-foreground-status-success: #008500;
-  --colors-semantic-foreground-status-info: #0b7c99;
-  --colors-semantic-foreground-link: #da0070;
-  --colors-semantic-foreground-link-inverse: #ffffff;
-  --colors-semantic-foreground-link-hover: #ae005a;
-  --colors-semantic-foreground-link-inverse-hover: rgba(255, 255, 255, 0.8);
-  --colors-semantic-surface-base: #ffffff;
-  --colors-semantic-surface-neutral-soft: #fdfbfa;
-  --colors-semantic-surface-neutral-mid: #f8f4f1;
-  --colors-semantic-surface-neutral-strong: #ede8e1;
-  --colors-semantic-surface-primary-strong: #da0070;
-  --colors-semantic-surface-primary-mid: #ff82c1;
-  --colors-semantic-surface-primary-soft: #ffbfe0;
-  --colors-semantic-surface-secondary-strong: #551c3e;
-  --colors-semantic-surface-secondary-mid: #69214c;
-  --colors-semantic-surface-secondary-soft: #792a59;
-  --colors-semantic-border-neutral-mid: #d4d2ce;
-  --colors-semantic-border-neutral-soft: #e7e5e3;
-  --colors-semantic-border-neutral-base: #efeeed;
-  --colors-semantic-border-neutral-strong: #948b89;
-  --colors-semantic-border-secondary: #551c3e;
-  --colors-semantic-border-primary: #da0070;
-  --colors-semantic-border-focus: #0064e2;
-  --colors-semantic-border-inverse: #ffffff;
-  --colors-semantic-border-error: #dd0a0a;
-  --colors-semantic-border-warning: #eb6600;
-  --colors-semantic-border-success: #008500;
-  --colors-semantic-border-info: #0b7c99;
-  --colors-semantic-utility-focus-soft: #d8e9ff;
-  --colors-semantic-utility-focus-strong: #0064e2;
-  --colors-semantic-utility-overlay-strong: rgba(85, 28, 62, 0.4);
-  --colors-semantic-utility-overlay-soft: rgba(85, 28, 62, 0.1);
-  --colors-semantic-status-info: #0b7c99;
-  --colors-semantic-status-success: #008500;
-  --colors-semantic-status-warning: #eb6600;
-  --colors-semantic-status-error: #dd0a0a;
-  --colors-semantic-accent-lemon-300: #fffaba;
-  --colors-semantic-accent-lemon-400: #fff9a3;
-  --colors-semantic-accent-lemon-500: #fff347;
-  --colors-semantic-accent-orange-300: #ffdbad;
-  --colors-semantic-accent-orange-400: #ffca85;
-  --colors-semantic-accent-orange-500: #ffa633;
-  --colors-semantic-accent-sky-300: #96e4f8;
-  --colors-semantic-accent-sky-400: #77dcf5;
-  --colors-semantic-accent-sky-500: #2ecaf0;
-  --colors-semantic-interactive-primary-default: #da0070;
-  --colors-semantic-interactive-primary-hover: #ae005a;
-  --colors-semantic-interactive-primary-active: #f7007f;
-  --colors-semantic-interactive-primary-disabled: rgba(218, 0, 112, 0.3);
-  --colors-semantic-interactive-primary-focus: #ae005a;
-  --colors-semantic-interactive-secondary-default: #551c3e;
-  --colors-semantic-interactive-secondary-hover: #441632;
-  --colors-semantic-interactive-secondary-focus: #441632;
-  --colors-semantic-interactive-secondary-active: #732654;
-  --colors-semantic-interactive-secondary-disabled: rgba(85, 28, 62, 0.3);
-  --colors-semantic-interactive-neutral-default: #ede8e1;
-  --colors-semantic-interactive-neutral-hover: #cabca7;
-  --colors-semantic-interactive-neutral-focus: #cabca7;
-  --colors-semantic-interactive-neutral-active: #efeae4;
-  --colors-semantic-interactive-neutral-disabled: rgba(237, 232, 225, 0.3);
-  --colors-semantic-interactive-focus-ring: #0064e2;
-  --colors-semantic-interactive-focus-ring-weak: #d8e9ff;
+  --color-semantic-foreground-default: #121212;
+  --color-semantic-foreground-muted: #505050;
+  --color-semantic-foreground-inverse: #ffffff;
+  --color-semantic-foreground-primary-strong: #da0070;
+  --color-semantic-foreground-primary-mid: #ff82c1;
+  --color-semantic-foreground-primary-soft: #ffbfe0;
+  --color-semantic-foreground-secondary-strong: #551c3e;
+  --color-semantic-foreground-secondary-mid: #69214c;
+  --color-semantic-foreground-secondary-soft: #792a59;
+  --color-semantic-foreground-status-error: #dd0a0a;
+  --color-semantic-foreground-status-warning: #eb6600;
+  --color-semantic-foreground-status-success: #008500;
+  --color-semantic-foreground-status-info: #0b7c99;
+  --color-semantic-foreground-link: #da0070;
+  --color-semantic-foreground-link-inverse: #ffffff;
+  --color-semantic-foreground-link-hover: #ae005a;
+  --color-semantic-foreground-link-inverse-hover: rgba(255, 255, 255, 0.8);
+  --color-semantic-foreground-inverse-muted: rgba(255, 255, 255, 0.7);
+  --color-semantic-surface-base: #ffffff;
+  --color-semantic-surface-neutral-soft: #fdfbfa;
+  --color-semantic-surface-neutral-mid: #f8f4f1;
+  --color-semantic-surface-neutral-strong: #ede8e1;
+  --color-semantic-surface-primary-strong: #da0070;
+  --color-semantic-surface-primary-mid: #ff82c1;
+  --color-semantic-surface-primary-soft: #ffbfe0;
+  --color-semantic-surface-secondary-strong: #551c3e;
+  --color-semantic-surface-secondary-mid: #69214c;
+  --color-semantic-surface-secondary-soft: #792a59;
+  --color-semantic-border-neutral-mid: #d4d2ce;
+  --color-semantic-border-neutral-soft: #e7e5e3;
+  --color-semantic-border-neutral-base: #efeeed;
+  --color-semantic-border-neutral-strong: #948b89;
+  --color-semantic-border-secondary: #551c3e;
+  --color-semantic-border-primary: #da0070;
+  --color-semantic-border-focus: #0064e2;
+  --color-semantic-border-inverse: #ffffff;
+  --color-semantic-border-error: #dd0a0a;
+  --color-semantic-border-warning: #eb6600;
+  --color-semantic-border-success: #008500;
+  --color-semantic-border-info: #0b7c99;
+  --color-semantic-utility-focus-soft: #d8e9ff;
+  --color-semantic-utility-focus-strong: #0064e2;
+  --color-semantic-utility-overlay-strong: rgba(85, 28, 62, 0.4);
+  --color-semantic-utility-overlay-soft: rgba(85, 28, 62, 0.1);
+  --color-semantic-status-info: #0b7c99;
+  --color-semantic-status-success: #008500;
+  --color-semantic-status-warning: #eb6600;
+  --color-semantic-status-error: #dd0a0a;
+  --color-semantic-accent-lemon-strong: #fff347;
+  --color-semantic-accent-lemon-mid: #fff9a3;
+  --color-semantic-accent-lemon-soft: #fffaba;
+  --color-semantic-accent-orange-strong: #ffa633;
+  --color-semantic-accent-orange-mid: #ffca85;
+  --color-semantic-accent-orange-soft: #ffdbad;
+  --color-semantic-accent-sky-strong: #2ecaf0;
+  --color-semantic-accent-sky-mid: #77dcf5;
+  --color-semantic-accent-sky-soft: #96e4f8;
+  --color-semantic-interactive-primary-default: #da0070;
+  --color-semantic-interactive-primary-hover: #ae005a;
+  --color-semantic-interactive-primary-active: #f7007f;
+  --color-semantic-interactive-primary-disabled: rgba(218, 0, 112, 0.3);
+  --color-semantic-interactive-primary-focus: #ae005a;
+  --color-semantic-interactive-secondary-default: #551c3e;
+  --color-semantic-interactive-secondary-hover: #441632;
+  --color-semantic-interactive-secondary-focus: #441632;
+  --color-semantic-interactive-secondary-active: #732654;
+  --color-semantic-interactive-secondary-disabled: rgba(85, 28, 62, 0.3);
+  --color-semantic-interactive-neutral-default: #ede8e1;
+  --color-semantic-interactive-neutral-hover: #cabca7;
+  --color-semantic-interactive-neutral-focus: #cabca7;
+  --color-semantic-interactive-neutral-active: #efeae4;
+  --color-semantic-interactive-neutral-disabled: rgba(237, 232, 225, 0.3);
+  --color-semantic-interactive-focus-ring: #0064e2;
+  --color-semantic-interactive-focus-ring-weak: #d8e9ff;
+  --color-semantic-interactive-inverse-default: #ffffff;
+  --color-semantic-interactive-inverse-hover: #ffffff;
+  --color-semantic-interactive-inverse-focus: #ffffff;
+  --color-semantic-interactive-inverse-active: rgba(255, 255, 255, 0.9);
+  --color-semantic-interactive-inverse-disabled: rgba(255, 255, 255, 0.3);
   --spacing-ui-md: 16px;
   --spacing-ui-lg: 20px;
   --spacing-ui-sm: 12px;
@@ -123,31 +92,7 @@
   --spacing-ui-xxs: 4px;
   --spacing-ui-xxl: 32px;
   --spacing-ui-none: 0px;
-  --spacing-primitive-size0: 0px;
-  --spacing-primitive-size8: 8px;
-  --spacing-primitive-size16: 16px;
-  --spacing-primitive-size24: 24px;
-  --spacing-primitive-size32: 32px;
-  --spacing-primitive-size40: 40px;
-  --spacing-primitive-size12: 12px;
-  --spacing-primitive-size20: 20px;
-  --spacing-primitive-size4: 4px;
-  --spacing-primitive-size2: 2px;
-  --spacing-primitive-size48: 48px;
-  --spacing-primitive-size56: 56px;
-  --spacing-primitive-size64: 64px;
-  --spacing-primitive-size72: 72px;
-  --spacing-primitive-size80: 80px;
-  --spacing-primitive-size88: 88px;
-  --spacing-primitive-size96: 96px;
-  --spacing-primitive-size104: 104px;
-  --spacing-primitive-size112: 112px;
-  --spacing-primitive-size120: 120px;
-  --spacing-primitive-size128: 128px;
-  --spacing-primitive-size136: 136px;
-  --spacing-primitive-size144: 144px;
-  --spacing-primitive-size152: 152px;
-  --spacing-primitive-size160: 160px;
+  --spacing-ui-xxxl: 40px;
   --spacing-layout-none: 0px;
   --spacing-layout-xxs: 16px;
   --spacing-layout-xs: 32px;
@@ -161,11 +106,6 @@
   --radius-semantic-md: 8px;
   --radius-semantic-lg: 12px;
   --radius-semantic-full: 1000px;
-  --radius-primitive-size0: 0px;
-  --radius-primitive-size4: 4px;
-  --radius-primitive-size8: 8px;
-  --radius-primitive-size12: 12px;
-  --radius-primitive-size1000: 1000px;
   --borderwidth-semantic-none: 0px;
   --borderwidth-semantic-xs: 1px;
   --borderwidth-semantic-md: 3px;
@@ -173,13 +113,40 @@
   --borderwidth-semantic-xl: 5px;
   --borderwidth-semantic-xxl: 6px;
   --borderwidth-semantic-sm: 2px;
-  --borderwidth-primitive-size0: 0px;
-  --borderwidth-primitive-size1: 1px;
-  --borderwidth-primitive-size2: 2px;
-  --borderwidth-primitive-size3: 3px;
-  --borderwidth-primitive-size4: 4px;
-  --borderwidth-primitive-size5: 5px;
-  --borderwidth-primitive-size6: 6px;
+  --typography-font-size-heading-xxxl: 64px;
+  --typography-font-size-heading-xxl: 48px;
+  --typography-font-size-heading-xl: 36px;
+  --typography-font-size-heading-lg: 28px;
+  --typography-font-size-heading-md: 24px;
+  --typography-font-size-heading-sm: 20px;
+  --typography-font-size-heading-xs: 18px;
+  --typography-font-size-text-lg: 20px;
+  --typography-font-size-text-md: 16px;
+  --typography-font-size-text-sm: 14px;
+  --typography-font-size-text-xs: 12px;
+  --typography-font-weight-regular: 400;
+  --typography-font-weight-medium: 500;
+  --typography-font-weight-bold: 700;
+  --typography-font-weight-black: 900;
+  --typography-font-weight-demi-bold: 600;
+  --typography-line-height-xs: 1;
+  --typography-line-height-sm: 1.1;
+  --typography-line-height-md: 1.25;
+  --typography-line-height-lg: 1.5;
+  --typography-letter-spacing-tight: -0.02em;
+  --typography-letter-spacing-normal: 0em;
+  --typography-letter-spacing-wide: 0.02em;
+  --typography-font-family-heading: DNA Heading;
+  --typography-font-family-text: DNA Text;
+}
+}
+
+@layer dna-design-system {
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
 }
 
 html {
@@ -191,366 +158,260 @@ html {
 
     scroll-behavior: smooth;
 }
-._box_1wdiz_1 {
-    display: block;
-    padding: var(--spacing-ui-md, 1rem);
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    transition: box-shadow 0.2s ease-in-out;
-}
-
-/* Elevation Variants */
-._box--none_1wdiz_10 {
-    box-shadow: none;
-}
-
-._box--low_1wdiz_14 {
-    box-shadow: 0 2px 16px rgba(18, 18, 18, 0.06);
-}
-
-._box--high_1wdiz_18 {
-    box-shadow: 0 6px 24px rgba(18, 18, 18, 0.08);
-}
-
-._box--extraHigh_1wdiz_22 {
-    box-shadow: 0 8px 64px rgba(18, 18, 18, 0.16);
-}
-/**
- * Button Component Styles
- *
- * Design tokens are consumed via CSS custom properties (variables).
- * These variables come from @dnanpm/design-tokens package.
- *
- * Examples:
- * - Colors: var(--colors-primitive-pink-500)
- * - Spacing: var(--spacing-ui-md)
- * - Border radius: var(--radius-semantic-md)
- *
- * Fallback values are defined in src/styles/base.css
- */
-
-._button_1p878_15 {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: 2.5rem;
-    padding: 0 var(--spacing-ui-md, 1rem);
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 0.875rem;
-    font-weight: 500;
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    border: 1px solid transparent;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
-    text-decoration: none;
-    white-space: nowrap;
-}
-
-._button_1p878_15:focus-visible {
-    outline: 2px solid var(--colors-primitive-utility-focusstrong, #1d4ed8);
-    outline-offset: 2px;
+html,
+body {
+    margin: 0;
+    padding: 0;
 }
 
-._button_1p878_15:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
+img,
+picture,
+svg,
+video {
+    display: block;
+    max-width: 100%;
 }
-
-/* Button Variants */
-._button--primary_1p878_45 {
-    background-color: var(--colors-primitive-pink-500, #ec4899);
-    color: white;
 }
 
-._button--primary_1p878_45:hover:not(:disabled) {
-    background-color: var(--colors-primitive-pink-600, #db2777);
-}
+@layer dna-design-system {
 
-._button--primary_1p878_45:active:not(:disabled) {
-    background-color: var(--colors-primitive-pink-400, #f472b6);
-}
+/* ==========================================================================
+   Typography shorthand variables
 
-._button--secondary_1p878_58 {
-    background-color: var(--colors-primitive-neutral-100, #f5f5f5);
-    color: var(--colors-primitive-neutral-900, #171717);
-    border-color: var(--colors-primitive-neutral-300, #d4d4d4);
-}
+   Each variable holds a complete CSS font shorthand value:
+   weight size/line-height family
 
-._button--secondary_1p878_58:hover:not(:disabled) {
-    background-color: var(--colors-primitive-neutral-200, #e5e5e5);
-}
+   Usage: font: var(--typography-heading-xxl);
 
-._button--secondary_1p878_58:active:not(:disabled) {
-    background-color: var(--colors-primitive-neutral-300, #d4d4d4);
-}
+   Figma doesn't support composing typography tokens from multiple 
+   design token categories, so we need to define these shorthands in CSS. 
+   This also allows us to use the clamp() function for fluid typography, 
+   which isn't possible to do in Figma tokens.
+   ========================================================================== */
 
-/* Size Variants */
-._button--default_1p878_73 {
-    /* Default size (already set in base styles) */
-}
+:root {
+    /* TODO (DDS-14): Remove these two overrides once the design-tokens font-family tokens include fallbacks. */
+    --typography-font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --typography-font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    /* Headings */
+    --typography-heading-xxl: var(--typography-font-weight-black)
+        clamp(2.25rem, 2rem + 1.25cqw, 3rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-xl: var(--typography-font-weight-black)
+        clamp(2rem, 1.833rem + 0.833cqw, 2.5rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-lg: var(--typography-font-weight-black)
+        clamp(1.625rem, 1.458rem + 0.833cqw, 2.125rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-md: var(--typography-font-weight-bold)
+        clamp(1.375rem, 1.25rem + 0.625cqw, 1.75rem)/var(--typography-line-height-md)
+        var(--typography-font-family-heading);
+    --typography-heading-sm: var(--typography-font-weight-bold)
+        clamp(1.25rem, 1.167rem + 0.417cqw, 1.5rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+    --typography-heading-xs: var(--typography-font-weight-bold)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+    --typography-heading-xxs: var(--typography-font-weight-bold)
+        clamp(1.0625rem, 1.042rem + 0.104cqw, 1.125rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+
+    /* Body */
+    --typography-body-lg: var(--typography-font-weight-medium)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-md: var(--typography-font-weight-regular)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-md-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-sm: var(--typography-font-weight-regular)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-sm-medium: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-xs: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-xs)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+
+    /* Labels */
+    --typography-label-lg: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-lg-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-md: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-md-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-sm: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-xs)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+}
+
+/* ==========================================================================
+   Base typography styles
+
+   These styles apply to native HTML elements and provide a baseline for
+   typography across the design system. They ensure that basic typographic
+   properties are set consistently, and they can be overridden by utility
+   classes for specific use cases.
+
+   ========================================================================== */
 
-._button--small_1p878_77 {
-    height: 2rem;
-    padding: 0 var(--spacing-ui-sm, 0.75rem);
-    font-size: 0.75rem;
+html {
+    font: var(--typography-body-md);
 }
 
-/* Layout Modifiers */
-._button--fullWidth_1p878_84 {
-    width: 100%;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+    margin: 1em 0;
 }
-
-/* State Modifiers */
-._button--loading_1p878_89 {
-    opacity: 0.7;
-    cursor: wait;
+p {
+    margin: 1em 0;
 }
 
-._button--loading_1p878_89:hover {
-    /* Prevent hover effects when loading */
-    background-color: inherit;
+h1 {
+    font: var(--typography-heading-xxl);
 }
-._dialog__backdrop_p6ll3_1 {
-    position: fixed;
-    inset: 0;
-    min-height: 100dvh;
-    background: rgb(23 23 23 / 0.5);
-    backdrop-filter: blur(2px);
-    transition:
-        opacity 180ms ease,
-        backdrop-filter 180ms ease;
-
-    @supports (-webkit-touch-callout: none) {
-        position: absolute;
-    }
+h2 {
+    font: var(--typography-heading-lg);
 }
-
-._dialog__backdrop_p6ll3_1[data-starting-style],
-._dialog__backdrop_p6ll3_1[data-ending-style] {
-    opacity: 0;
-    backdrop-filter: blur(0);
+h3 {
+    font: var(--typography-heading-md);
 }
-
-._dialog__viewport_p6ll3_22 {
-    position: fixed;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 1.5rem;
+h4 {
+    font: var(--typography-heading-sm);
 }
-
-._dialog__popup_p6ll3_31 {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: min(100%, 36rem);
-    max-height: min(80vh, 44rem);
-    min-height: 0;
-    overflow: hidden;
-    border-radius: var(--radius-semantic-lg, 0.75rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-900, #171717);
-    outline: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-    box-shadow:
-        0 24px 48px rgb(23 23 23 / 0.18),
-        0 12px 24px rgb(23 23 23 / 0.08);
-    transition:
-        opacity 180ms ease,
-        transform 180ms ease;
+h5 {
+    font: var(--typography-heading-xs);
 }
-
-._dialog__popup_p6ll3_31[data-starting-style],
-._dialog__popup_p6ll3_31[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.98) translateY(0.5rem);
+h6 {
+    font: var(--typography-heading-xxs);
 }
 
-._dialog__popup--sm_p6ll3_58 {
-    width: min(100%, 28rem);
+b,
+strong {
+    font-weight: var(--typography-font-weight-bold);
 }
 
-._dialog__popup--md_p6ll3_62 {
-    width: min(100%, 36rem);
+/*
+ * Design decision (ADR-003): discard italic rendering for em/i.
+ * Keep semantic tags in markup, but render without slanted glyphs.
+ */
+i,
+em {
+    font-style: normal;
 }
-
-._dialog__popup--lg_p6ll3_66 {
-    width: min(100%, 44rem);
+small {
+    font-size: var(--typography-font-size-text-sm);
 }
 
-._dialog__header_p6ll3_70 {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1.5rem 1.5rem 0;
+/*
+ * Design decision (ADR-003): base links are color-driven, not underlined.
+ * Long-form content uses .dds-prose which adds underline + external link icon.
+ */
+a {
+    color: var(--color-semantic-foreground-link);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+    &:hover {
+        color: var(--color-semantic-foreground-link-hover);
+        text-decoration: none;
+    }
 }
 
-._dialog__titleGroup_p6ll3_78 {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 0.5rem;
+ul {
+    list-style-type: disc;
+    li::marker {
+        color: var(--color-semantic-foreground-primary-strong);
+    }
 }
+ul,
+ol {
+    margin: 1em 0;
+    padding: 0;
 
-._dialog__title_p6ll3_78 {
-    margin: 0;
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.75rem;
+    li {
+        margin: 0.5em 0 0.5em 1.5em;
+    }
 }
-
-._dialog__description_p6ll3_95 {
+:is(ul, ol) :is(ul, ol) {
     margin: 0;
-    color: var(--colors-primitive-neutral-600, #525252);
-    font-size: 0.95rem;
-    line-height: 1.5rem;
-}
-
-._dialog__close_p6ll3_102 {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-600, #525252);
-    transition:
-        background-color 120ms ease,
-        color 120ms ease,
-        border-color 120ms ease;
-}
-
-._dialog__close_p6ll3_102:focus-visible {
-    outline: 2px solid var(--colors-primitive-utility-focusstrong, #1d4ed8);
-    outline-offset: 2px;
-}
-
-._dialog__close_p6ll3_102:hover {
-    background-color: var(--colors-primitive-neutral-100, #f5f5f5);
-    color: var(--colors-primitive-neutral-900, #171717);
-}
-
-._dialog__closeIcon_p6ll3_129 {
-    width: 1.125rem;
-    height: 1.125rem;
-}
-
-._dialog__body_p6ll3_134 {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: auto;
-    padding: 1.25rem 1.5rem;
-    color: var(--colors-primitive-neutral-700, #404040);
-    font-size: 0.95rem;
-    line-height: 1.6rem;
-}
-
-._dialog__footer_p6ll3_144 {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: 0.75rem;
-    padding: 0 1.5rem 1.5rem;
-}
-._tooltip__positioner_1h5uw_1 {
-    height: var(--positioner-height);
-    width: var(--positioner-width);
-    max-width: var(--available-width);
 }
 
-._tooltip_1h5uw_1 {
-    box-sizing: border-box;
-    display: inline-flex;
-    align-items: center;
-    min-height: 2.25rem;
-    max-width: min(20rem, calc(100vw - 1.5rem));
-    padding: 0.5rem 0.75rem;
-    border-radius: var(--radius-semantic-md, 0.5rem);
-    background-color: var(--colors-primitive-neutral-0, #ffffff);
-    color: var(--colors-primitive-neutral-900, #171717);
-    font-family:
-        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
-        sans-serif;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    transform-origin: var(--transform-origin);
-    transition:
-        opacity 150ms ease,
-        transform 150ms ease;
-
-    @media (prefers-color-scheme: light) {
-        outline: 1px solid var(--colors-primitive-neutral-200, #e5e5e5);
-        box-shadow:
-            0 12px 24px -12px rgb(23 23 23 / 0.22),
-            0 6px 12px -8px rgb(23 23 23 / 0.14);
+/* ==========================================================================
+   Prose — long-form content scope
+
+   Apply .dds-prose to a container to enable rich typographic styles for
+   article/editorial content (underlined links, paragraph spacing, etc.).
+
+   Usage: <article class="dds-prose">...</article>
+   ========================================================================== */
+
+.dds-prose {
+    /* Icon uses mask-image + background-color: currentColor so it inherits
+       the link color automatically in all color schemes. */
+    --icon-external-link: url('data:image/svg+xml;utf8,<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.004 12c0 4.402 0 6.203.002 4.002V7.998c-.001-2.201-.002-.4-.002 4.002" clip-rule="evenodd"/><path d="M2.628 2.628a2.14 2.14 0 0 1 1.305-.619c.04-.004 1.58-.006 3.425-.006 3.217.001 3.356.002 3.401.016a.75.75 0 0 1 .51.513c.012.049.017.09.018.172a.64.64 0 0 1-.053.29.74.74 0 0 1-.501.42c-.05.012-.32.014-3.387.018-3.014.004-3.337.006-3.373.017a.76.76 0 0 0-.332.191.76.76 0 0 0-.193.344c-.017.066-.017 15.966 0 16.032a.73.73 0 0 0 .537.537c.066.017 15.972.017 16.038 0a.76.76 0 0 0 .344-.193.76.76 0 0 0 .191-.332c.012-.036.014-.36.017-3.376l.005-3.336.017-.063a.7.7 0 0 1 .192-.329.66.66 0 0 1 .515-.207c.12.001.196.017.286.059a.74.74 0 0 1 .41.527l-.004 6.776a2.14 2.14 0 0 1-1.945 1.913c-.075.006-2.309.008-8.115.006-7.66-.002-8.015-.003-8.095-.017a2.15 2.15 0 0 1-1.832-1.925c-.012-.13-.012-15.982 0-16.112.046-.498.263-.96.62-1.316"/><path d="M21.416 2.008c.205.034.469.155.58.344v5.501a.73.73 0 0 1-.51.551.75.75 0 0 1-.51-.048.72.72 0 0 1-.392-.56 82 82 0 0 1-.008-1.712v-1.64l-4.06 4.057c-2.233 2.231-4.078 4.07-4.1 4.085a.8.8 0 0 1-.218.104.6.6 0 0 1-.194.018.6.6 0 0 1-.194-.018.73.73 0 0 1-.496-.496.6.6 0 0 1-.018-.194.6.6 0 0 1 .018-.194.8.8 0 0 1 .103-.217c.016-.023 1.856-1.867 4.088-4.099l4.058-4.058h-1.64a81 81 0 0 1-1.713-.008.7.7 0 0 1-.499-.292.73.73 0 0 1-.11-.612.72.72 0 0 1 .385-.452c.144-.07-.154-.063 2.777-.066 1.825-.002 2.616 0 2.653.006"/></svg>');
+
+    a {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
+
+        &[target='_blank'] {
+            &::after {
+                content: '';
+                display: inline-block;
+                width: 1em;
+                height: 1em;
+                margin-left: 0.25em;
+                vertical-align: text-top;
+                background-color: currentColor;
+                mask-image: var(--icon-external-link);
+                mask-size: contain;
+                mask-repeat: no-repeat;
+            }
+        }
     }
 
-    @media (prefers-color-scheme: dark) {
-        outline: 1px solid var(--colors-primitive-neutral-300, #d4d4d4);
-        outline-offset: -1px;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 1.25em 0 1rem 0;
+    }
+    p {
+        text-wrap: pretty;
     }
 }
 
-._tooltip_1h5uw_1[data-starting-style],
-._tooltip_1h5uw_1[data-ending-style] {
-    opacity: 0;
-    transform: scale(0.92);
-}
-
-._tooltip_1h5uw_1[data-instant] {
-    transition: none;
-}
-
-._tooltip__content_1h5uw_50 {
-    display: inline-flex;
-    align-items: center;
-}
-
-._tooltip__arrow_1h5uw_55 {
-    display: flex;
-}
-
-._tooltip__arrow_1h5uw_55[data-side='top'] {
-    bottom: -8px;
-    rotate: 180deg;
-}
-
-._tooltip__arrow_1h5uw_55[data-side='bottom'] {
-    top: -8px;
-}
-
-._tooltip__arrow_1h5uw_55[data-side='left'] {
-    right: -13px;
-    rotate: 90deg;
-}
-
-._tooltip__arrow_1h5uw_55[data-side='right'] {
-    left: -13px;
-    rotate: -90deg;
-}
+/* ─── Dark color scheme ─── */
 
-._tooltip__arrowFill_1h5uw_78 {
-    fill: var(--colors-primitive-neutral-0, #ffffff);
-}
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    .dds-prose {
+        a {
+            color: var(--color-semantic-foreground-link-inverse);
 
-._tooltip__arrowOuterStroke_1h5uw_82 {
-    @media (prefers-color-scheme: light) {
-        fill: var(--colors-primitive-neutral-200, #e5e5e5);
+            &:hover {
+                color: var(--color-semantic-foreground-link-inverse-hover);
+            }
+        }
     }
 }
-
-._tooltip__arrowInnerStroke_1h5uw_88 {
-    @media (prefers-color-scheme: dark) {
-        fill: var(--colors-primitive-neutral-300, #d4d4d4);
-    }
 }