@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/tooltips-popovers.css

@@ -1,447 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Tooltips & Popovers
- *
- *  Responsibilities:
- *    - Provide tooltip (non-interactive) and popover (interactive) micro-surfaces
- *    - Implement arrow rendering, semantic variants, and density modes (A / default / C)
- *    - Define positional system (top, bottom, left, right + corner variants)
- *    - Support visible/open states via modifiers and data-state attributes
- *    - Ensure accessible behaviour: pointer safety, focus-visible, and reduced-motion
- *
- *  System Notes:
- *    - Pure CSS; visibility controlled externally (no JS assumptions)
- *    - Fully token-driven: surfaces, borders, radii, shadows, z-index, transitions
- *    - Tooltip/popover arrows inherit background and border to keep seams clean
- *    - Designed to work with any inline trigger or anchor and with overlays/forms
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. TOOLTIP TRIGGERS
-   Attach this class to ensure proper positioning context.
---------------------------------------------------------- */
-
-.tooltip-trigger {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-}
-
-/* ---------------------------------------------------------
-   2. BASE TOOLTIP
---------------------------------------------------------- */
-
-.tooltip {
-    position: absolute;
-    z-index: var(--z-tooltip);
-
-    max-width: 24rem;
-    padding: var(--space-2) var(--space-3);
-
-    background-color: var(--color-surface);
-    color: var(--color-text);
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border-subtle);
-    box-shadow: var(--shadow-2);
-
-    font-size: var(--text-xs);
-    line-height: 1.4;
-    white-space: normal;
-
-    opacity: 0;
-    transform: translateY(0.25rem);
-    pointer-events: none;
-
-    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
-}
-
-.tooltip--visible,
-.tooltip[data-state="open"] {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-}
-
-/* ---------------------------------------------------------
-   3. TOOLTIP POSITIONS
---------------------------------------------------------- */
-
-.tooltip--top {
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, -0.25rem);
-}
-
-.tooltip--top.tooltip--visible,
-.tooltip--top[data-state="open"] {
-    transform: translate(-50%, 0);
-}
-
-.tooltip--bottom {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, 0.25rem);
-}
-
-.tooltip--bottom.tooltip--visible,
-.tooltip--bottom[data-state="open"] {
-    transform: translate(-50%, 0);
-}
-
-.tooltip--left {
-    right: 100%;
-    top: 50%;
-    transform: translate(-0.25rem, -50%);
-}
-
-.tooltip--left.tooltip--visible,
-.tooltip--left[data-state="open"] {
-    transform: translate(0, -50%);
-}
-
-.tooltip--right {
-    left: 100%;
-    top: 50%;
-    transform: translate(0.25rem, -50%);
-}
-
-.tooltip--right.tooltip--visible,
-.tooltip--right[data-state="open"] {
-    transform: translate(0, -50%);
-}
-
-/* ---------------------------------------------------------
-   4. TOOLTIP ARROW
---------------------------------------------------------- */
-
-.tooltip__arrow {
-    position: absolute;
-    width: var(--space-3);
-    height: var(--space-3);
-
-    background-color: inherit;
-    border: inherit;
-    border-left: none;
-    border-top: none;
-
-    transform: rotate(45deg);
-}
-
-.tooltip--top .tooltip__arrow {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.tooltip--bottom .tooltip__arrow {
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, 50%) rotate(45deg);
-}
-
-.tooltip--left .tooltip__arrow {
-    left: 100%;
-    top: 50%;
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.tooltip--right .tooltip__arrow {
-    right: 100%;
-    top: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-/* ---------------------------------------------------------
-   5. TOOLTIP DENSITY
---------------------------------------------------------- */
-
-.tooltip--a {
-    padding: var(--space-3) var(--space-4);
-    font-size: var(--text-sm);
-}
-
-.tooltip--c {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-xs);
-}
-
-/* ---------------------------------------------------------
-   6. TOOLTIP SEMANTIC VARIANTS
---------------------------------------------------------- */
-
-.tooltip--info {
-    background-color: var(--semantic-info-bg);
-    color: var(--semantic-info-text);
-    border-color: var(--semantic-info-border);
-}
-
-.tooltip--success {
-    background-color: var(--semantic-success-bg);
-    color: var(--semantic-success-text);
-    border-color: var(--semantic-success-border);
-}
-
-.tooltip--warning {
-    background-color: var(--semantic-warning-bg);
-    color: var(--semantic-warning-text);
-    border-color: var(--semantic-warning-border);
-}
-
-.tooltip--danger {
-    background-color: var(--semantic-danger-bg);
-    color: var(--semantic-danger-text);
-    border-color: var(--semantic-danger-border);
-}
-
-/* ---------------------------------------------------------
-   7. POPOVER ANCHOR
---------------------------------------------------------- */
-
-.popover-anchor {
-    position: relative;
-    display: inline-block;
-}
-
-/* ---------------------------------------------------------
-   8. BASE POPOVER
---------------------------------------------------------- */
-
-.popover {
-    position: absolute;
-    z-index: var(--z-tooltip);
-
-    min-width: 12rem;
-    max-width: 28rem;
-
-    background-color: var(--color-surface);
-    color: var(--color-text);
-    border-radius: var(--radius-md);
-    border: 1px solid var(--color-border-subtle);
-    box-shadow: var(--shadow-3);
-
-    display: flex;
-    flex-direction: column;
-
-    opacity: 0;
-    transform: translateY(0.25rem);
-    pointer-events: none;
-
-    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
-}
-
-.popover--open,
-.popover[data-state="open"] {
-    opacity: 1;
-    transform: translateY(0);
-    pointer-events: auto;
-}
-
-/* ---------------------------------------------------------
-   9. POPOVER POSITIONS
---------------------------------------------------------- */
-
-.popover--top {
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, -0.25rem);
-}
-
-.popover--top.popover--open,
-.popover--top[data-state="open"] {
-    transform: translate(-50%, 0);
-}
-
-.popover--bottom {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, 0.25rem);
-}
-
-.popover--bottom.popover--open,
-.popover--bottom[data-state="open"] {
-    transform: translate(-50%, 0);
-}
-
-.popover--left {
-    right: 100%;
-    top: 50%;
-    transform: translate(-0.25rem, -50%);
-}
-
-.popover--left.popover--open,
-.popover--left[data-state="open"] {
-    transform: translate(0, -50%);
-}
-
-.popover--right {
-    left: 100%;
-    top: 50%;
-    transform: translate(0.25rem, -50%);
-}
-
-.popover--right.popover--open,
-.popover--right[data-state="open"] {
-    transform: translate(0, -50%);
-}
-
-.popover--bottom-right {
-    top: 100%;
-    right: 0;
-    transform: translateY(0.25rem);
-}
-
-.popover--bottom-right.popover--open,
-.popover--bottom-right[data-state="open"] {
-    transform: translateY(0);
-}
-
-.popover--bottom-left {
-    top: 100%;
-    left: 0;
-    transform: translateY(0.25rem);
-}
-
-.popover--bottom-left.popover--open,
-.popover--bottom-left[data-state="open"] {
-    transform: translateY(0);
-}
-
-.popover--top-right {
-    bottom: 100%;
-    right: 0;
-    transform: translateY(-0.25rem);
-}
-
-.popover--top-right.popover--open,
-.popover--top-right[data-state="open"] {
-    transform: translateY(0);
-}
-
-.popover--top-left {
-    bottom: 100%;
-    left: 0;
-    transform: translateY(-0.25rem);
-}
-
-.popover--top-left.popover--open,
-.popover--top-left[data-state="open"] {
-    transform: translateY(0);
-}
-
-/* ---------------------------------------------------------
-   10. POPOVER ARROW
---------------------------------------------------------- */
-
-.popover__arrow {
-    position: absolute;
-    width: var(--space-3);
-    height: var(--space-3);
-
-    background-color: inherit;
-    border: inherit;
-    border-left: none;
-    border-top: none;
-
-    transform: rotate(45deg);
-}
-
-.popover--bottom .popover__arrow,
-.popover--bottom-right .popover__arrow,
-.popover--bottom-left .popover__arrow {
-    bottom: 100%;
-    left: var(--space-6);
-    transform: translateY(50%) rotate(45deg);
-}
-
-.popover--top .popover__arrow,
-.popover--top-right .popover__arrow,
-.popover--top-left .popover__arrow {
-    top: 100%;
-    left: var(--space-6);
-    transform: translateY(-50%) rotate(45deg);
-}
-
-.popover--left .popover__arrow {
-    left: 100%;
-    top: 50%;
-    transform: translate(50%, -50%) rotate(45deg);
-}
-
-.popover--right .popover__arrow {
-    right: 100%;
-    top: 50%;
-    transform: translate(-50%, -50%) rotate(45deg);
-}
-
-/* ---------------------------------------------------------
-   11. POPOVER LAYOUT
---------------------------------------------------------- */
-
-.popover__header,
-.popover__footer {
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.popover__footer {
-    border-top: 1px solid var(--color-border-subtle);
-    border-bottom: none;
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-2);
-}
-
-.popover__body {
-    padding: var(--space-3) var(--space-4);
-}
-
-.popover__title {
-    font-size: var(--text-sm);
-    font-weight: 600;
-}
-
-/* ---------------------------------------------------------
-   12. POPOVER DENSITY
---------------------------------------------------------- */
-
-.popover--a .popover__header,
-.popover--a .popover__footer,
-.popover--a .popover__body {
-    padding: var(--space-4) var(--space-5);
-    font-size: var(--text-sm);
-}
-
-.popover--c .popover__header,
-.popover--c .popover__footer,
-.popover--c .popover__body {
-    padding: var(--space-2) var(--space-3);
-    font-size: var(--text-xs);
-}
-
-/* ---------------------------------------------------------
-   13. POPOVER SEMANTICS
-   (Aligns with overlay-inline semantics)
---------------------------------------------------------- */
-
-.popover--info {
-    background-color: var(--semantic-info-bg);
-    color: var(--semantic-info-text);
-    border-color: var(--semantic-info-border);
-}
-
-.popover--success {
-    background-color: var(--semantic-success-bg);
-    color: var(--semantic-success-text);
-    border-color: var(--semantic-success-border);
-}
-
-.popover--warning {
-    background-color: var(--semantic-warning-bg);
-    color: var(--semantic-warning-text);
-    border-color: var(--semantic-warning-border);
-}
-
-.popover--danger {
-    background-color: var(--semantic-danger-bg);
-    color: var(--semantic-danger-text);
-    border-color: var(--semantic-danger-border);
-}
+.tooltip-trigger{align-items:center;display:inline-flex;position:relative}.tooltip{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);color:var(--color-text);font-size:var(--text-xs);line-height:1.4;max-width:24rem;opacity:0;padding:var(--space-2) var(--space-3);pointer-events:none;position:absolute;transform:translateY(.25rem);transition:opacity var(--transition-fast) var(--ease-out),transform var(--transition-fast) var(--ease-out);white-space:normal;z-index:var(--z-tooltip)}.tooltip--visible,.tooltip[data-state=open]{opacity:1;pointer-events:auto;transform:translateY(0)}.tooltip--top{bottom:100%;left:50%;transform:translate(-50%,-.25rem)}.tooltip--top.tooltip--visible,.tooltip--top[data-state=open]{transform:translate(-50%)}.tooltip--bottom{left:50%;top:100%;transform:translate(-50%,.25rem)}.tooltip--bottom.tooltip--visible,.tooltip--bottom[data-state=open]{transform:translate(-50%)}.tooltip--left{right:100%;top:50%;transform:translate(-.25rem,-50%)}.tooltip--left.tooltip--visible,.tooltip--left[data-state=open]{transform:translateY(-50%)}.tooltip--right{left:100%;top:50%;transform:translate(.25rem,-50%)}.tooltip--right.tooltip--visible,.tooltip--right[data-state=open]{transform:translateY(-50%)}.tooltip__arrow{background-color:inherit;border:inherit;border-left:none;border-top:none;height:var(--space-3);position:absolute;transform:rotate(45deg);width:var(--space-3)}.tooltip--top .tooltip__arrow{left:50%;top:100%;transform:translate(-50%,-50%) rotate(45deg)}.tooltip--bottom .tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%,50%) rotate(45deg)}.tooltip--left .tooltip__arrow{left:100%;top:50%;transform:translate(50%,-50%) rotate(45deg)}.tooltip--right .tooltip__arrow{right:100%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.tooltip--a{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.tooltip--c{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.tooltip--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.tooltip--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.tooltip--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.tooltip--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.popover-anchor{display:inline-block;position:relative}.popover{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-3);color:var(--color-text);display:flex;flex-direction:column;max-width:28rem;min-width:12rem;opacity:0;pointer-events:none;position:absolute;transform:translateY(.25rem);transition:opacity var(--transition-fast) var(--ease-out),transform var(--transition-fast) var(--ease-out);z-index:var(--z-tooltip)}.popover--open,.popover[data-state=open]{opacity:1;pointer-events:auto;transform:translateY(0)}.popover--top{bottom:100%;left:50%;transform:translate(-50%,-.25rem)}.popover--top.popover--open,.popover--top[data-state=open]{transform:translate(-50%)}.popover--bottom{left:50%;top:100%;transform:translate(-50%,.25rem)}.popover--bottom.popover--open,.popover--bottom[data-state=open]{transform:translate(-50%)}.popover--left{right:100%;top:50%;transform:translate(-.25rem,-50%)}.popover--left.popover--open,.popover--left[data-state=open]{transform:translateY(-50%)}.popover--right{left:100%;top:50%;transform:translate(.25rem,-50%)}.popover--right.popover--open,.popover--right[data-state=open]{transform:translateY(-50%)}.popover--bottom-right{right:0;top:100%;transform:translateY(.25rem)}.popover--bottom-right.popover--open,.popover--bottom-right[data-state=open]{transform:translateY(0)}.popover--bottom-left{left:0;top:100%;transform:translateY(.25rem)}.popover--bottom-left.popover--open,.popover--bottom-left[data-state=open]{transform:translateY(0)}.popover--top-right{bottom:100%;right:0;transform:translateY(-.25rem)}.popover--top-right.popover--open,.popover--top-right[data-state=open]{transform:translateY(0)}.popover--top-left{bottom:100%;left:0;transform:translateY(-.25rem)}.popover--top-left.popover--open,.popover--top-left[data-state=open]{transform:translateY(0)}.popover__arrow{background-color:inherit;border:inherit;border-left:none;border-top:none;height:var(--space-3);position:absolute;transform:rotate(45deg);width:var(--space-3)}.popover--bottom .popover__arrow,.popover--bottom-left .popover__arrow,.popover--bottom-right .popover__arrow{bottom:100%;left:var(--space-6);transform:translateY(50%) rotate(45deg)}.popover--top .popover__arrow,.popover--top-left .popover__arrow,.popover--top-right .popover__arrow{left:var(--space-6);top:100%;transform:translateY(-50%) rotate(45deg)}.popover--left .popover__arrow{left:100%;top:50%;transform:translate(50%,-50%) rotate(45deg)}.popover--right .popover__arrow{right:100%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.popover__footer,.popover__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-3) var(--space-4)}.popover__footer{border-bottom:none;border-top:1px solid var(--color-border-subtle);display:flex;gap:var(--space-2);justify-content:flex-end}.popover__body{padding:var(--space-3) var(--space-4)}.popover__title{font-size:var(--text-sm);font-weight:600}.popover--a .popover__body,.popover--a .popover__footer,.popover--a .popover__header{font-size:var(--text-sm);padding:var(--space-4) var(--space-5)}.popover--c .popover__body,.popover--c .popover__footer,.popover--c .popover__header{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}.popover--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.popover--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.popover--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.popover--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}

package/dist/components/typography.css

@@ -1,250 +1 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Typography System
- *
- *  Responsibilities:
- *    - Establish the full text scale, font stacks, weights, and line-heights
- *    - Style headings, paragraphs, blockquotes, pullquotes, lists, code, pre,
- *      tables, figures, captions, badges, and footnotes for rich prose
- *    - Provide consistent spacing rhythm and vertical flow for long-form
- *      documents and documentation environments
- *    - Ensure inline elements (code, links, emphasis, badges, refs) integrate
- *      cleanly inside the prose engine
- *
- *  System Notes:
- *    - 100% token-driven: text sizes, weights, radii, colors, spacing
- *    - Safe to embed within doc-block, authoring, and content-block systems
- *    - Code theming inherited from code tokens; tables align with tables.css
- *    - Designed for predictable behaviour across themes and reduced-motion
- ************************************************************/
-
-[data-vds-typography],
-.vds-typography {
-    --typography-code-block-border: var(--color-border-subtle);
-    --prose-table-cell-padding: var(--space-2);
-
-    --blockquote-border-width: 3px;
-    --pullquote-border-width: 3px;
-}
-
-.typography {
-    color: var(--color-text);
-    font-size: var(--text-base);
-    line-height: var(--line-height-normal);
-}
-
-.typography h1,
-.typography h2,
-.typography h3,
-.typography h4,
-.typography h5,
-.typography h6 {
-    font-family: var(--font-family-sans), sans-serif;
-    font-weight: 600;
-    color: var(--color-text);
-    margin-top: var(--space-8);
-    margin-bottom: var(--space-4);
-    line-height: var(--line-height-tight);
-}
-
-.typography h1:first-child,
-.typography h2:first-child,
-.typography h3:first-child,
-.typography h4:first-child,
-.typography h5:first-child,
-.typography h6:first-child {
-    margin-top: 0;
-}
-
-.typography h1 {
-    font-size: var(--text-4xl);
-}
-
-.typography h2 {
-    font-size: var(--text-3xl);
-}
-
-.typography h3 {
-    font-size: var(--text-2xl);
-}
-
-.typography h4 {
-    font-size: var(--text-xl);
-}
-
-.typography h5 {
-    font-size: var(--text-lg);
-}
-
-.typography h6 {
-    font-size: var(--text-base);
-}
-
-.typography p {
-    margin-top: var(--space-3);
-    margin-bottom: var(--space-3);
-}
-
-.typography strong {
-    font-weight: 600;
-}
-
-.typography em {
-    font-style: italic;
-}
-
-.typography code {
-    font-family: var(--font-family-mono), monospace;
-    font-size: 0.875em;
-    padding-left: var(--space-1);
-    padding-right: var(--space-1);
-    padding-top: 0.1em;
-    padding-bottom: 0.1em;
-    border-radius: var(--radius-sm);
-    background: var(--code-inline-bg);
-    border: 1px solid var(--code-inline-border);
-}
-
-.table code {
-    padding: 0 !important;
-    border: none !important;
-    background: none !important;
-    font-size: inherit !important;
-    line-height: inherit !important;
-}
-
-.typography pre {
-    font-family: var(--font-family-mono), monospace;
-    font-size: var(--text-sm);
-    background: var(--code-block-bg);
-    border: 1px solid var(--typography-code-block-border);
-    padding: var(--space-4);
-    border-radius: var(--radius-md);
-    overflow-x: auto;
-    margin-top: var(--space-4);
-    margin-bottom: var(--space-4);
-}
-
-.typography pre code {
-    background: none !important;
-    border: none !important;
-}
-
-.typography pre code {
-    padding: 0;
-    border-radius: 0;
-}
-
-.typography ul,
-.typography ol {
-    margin-top: var(--space-3);
-    margin-bottom: var(--space-3);
-    padding-left: var(--space-6);
-}
-
-.typography li {
-    margin-top: var(--space-1);
-    margin-bottom: var(--space-1);
-}
-
-.typography ul ul,
-.typography ol ol,
-.typography ul ol,
-.typography ol ul {
-    margin-top: var(--space-1);
-    margin-bottom: var(--space-1);
-}
-
-.typography blockquote {
-    margin-top: var(--space-6);
-    margin-bottom: var(--space-6);
-    padding-left: var(--space-4);
-    border-left: var(--blockquote-border-width) solid var(--blockquote-text);
-    color: var(--color-text-muted);
-    font-style: italic;
-}
-
-.typography .pullquote {
-    margin-top: var(--space-8);
-    margin-bottom: var(--space-8);
-    padding: var(--space-4);
-    border-left: var(--pullquote-border-width) solid var(--blockquote-border);
-    font-size: var(--text-xl);
-    line-height: var(--line-height-tight);
-}
-
-.typography figure {
-    margin-top: var(--space-6);
-    margin-bottom: var(--space-6);
-    text-align: center;
-}
-
-.typography figcaption {
-    margin-top: var(--space-2);
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-}
-
-.typography img {
-    max-width: 100%;
-    border-radius: var(--radius-md);
-}
-
-.typography table:not(.table) {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: var(--space-4);
-    margin-bottom: var(--space-4);
-    font-size: var(--text-sm);
-}
-
-.typography table:not(.table) th,
-.typography table:not(.table) td {
-    border-bottom: 1px solid var(--color-border-subtle);
-    padding: var(--prose-table-cell-padding);
-    text-align: left;
-}
-
-.typography table:not(.table) th {
-    font-weight: 600;
-    background: var(--color-surface-subtle);
-    color: var(--color-text);
-}
-
-.typography table:not(.table) caption {
-    text-align: left;
-    font-size: var(--text-sm);
-    color: var(--color-text-muted);
-    margin-bottom: var(--space-2);
-}
-
-.typography .badge-inline {
-    display: inline-block;
-    padding: 0 var(--space-2);
-    font-size: var(--text-xs);
-    background: var(--color-bg-soft);
-    border-radius: var(--radius-sm);
-    color: var(--color-text-muted);
-}
-
-.typography .footnotes {
-    margin-top: var(--space-8);
-    padding-top: var(--space-4);
-    font-size: var(--footnote-font-size);
-    color: var(--footnote-color);
-    border-top: 1px solid var(--color-border-subtle);
-}
-
-.typography .footnotes ol {
-    padding-left: var(--space-6);
-}
-
-.typography .fn-ref {
-    font-size: 0.75em;
-    vertical-align: super;
-}
-
-.typography .fn-backref {
-    margin-left: var(--space-2);
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
+.vds-typography,[data-vds-typography]{--typography-code-block-border:var(--color-border-subtle);--prose-table-cell-padding:var(--space-2);--blockquote-border-width:3px;--pullquote-border-width:3px}.typography{color:var(--color-text);font-size:var(--text-base);line-height:var(--line-height-normal)}.typography h1,.typography h2,.typography h3,.typography h4,.typography h5,.typography h6{color:var(--color-text);font-family:var(--font-family-sans),sans-serif;font-weight:600;line-height:var(--line-height-tight);margin-bottom:var(--space-4);margin-top:var(--space-8)}.typography h1:first-child,.typography h2:first-child,.typography h3:first-child,.typography h4:first-child,.typography h5:first-child,.typography h6:first-child{margin-top:0}.typography h1{font-size:var(--text-4xl)}.typography h2{font-size:var(--text-3xl)}.typography h3{font-size:var(--text-2xl)}.typography h4{font-size:var(--text-xl)}.typography h5{font-size:var(--text-lg)}.typography h6{font-size:var(--text-base)}.typography p{margin-bottom:var(--space-3);margin-top:var(--space-3)}.typography strong{font-weight:600}.typography em{font-style:italic}.typography code{background:var(--code-inline-bg);border:1px solid var(--code-inline-border);border-radius:var(--radius-sm);font-family:var(--font-family-mono),monospace;font-size:.875em;padding-bottom:.1em;padding-left:var(--space-1);padding-right:var(--space-1);padding-top:.1em}.table code{background:none!important;border:none!important;font-size:inherit!important;line-height:inherit!important;padding:0!important}.typography pre{background:var(--code-block-bg);border:1px solid var(--typography-code-block-border);border-radius:var(--radius-md);font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);margin-bottom:var(--space-4);margin-top:var(--space-4);overflow-x:auto;padding:var(--space-4)}.typography pre code{background:none!important;border:none!important;border-radius:0;padding:0}.typography ol,.typography ul{margin-bottom:var(--space-3);margin-top:var(--space-3);padding-left:var(--space-6)}.typography li,.typography ol ol,.typography ol ul,.typography ul ol,.typography ul ul{margin-bottom:var(--space-1);margin-top:var(--space-1)}.typography blockquote{border-left:var(--blockquote-border-width) solid var(--blockquote-text);color:var(--color-text-muted);font-style:italic;margin-bottom:var(--space-6);margin-top:var(--space-6);padding-left:var(--space-4)}.typography .pullquote{border-left:var(--pullquote-border-width) solid var(--blockquote-border);font-size:var(--text-xl);line-height:var(--line-height-tight);margin-bottom:var(--space-8);margin-top:var(--space-8);padding:var(--space-4)}.typography figure{margin-bottom:var(--space-6);margin-top:var(--space-6);text-align:center}.typography figcaption{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.typography img{border-radius:var(--radius-md);max-width:100%}.typography table:not(.table){border-collapse:collapse;font-size:var(--text-sm);margin-bottom:var(--space-4);margin-top:var(--space-4);width:100%}.typography table:not(.table) td,.typography table:not(.table) th{border-bottom:1px solid var(--color-border-subtle);padding:var(--prose-table-cell-padding);text-align:left}.typography table:not(.table) th{background:var(--color-surface-subtle);color:var(--color-text);font-weight:600}.typography table:not(.table) caption{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2);text-align:left}.typography .badge-inline{background:var(--color-bg-soft);border-radius:var(--radius-sm);color:var(--color-text-muted);display:inline-block;font-size:var(--text-xs);padding:0 var(--space-2)}.typography .footnotes{border-top:1px solid var(--color-border-subtle);color:var(--footnote-color);font-size:var(--footnote-font-size);margin-top:var(--space-8);padding-top:var(--space-4)}.typography .footnotes ol{padding-left:var(--space-6)}.typography .fn-ref{font-size:.75em;vertical-align:super}.typography .fn-backref{color:var(--color-text-muted);font-size:var(--text-xs);margin-left:var(--space-2)}