{
  "version": 1,
  "description": "Generated inventory of the Base CSS custom-property surface. Each variable records factual Base architecture and usage. variableType describes provenance: System values are immutable framework or platform truths; Enum values are authored reusable vocabulary; Roots are independent semantic theme-author decisions; Derived values are deterministic semantic calculations; Inherited values are exact semantic mappings. designType classifies the kind of design decision represented by the value. references, inheritsFrom, and derivedFrom describe relationships between QP variables. consumedBy identifies Base source files that directly consume the variable. cssProperties identifies the CSS properties that directly consume the variable in Base; an empty cssProperties array means no direct CSS-property consumer was proven. CSS property names and value syntax follow the CSS platform rather than QP-specific rules. Consumers may use authoritative CSS references such as MDN to inspect the valid syntax and supported values for each cssProperties entry.",
  "sourceRoot": "themes/qp-base",
  "designTypes": {
    "background": {
      "title": "Background",
      "description": "Document-level background treatments that coordinate the canvas color, imagery, repetition, and scale.",
      "variableOrder": "alphabetical"
    },
    "border": {
      "title": "Border",
      "description": "Complete edge treatments that coordinate border width, style, and color as one authored decision.",
      "variableOrder": "alphabetical"
    },
    "border-width": {
      "title": "Border Width",
      "description": "Authored edge thicknesses used where border and focus geometry can vary independently from color.",
      "variableOrder": "alphabetical"
    },
    "color": {
      "title": "Color",
      "description": "Authored color vocabulary and coordinated semantic foreground, surface, edge, interaction, and state decisions. QP components often consume these semantic colors directly, so document-level CSS inheritance alone does not establish a complete theme palette.",
      "variableOrder": "alphabetical"
    },
    "effect": {
      "title": "Effect",
      "description": "Complete visual-processing recipes for architectural surfaces where compositing is an intentional theme decision.",
      "variableOrder": "alphabetical"
    },
    "font-family": {
      "title": "Font Family",
      "description": "Typeface families that establish the document, heading, code, and component voices of a theme.",
      "variableOrder": "alphabetical"
    },
    "font-size": {
      "title": "Font Size",
      "description": "The responsive type scale and semantic mappings that establish readable hierarchy across QP content and controls.",
      "variableOrder": "sortOrder"
    },
    "font-weight": {
      "title": "Font Weight",
      "description": "Canonical emphasis levels and semantic mappings that establish typographic hierarchy across QP content and controls.",
      "variableOrder": "sortOrder"
    },
    "layer": {
      "title": "Layer",
      "description": "Framework-owned semantic z-index floors that divide global stacking into architectural airspace rather than providing general-purpose tokens. Ordinary content and theme composition normally use document order, local stacking contexts, or explicit values below the persistent floor (currently 0–99). Consuming a system floor assigns interface to that QP-managed stratum; CSS behavior such as position: sticky does not do so by itself. The gaps between floors allow small local adjustments within an assigned stratum without crossing into another one.",
      "variableOrder": "alphabetical"
    },
    "layout": {
      "title": "Layout",
      "description": "Authorable composition choices that determine how QP structures arrange content. Excludes required mechanics, containment, and intrinsic responsive behavior.",
      "variableOrder": "alphabetical"
    },
    "line-height": {
      "title": "Line Height",
      "description": "Text-rhythm decisions and semantic mappings that establish readable line spacing across document and component typography.",
      "variableOrder": "alphabetical"
    },
    "radius": {
      "title": "Radius",
      "description": "Canonical rounding magnitudes and semantic mappings for surfaces, controls, focus treatments, and media. Intrinsic circles and pills remain local.",
      "variableOrder": "sortOrder"
    },
    "shadow": {
      "title": "Shadow",
      "description": "Complete elevation recipes and semantic mappings that establish surface separation and interaction depth. Optical and legibility shadows remain local.",
      "variableOrder": "alphabetical"
    },
    "size": {
      "title": "Size",
      "description": "Meaningful dimensions, capacity limits, and proportions that alter the scale or composition of QP elements. Excludes typography, intrinsic sizing, defensive constraints, and fixed responsive mechanics.",
      "variableOrder": "alphabetical"
    },
    "spacing": {
      "title": "Spacing",
      "description": "Spatial rhythm and independently authorable spacing relationships that control the density and separation of QP compositions.",
      "variableOrder": "sortOrder"
    }
  },
  "guidance": {
    "cssProperties": {
      "qpRecommends": "Treat cssProperties as observed Base usage, not a complete list of theoretically compatible CSS properties. Each entry identifies a CSS property that directly consumes the variable in Base. An empty array means no direct CSS-property consumer was proven; the variable may still participate through other QP variables. Use authoritative CSS references such as MDN to determine the valid syntax and supported values for a listed CSS property."
    },
    "scopedVariableOverrides": {
      "qpRecommends": "Prefer modifying CSS properties directly over overriding QP variables within scoped selectors. Use scoped variable overrides when a change intentionally coordinates multiple descendant consumers or carries shared inherited context. For configurable color, size, spacing, and other design values, prefer an explicit alternate Theme variable applied by the selector."
    },
    "coordinatedColorDecisions": {
      "qpRecommends": "Treat foundational foreground and surface colors as a coordinated theme system. QP components often consume semantic Theme variables directly, so changing a container color or background does not necessarily recolor its descendants. When changing the document canvas or ordinary surfaces, review primary, strong, muted, inverse, and heading foregrounds together with ordinary, muted, hover, and overlay surfaces. Use local CSS for image-dependent overlay contrast, but do not rely on body color inheritance as a substitute for declaring the theme’s ordinary semantic color decisions."
    }
  },
  "owners": {
    "Card": {
      "description": "Base theme variables owned by the Card architecture key.",
      "architectureKey": "Card",
      "variables": {
        "--qp-card-background": {
          "description": "Uses the canvas color for card background, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-card-background--alternate": {
          "description": "Uses the subtle surface color for card background in its alternate state, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-card-border-color--alternate": {
          "description": "Uses the strong edge color for card border color in its alternate state, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-card-border-color--hover": {
          "description": "Uses the strong edge color for card border color in its hover state, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-card-focus-color": {
          "description": "Uses the primary accent color for card focus color, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-card-focus-width": {
          "description": "Uses the standard focus thickness for card focus width, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "outline"
          ],
          "inheritsFrom": "--qp-focus-width",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ]
        },
        "--qp-card-icon-radius": {
          "description": "Uses the compact rounding for card icon radius, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-sm)",
          "inheritsFrom": "--qp-radius-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-card-icon-size": {
          "description": "Choose the physical prominence of Card icon containers.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "flex",
            "height",
            "width"
          ]
        },
        "--qp-card-shadow": {
          "description": "Uses the standard raised-content elevation for card shadow, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-raised-content-shadow)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-raised-content-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-raised-content-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "box-shadow"
          ],
          "inheritsFrom": "--qp-raised-content-shadow",
          "references": [
            {
              "name": "--qp-raised-content-shadow"
            }
          ]
        },
        "--qp-card-text-color": {
          "description": "Uses the primary foreground color for card text color, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-card-title-font-size": {
          "description": "Uses the large type level for card title font size, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-lg)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "inheritsFrom": "--qp-font-size-lg",
          "references": [
            {
              "name": "--qp-font-size-lg"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-card-title-row-justify": {
          "description": "Choose how Card titles and optional icons share horizontal space.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "flex-start",
          "source": "variables.css",
          "definitions": [
            {
              "value": "flex-start",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "justify-content"
          ]
        },
        "--qp-card__body-text-color": {
          "description": "Uses the primary foreground color for card body text color, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-card__icon-background": {
          "description": "Uses the subtle surface color for card icon background, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-card__icon-text-color": {
          "description": "Uses the strong foreground color for card icon text color, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-card__subtitle-text-color": {
          "description": "Uses the muted foreground color for card subtitle text color, with semantic remapping for Card-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-card__title-text-color": {
          "description": "Uses the theme's heading color for  card__title text color, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-heading-text-color)",
          "inheritsFrom": "--qp-heading-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-heading-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-heading-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-heading-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-card-icon-glyph-size": {
          "description": "Choose the visual scale of glyphs inside Card icon containers.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "1.25rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.25rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "font-size"
          ]
        }
      }
    },
    "CardList": {
      "description": "Base theme variables owned by the CardList architecture key.",
      "architectureKey": "CardList",
      "variables": {
        "--qp-card-list-gap": {
          "description": "Uses the large spatial rhythm for card list gap, with semantic remapping for CardList-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 8,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-card-list-margin": {
          "description": "Calculates trailing CardList separation from large spatial rhythm so lists participate in document cadence without leading space.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 9,
          "derivedFrom": "--qp-space-lg",
          "defaultValue": "0 0 var(--qp-space-lg)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "0 0 var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "margin"
          ]
        },
        "--qp-card-list-min-column-width": {
          "description": "Choose the minimum useful Card column measure before a CardList reflows.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "15.625rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "15.625rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css"
          ],
          "cssProperties": [
            "grid-template-columns"
          ]
        }
      }
    },
    "Cta": {
      "description": "Base theme variables owned by the Cta architecture key.",
      "architectureKey": "Cta",
      "variables": {
        "--qp-cta-background": {
          "description": "Uses the primary accent color for CTA background, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-cta-background--alternate": {
          "description": "Uses the framework-defined transparent color for CTA background in its alternate state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-cta-background--alternate-hover": {
          "description": "Uses the light accent color for CTA background in its alternate hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-cta-background--hover": {
          "description": "Uses the strong foreground color for CTA background in its hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-cta-border-color": {
          "description": "Uses the primary accent color for CTA border color, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-cta-border-color--alternate": {
          "description": "Uses the muted foreground color for CTA border color in its alternate state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-cta-border-color--alternate-hover": {
          "description": "Uses the primary foreground color for CTA border color in its alternate hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-cta-border-color--hover": {
          "description": "Uses the strong foreground color for CTA border color in its hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-cta-border-width": {
          "description": "Uses the standard border thickness for CTA border width, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-border-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "inheritsFrom": "--qp-border-width",
          "references": [
            {
              "name": "--qp-border-width"
            }
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-cta-focus-color": {
          "description": "Uses the primary accent color for CTA focus color, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-cta-focus-width": {
          "description": "Uses the standard focus thickness for CTA focus width, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "outline"
          ],
          "inheritsFrom": "--qp-focus-width",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ]
        },
        "--qp-cta-font-weight": {
          "description": "Uses the bold emphasis weight for CTA font weight, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-bold)",
          "inheritsFrom": "--qp-font-weight-bold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-bold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-bold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-bold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-cta-gap": {
          "description": "Uses the small spatial rhythm for CTA gap, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 10,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-cta-margin": {
          "description": "Calculates vertical CTA separation from base spatial rhythm so actions participate consistently in document cadence.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 11,
          "defaultValue": "var(--qp-space-md) 0",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-space-md) 0",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "derivedFrom": "--qp-space-md",
          "cssProperties": [
            "margin"
          ]
        },
        "--qp-cta-max-width": {
          "description": "Choose the maximum horizontal prominence of CTA controls.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "100%",
          "source": "variables.css",
          "definitions": [
            {
              "value": "100%",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-cta-min-height": {
          "description": "Choose the minimum interactive height of CTA controls.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.625rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.625rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "min-height"
          ]
        },
        "--qp-cta-padding-block": {
          "description": "Uses the standard control density for CTA padding block, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 12,
          "defaultValue": "var(--qp-control-padding-block-md)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-block-md",
          "references": [
            {
              "name": "--qp-control-padding-block-md"
            }
          ]
        },
        "--qp-cta-padding-inline": {
          "description": "Choose the horizontal emphasis and label breathing room of CTA controls.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 13,
          "defaultValue": "1.1rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.1rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-cta-radius": {
          "description": "Uses the standard rounding for CTA radius, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-cta-shadow": {
          "description": "Choose the resting depth treatment that establishes the primary CTA interaction language.",
          "variableType": "root",
          "designType": "shadow",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/cta.css",
            "variables.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-cta-shadow--alternate": {
          "description": "Uses the CTA shadow for CTA shadow in its alternate state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-cta-shadow)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-cta-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-cta-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "box-shadow"
          ],
          "inheritsFrom": "--qp-cta-shadow",
          "references": [
            {
              "name": "--qp-cta-shadow"
            }
          ]
        },
        "--qp-cta-shadow--alternate-hover": {
          "description": "Choose whether alternate CTAs gain a distinct elevation treatment during interaction.",
          "variableType": "root",
          "designType": "shadow",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-cta-shadow--hover": {
          "description": "Uses the CTA shadow for CTA shadow in its hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-cta-shadow)",
          "inheritsFrom": "--qp-cta-shadow",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-cta-shadow"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-cta-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-cta-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-cta-text-color": {
          "description": "Uses the canvas color for CTA text color, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-cta-text-color--alternate": {
          "description": "Uses the primary accent color for CTA text color in its alternate state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-cta-text-color--alternate-hover": {
          "description": "Uses the strong foreground color for CTA text color in its alternate hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-cta-text-color--hover": {
          "description": "Uses the canvas color for CTA text color in its hover state, with semantic remapping for CTA-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/cta.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "DocumentFoundation": {
      "description": "Global document, heading, prose, link, focus, and selection values consumed by base.css.",
      "variables": {
        "--qp-document-background-color": {
          "description": "Chooses the document canvas color beneath QP content. Coordinate it with ordinary and alternate surface colors and their foregrounds; changing inherited document color alone does not update components that consume semantic colors directly.",
          "variableType": "root",
          "designType": "background",
          "defaultValue": "var(--qp-color-white)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-white"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-white)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-white"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "background",
            "background-color"
          ]
        },
        "--qp-document-background-image": {
          "description": "Choose optional artwork, texture, photography, or gradients for the document canvas.",
          "variableType": "root",
          "designType": "background",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "background-image"
          ]
        },
        "--qp-document-background-repeat": {
          "description": "Choose how document background artwork tiles across the canvas.",
          "variableType": "root",
          "designType": "background",
          "defaultValue": "repeat",
          "source": "variables.css",
          "definitions": [
            {
              "value": "repeat",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "background-repeat"
          ]
        },
        "--qp-document-background-size": {
          "description": "Choose how document background artwork is scaled across the canvas.",
          "variableType": "root",
          "designType": "background",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "background-size"
          ]
        },
        "--qp-document-focus-outline": {
          "description": "Calculates the document focus outline from the authored focus width and accent color.",
          "variableType": "derived",
          "designType": "border",
          "derivedFrom": [
            "--qp-focus-width",
            "--qp-accent-color"
          ],
          "defaultValue": "var(--qp-focus-width) solid var(--qp-accent-color)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-focus-width"
            },
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-focus-width) solid var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                },
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-document-focus-radius": {
          "description": "Uses the compact rounding for document focus radius, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-sm)",
          "inheritsFrom": "--qp-radius-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-document-font-size": {
          "description": "Uses the body type level for document font size, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-md)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "inheritsFrom": "--qp-font-size-md",
          "references": [
            {
              "name": "--qp-font-size-md"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-document-text-color": {
          "description": "Uses the primary foreground color for document text color, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-document__selection-background": {
          "description": "Uses the platform selection highlight for document selection background, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-highlight)",
          "inheritsFrom": "--qp-system-color-highlight",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-highlight"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-highlight)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-highlight"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-document__selection-text-color": {
          "description": "Uses the platform selection text color for document selection text color, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-highlight-text)",
          "inheritsFrom": "--qp-system-color-highlight-text",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-highlight-text"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-highlight-text)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-highlight-text"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-heading-1-line-height": {
          "description": "Uses the heading text rhythm for heading 1 line height, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "line-height",
          "defaultValue": "var(--qp-heading-line-height)",
          "inheritsFrom": "--qp-heading-line-height",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-heading-line-height"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-heading-line-height)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-heading-line-height"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-heading-1-size": {
          "description": "Uses the major-heading type level for heading 1 size, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-2xl)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-2xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-2xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "inheritsFrom": "--qp-font-size-2xl",
          "references": [
            {
              "name": "--qp-font-size-2xl"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-heading-2-size": {
          "description": "Uses the extra-large type level for heading 2 size, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-xl)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "inheritsFrom": "--qp-font-size-xl",
          "references": [
            {
              "name": "--qp-font-size-xl"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-heading-3-size": {
          "description": "Uses the large type level for heading 3 size, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-lg)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "inheritsFrom": "--qp-font-size-lg",
          "references": [
            {
              "name": "--qp-font-size-lg"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-heading-font-family": {
          "description": "Uses the document typeface for heading font family, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-family",
          "defaultValue": "var(--qp-document-font-family)",
          "inheritsFrom": "--qp-document-font-family",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-document-font-family"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-document-font-family)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-document-font-family"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "font-family"
          ]
        },
        "--qp-heading-font-weight": {
          "description": "Uses the bold emphasis weight for heading font weight, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-bold)",
          "inheritsFrom": "--qp-font-weight-bold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-bold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-bold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-bold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-heading-line-height": {
          "description": "Choose the shared vertical rhythm for document headings.",
          "variableType": "root",
          "designType": "line-height",
          "defaultValue": "1.2",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.2",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css",
            "variables.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-heading-text-color": {
          "description": "Chooses the standard heading foreground consumed directly by QP headings. Coordinate it with the surfaces headings occupy; changing body color does not necessarily change this value.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-ink-dark)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink-dark"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-ink-dark)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink-dark"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css",
            "variables.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-heading-text-color--primary": {
          "description": "Uses the theme's heading color for  heading text color  primary, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-heading-text-color)",
          "inheritsFrom": "--qp-heading-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-heading-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-heading-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-heading-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-link-text-color": {
          "description": "Chooses the ordinary link color independently from other interactive emphasis.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-blue)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-blue"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-blue)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-blue"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css",
            "variables.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-link-text-color--hover": {
          "description": "Uses the strong foreground color for link text color in its hover state, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-link-text-color--visited": {
          "description": "Derives the visited-link color from the ordinary link decision so link identity remains coordinated across states.",
          "variableType": "derived",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-link-text-color), black 18%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-link-text-color"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-link-text-color), black 18%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-link-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ],
          "derivedFrom": "--qp-link-text-color"
        },
        "--qp-prose__link-text-color": {
          "description": "Uses the primary accent color for prose link text color, with semantic remapping for DocumentFoundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-document-font-family": {
          "description": "Establish the primary typeface for document content and inheriting interface text.",
          "variableType": "root",
          "designType": "font-family",
          "defaultValue": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
          "source": "variables.css",
          "definitions": [
            {
              "value": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css",
            "variables.css"
          ],
          "cssProperties": [
            "font-family"
          ]
        },
        "--qp-code-font-family": {
          "description": "Establish the monospace typeface for code and technical reference content.",
          "variableType": "root",
          "designType": "font-family",
          "defaultValue": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
          "source": "variables.css",
          "definitions": [
            {
              "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "font-family"
          ]
        },
        "--qp-font-size-xs": {
          "description": "Establish the smallest canonical type level for compact metadata and tertiary labels.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "0.8125rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.8125rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "sortOrder": 1,
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-font-size-sm": {
          "description": "Establish the small canonical type level for captions, secondary text, and compact controls.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "0.9375rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.9375rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/menu.css",
            "styles/product-list.css",
            "variables.css"
          ],
          "sortOrder": 2,
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-font-size-md": {
          "description": "Establish the standard canonical type level for body copy and ordinary controls.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "1rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-header.css",
            "variables.css"
          ],
          "sortOrder": 3,
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-font-size-lg": {
          "description": "Establish the large canonical type level for component titles and modest emphasis.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "sortOrder": 4,
          "cssProperties": []
        },
        "--qp-font-size-xl": {
          "description": "Establish the extra-large canonical type level for section headings and prominent content titles.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "clamp(1.375rem, 1.15rem + 1vw, 1.75rem)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "clamp(1.375rem, 1.15rem + 1vw, 1.75rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "sortOrder": 5,
          "cssProperties": []
        },
        "--qp-font-size-2xl": {
          "description": "Establish the major-heading canonical type level for document-level hierarchy.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "clamp(1.75rem, 1.35rem + 2vw, 2.5rem)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "clamp(1.75rem, 1.35rem + 2vw, 2.5rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "sortOrder": 6,
          "cssProperties": []
        },
        "--qp-font-size-3xl": {
          "description": "Establish the display canonical type level for responsive PageHeader typography.",
          "variableType": "root",
          "designType": "font-size",
          "defaultValue": "clamp(2.25rem, 1.35rem + 4vw, 4.5rem)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "clamp(2.25rem, 1.35rem + 4vw, 4.5rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "sortOrder": 7,
          "cssProperties": []
        },
        "--qp-font-weight-regular": {
          "description": "Establish the canonical regular weight for ordinary reading text.",
          "variableType": "root",
          "designType": "font-weight",
          "defaultValue": "400",
          "source": "variables.css",
          "definitions": [
            {
              "value": "400",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "sortOrder": 1,
          "consumedBy": [
            "styles/base.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-font-weight-medium": {
          "description": "Establish the canonical medium weight for moderate interface emphasis.",
          "variableType": "root",
          "designType": "font-weight",
          "defaultValue": "500",
          "source": "variables.css",
          "definitions": [
            {
              "value": "500",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "sortOrder": 2,
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-font-weight-semibold": {
          "description": "Establish the canonical semibold weight for navigation, actions, and labels.",
          "variableType": "root",
          "designType": "font-weight",
          "defaultValue": "600",
          "source": "variables.css",
          "definitions": [
            {
              "value": "600",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "sortOrder": 3,
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-font-weight-bold": {
          "description": "Establish the canonical bold weight for headings and strong emphasis.",
          "variableType": "root",
          "designType": "font-weight",
          "defaultValue": "700",
          "source": "variables.css",
          "definitions": [
            {
              "value": "700",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "sortOrder": 4,
          "consumedBy": [
            "styles/modal.css",
            "variables.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        }
      }
    },
    "Foundation": {
      "description": "Shared Base typography, color, shape, spacing, layering, and layout vocabulary.",
      "variables": {
        "--qp-background": {
          "description": "Chooses the ordinary component surface color used throughout QP. Coordinate it with primary, strong, muted, and inverse foreground decisions because components consume those semantic colors directly rather than relying only on CSS inheritance.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-white)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-white"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-white)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-white"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-border-color": {
          "description": "Chooses the standard edge color for ordinary bordered surfaces.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-mist)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-mist"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-mist)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-mist"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-border-color--strong": {
          "description": "Chooses the stronger edge color used for emphasized separation.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-mist-dark)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-mist-dark"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-mist-dark)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-mist-dark"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-color-blue": {
          "description": "Provides the Base blue value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "#2563eb",
          "source": "variables.css",
          "definitions": [
            {
              "value": "#2563eb",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-blue-light": {
          "description": "Provides the lighter Base blue value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-color-blue), white 82%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-blue"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-color-blue), white 82%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-blue"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-ink": {
          "description": "Provides the Base near-black ink value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "#111827",
          "source": "variables.css",
          "definitions": [
            {
              "value": "#111827",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-ink-dark": {
          "description": "Provides the darker Base ink value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-color-ink), black 24%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-color-ink), black 24%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-ink-soft": {
          "description": "Provides the softer Base ink value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-color-ink), white 28%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-color-ink), white 28%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-white": {
          "description": "Provides white in the Base authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "#ffffff",
          "source": "variables.css",
          "definitions": [
            {
              "value": "#ffffff",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-mist": {
          "description": "Provides the Base pale neutral mist value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "#e5e7eb",
          "source": "variables.css",
          "definitions": [
            {
              "value": "#e5e7eb",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-mist-dark": {
          "description": "Provides the darker Base mist value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-color-mist), black 10%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-mist"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-color-mist), black 10%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-mist"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-mist-light": {
          "description": "Provides the lighter Base mist value in the authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "color-mix(in oklch, var(--qp-color-mist), white 68%)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-mist"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in oklch, var(--qp-color-mist), white 68%)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-mist"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-color-black": {
          "description": "Provides black in the Base authored Color vocabulary.",
          "variableType": "enum",
          "designType": "color",
          "defaultValue": "#000000",
          "source": "variables.css",
          "definitions": [
            {
              "value": "#000000",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-focus-color": {
          "description": "Chooses the visible focus color used across QP interaction surfaces.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-blue)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-blue"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-blue)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-blue"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-grid-gap": {
          "description": "Uses the large spatial rhythm for grid gap, with semantic remapping for Foundation-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 7,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "cssProperties": []
        },
        "--qp-system-layer-modal": {
          "description": "Defines the 300–399 floor for QP-managed modal and takeover interface, demonstrated by Modal and Lightbox. Components assigned here may use small local increments without crossing into system-feedback airspace.",
          "variableType": "system",
          "designType": "layer",
          "defaultValue": "300",
          "source": "variables.css",
          "definitions": [
            {
              "value": "300",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/lightbox.css",
            "styles/modal.css"
          ],
          "cssProperties": [
            "z-index"
          ]
        },
        "--qp-system-layer-overlay": {
          "description": "Defines the reserved 200–299 floor for QP-managed temporary overlays above persistent interface. Base currently has no established direct consumer; the floor remains architectural airspace rather than a generic z-index token.",
          "variableType": "system",
          "designType": "layer",
          "defaultValue": "200",
          "source": "variables.css",
          "definitions": [
            {
              "value": "200",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": []
        },
        "--qp-system-layer-persistent": {
          "description": "Defines the 100–199 floor for QP-managed persistent interface, demonstrated by StickyTray. Persistent is an architectural role, while sticky is only a CSS behavior; theme-authored sticky content normally remains below this floor.",
          "variableType": "system",
          "designType": "layer",
          "defaultValue": "100",
          "source": "variables.css",
          "definitions": [
            {
              "value": "100",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css",
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "z-index"
          ]
        },
        "--qp-system-layer-system": {
          "description": "Defines the 400-and-above floor for QP-managed transient system feedback, demonstrated by Toast. This highest stratum is reserved for interface that must remain visible above ordinary interactive layers.",
          "variableType": "system",
          "designType": "layer",
          "defaultValue": "400",
          "source": "variables.css",
          "definitions": [
            {
              "value": "400",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "z-index"
          ]
        },
        "--qp-line-body": {
          "description": "Choose the default vertical rhythm for body copy and ordinary readable text.",
          "variableType": "root",
          "designType": "line-height",
          "defaultValue": "1.5",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.5",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/base.css",
            "variables.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-radius-lg": {
          "description": "Establish prominent rounding for cards, panels, and major containers.",
          "variableType": "root",
          "designType": "radius",
          "defaultValue": "0.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/page-section.css",
            "variables.css"
          ],
          "sortOrder": 4,
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-radius-md": {
          "description": "Establish standard rounding for ordinary controls, media, and surfaces.",
          "variableType": "root",
          "designType": "radius",
          "defaultValue": "0.5rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.5rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css",
            "variables.css"
          ],
          "sortOrder": 3,
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-radius-sm": {
          "description": "Establish compact rounding for controls and subtle surface treatment.",
          "variableType": "root",
          "designType": "radius",
          "defaultValue": "0.375rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.375rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css",
            "variables.css"
          ],
          "sortOrder": 2,
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-space-lg": {
          "description": "Derives large spacing from the base spatial rhythm to keep prominent component spacing proportional.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 4,
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(var(--qp-space-md) * 1.5)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(var(--qp-space-md) * 1.5)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/image.css",
            "styles/page-section.css",
            "styles/video.css",
            "variables.css"
          ],
          "cssProperties": [
            "margin",
            "margin-block-start",
            "padding-block",
            "padding-inline"
          ]
        },
        "--qp-space-md": {
          "description": "Choose the base unit that controls QP’s overall spatial density.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 3,
          "defaultValue": "1rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-header.css",
            "variables.css"
          ],
          "cssProperties": [
            "margin"
          ]
        },
        "--qp-space-sm": {
          "description": "Derives small spacing from the base spatial rhythm to keep compact relationships proportional.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 2,
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(var(--qp-space-md) * .5)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(var(--qp-space-md) * .5)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/page-list.css",
            "styles/page-section.css",
            "styles/site-header.css",
            "styles/sticky-tray.css",
            "variables.css"
          ],
          "cssProperties": [
            "gap",
            "margin",
            "margin-block-start",
            "padding"
          ]
        },
        "--qp-space-xl": {
          "description": "Derives extra-large spacing from the base spatial rhythm to keep section-scale separation proportional.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 5,
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(var(--qp-space-md) * 2)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(var(--qp-space-md) * 2)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-space-xs": {
          "description": "Derives extra-small spacing from the base spatial rhythm to keep tightly related content proportional.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 1,
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(var(--qp-space-md) * .25)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(var(--qp-space-md) * .25)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/menu.css",
            "styles/toc.css",
            "variables.css"
          ],
          "cssProperties": [
            "gap",
            "padding"
          ]
        },
        "--qp-surface-background--hover": {
          "description": "Chooses the ordinary hover surface used by interactive components. Coordinate it with the corresponding interactive foreground and focus decisions so hover remains visibly distinct and readable.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-blue-light)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-blue-light"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-blue-light)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-blue-light"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-surface-background--muted": {
          "description": "Chooses the subdued supporting surface used by alternate and muted UI. Pair it with foreground colors that remain legible when QP components consume their semantic text variables directly.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-mist-light)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-mist-light"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-mist-light)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-mist-light"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-text-color": {
          "description": "Chooses the ordinary readable foreground consumed directly by QP components. Coordinate it with the document canvas and ordinary surface colors; setting body color alone does not replace this theme decision.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-ink)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-ink)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-text-color--disabled": {
          "description": "Uses the muted foreground color for text color in its disabled state, with semantic remapping for Foundation-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "cssProperties": []
        },
        "--qp-text-color--inverse": {
          "description": "Chooses the foreground for surfaces where the ordinary contrast relationship is reversed, including strong, accent, and overlay contexts that inherit this decision. Coordinate it with those surfaces instead of assuming white or document-level inheritance.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-white)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-white"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-white)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-white"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-text-color--muted": {
          "description": "Chooses the secondary foreground consumed directly for captions, metadata, and supporting content. It must remain legible against the theme’s ordinary and muted surfaces rather than merely appear visually quieter.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-ink-soft)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink-soft"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-ink-soft)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink-soft"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-text-color--strong": {
          "description": "Chooses the stronger foreground consumed by headings and emphasized component content. Coordinate it with every ordinary and alternate surface on which strong content appears.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-ink-dark)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-ink-dark"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-ink-dark)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-ink-dark"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-system-color-transparent": {
          "description": "Represents complete transparency independently from the authored palette.",
          "variableType": "system",
          "designType": "color",
          "defaultValue": "transparent",
          "source": "variables.css",
          "definitions": [
            {
              "value": "transparent",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-system-color-highlight": {
          "description": "Provides the browser or operating-system highlight color for selected content.",
          "variableType": "system",
          "designType": "color",
          "defaultValue": "Highlight",
          "source": "variables.css",
          "definitions": [
            {
              "value": "Highlight",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-system-color-highlight-text": {
          "description": "Provides the browser or operating-system text color for selected content.",
          "variableType": "system",
          "designType": "color",
          "defaultValue": "HighlightText",
          "source": "variables.css",
          "definitions": [
            {
              "value": "HighlightText",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-system-radius-none": {
          "description": "Represents the intrinsic absence of rounding independently from the authored radius scale.",
          "variableType": "system",
          "designType": "radius",
          "sortOrder": 1,
          "defaultValue": "0",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-system-space-none": {
          "description": "Represents the canonical absence of spacing for semantic relationships that resolve to zero.",
          "variableType": "system",
          "designType": "spacing",
          "sortOrder": 6,
          "defaultValue": "0",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-border-width": {
          "description": "Choose the standard thickness of ordinary QP edges.",
          "variableType": "root",
          "designType": "border-width",
          "defaultValue": "1px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css",
            "variables.css"
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-border": {
          "description": "Calculates the standard complete border from the ordinary border width and edge color.",
          "variableType": "derived",
          "designType": "border",
          "defaultValue": "var(--qp-border-width) solid var(--qp-border-color)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border-width) solid var(--qp-border-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-width"
                },
                {
                  "name": "--qp-border-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/card-list.css",
            "styles/page-section.css",
            "styles/site-header.css",
            "styles/sticky-tray.css",
            "styles/toc.css",
            "variables.css"
          ],
          "references": [
            {
              "name": "--qp-border-width"
            },
            {
              "name": "--qp-border-color"
            }
          ],
          "cssProperties": [
            "border",
            "border-bottom",
            "border-inline-start"
          ],
          "derivedFrom": [
            "--qp-border-width",
            "--qp-border-color"
          ]
        },
        "--qp-control-padding-block-sm": {
          "description": "Choose the compact block-axis density used by navigation, search, and similar controls.",
          "variableType": "root",
          "designType": "spacing",
          "defaultValue": "0.625rem",
          "sortOrder": 4,
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.625rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-control-padding-block-md": {
          "description": "Choose the ordinary block-axis density used by action controls and control-like bars.",
          "variableType": "root",
          "designType": "spacing",
          "defaultValue": "0.7rem",
          "sortOrder": 5,
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.7rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-control-padding-inline": {
          "description": "Choose the standard horizontal breathing room for compact navigation, search, and TOC controls.",
          "variableType": "root",
          "designType": "spacing",
          "defaultValue": "0.75rem",
          "sortOrder": 7,
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-surface-padding-inline": {
          "description": "Choose the default responsive inline safe area inside major QP surfaces.",
          "variableType": "root",
          "designType": "spacing",
          "defaultValue": "clamp(1rem, 4vw, 2rem)",
          "sortOrder": 8,
          "source": "variables.css",
          "definitions": [
            {
              "value": "clamp(1rem, 4vw, 2rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-subtitle-max-width": {
          "description": "Choose the standard readable measure for explanatory subtitles across major QP compositions.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "48rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "48rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-focus-width": {
          "description": "Choose the standard visible focus-indicator thickness across QP controls and surfaces.",
          "variableType": "root",
          "designType": "border-width",
          "defaultValue": "2px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-raised-content-shadow": {
          "description": "Establish the standard elevation treatment for raised content surfaces and framed media.",
          "variableType": "root",
          "designType": "shadow",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-accent-color": {
          "description": "Chooses the primary accent color that carries theme identity and interactive emphasis.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-blue)",
          "definitions": [
            {
              "value": "var(--qp-color-blue)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-blue"
                }
              ]
            }
          ],
          "consumedBy": [
            "variables.css"
          ],
          "cssProperties": [],
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-blue"
            }
          ]
        },
        "--qp-border--strong": {
          "description": "Calculates the strong complete border from the ordinary border width and emphasized edge color.",
          "variableType": "derived",
          "designType": "border",
          "derivedFrom": [
            "--qp-border-width",
            "--qp-border-color--strong"
          ],
          "defaultValue": "var(--qp-border-width) solid var(--qp-border-color--strong)",
          "definitions": [
            {
              "value": "var(--qp-border-width) solid var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-width"
                },
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "cssProperties": [],
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-width"
            },
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "consumedBy": [
            "variables.css"
          ]
        },
        "--qp-text-color--inverse-muted": {
          "description": "Chooses the subdued foreground color used for secondary information on inverse or dark surfaces.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "color-mix(in srgb, var(--qp-color-white) 72%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-white"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in srgb, var(--qp-color-white) 72%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-white"
                }
              ]
            }
          ],
          "cssProperties": [],
          "consumedBy": [
            "variables.css"
          ]
        }
      }
    },
    "Gallery": {
      "description": "Base theme variables owned by the Gallery architecture key.",
      "architectureKey": "Gallery",
      "variables": {
        "--qp-gallery-caption-radius": {
          "description": "Uses the framework-defined absence of rounding for gallery caption radius, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-system-radius-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-radius-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-radius-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "inheritsFrom": "--qp-system-radius-none",
          "references": [
            {
              "name": "--qp-system-radius-none"
            }
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-gallery-gap": {
          "description": "Uses the base spatial rhythm for gallery gap, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 14,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-gallery-image-height": {
          "description": "Choose the common rendered height used to align Gallery imagery.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "height"
          ]
        },
        "--qp-gallery-image-radius": {
          "description": "Uses the framework-defined absence of rounding for gallery image radius, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-system-radius-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-radius-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-radius-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "inheritsFrom": "--qp-system-radius-none",
          "references": [
            {
              "name": "--qp-system-radius-none"
            }
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-gallery-item-aspect-ratio": {
          "description": "Choose the standard framing proportion of Gallery items.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "aspect-ratio"
          ]
        },
        "--qp-gallery-item-min-width": {
          "description": "Choose the minimum useful Gallery item measure before the Gallery reflows.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "220px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "220px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "grid-template-columns"
          ]
        },
        "--qp-gallery-max-width": {
          "description": "Choose the maximum composition width of a Gallery.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-gallery-portrait-aspect-ratio": {
          "description": "Choose the framing proportion used for portrait Gallery items.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "aspect-ratio"
          ]
        },
        "--qp-gallery__caption-background": {
          "description": "Uses the framework-defined transparent color for gallery caption background, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-gallery__caption-secondary-text-color": {
          "description": "Uses the subdued inverse foreground for Gallery caption secondary text, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse-muted)",
          "inheritsFrom": "--qp-text-color--inverse-muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse-muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse-muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse-muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-gallery__caption-text-color": {
          "description": "Uses the primary foreground color for gallery caption text color, with semantic remapping for Gallery-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "Icon": {
      "description": "Base theme variables owned by the Icon architecture key.",
      "architectureKey": "Icon",
      "variables": {
        "--qp-icon-size": {
          "description": "Choose the default scale of inline icons relative to surrounding content.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "1em",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1em",
              "source": "variables.css",
              "selector": ":root"
            },
            {
              "value": "var(--qp-socials-icon-size)",
              "source": "styles/socials.css",
              "selector": ".qp-socials .qp-menu__icon",
              "references": [
                {
                  "name": "--qp-socials-icon-size"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/icon.css"
          ],
          "cssProperties": [
            "block-size",
            "inline-size"
          ]
        }
      }
    },
    "Image": {
      "description": "Base theme variables owned by the Image architecture key.",
      "architectureKey": "Image",
      "variables": {
        "--qp-image-border": {
          "description": "Choose whether ordinary inline media receives a complete framing border.",
          "variableType": "root",
          "designType": "border",
          "defaultValue": "0",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-image-max-height": {
          "description": "Choose the maximum displayed height of ordinary inline images.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "max-height"
          ]
        },
        "--qp-image-radius": {
          "description": "Uses the framework-defined absence of rounding for image radius, with semantic remapping for Image-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-system-radius-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-radius-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-radius-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "inheritsFrom": "--qp-system-radius-none",
          "references": [
            {
              "name": "--qp-system-radius-none"
            }
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-image-shadow": {
          "description": "Uses the standard raised-content elevation for image shadow, with semantic remapping for Image-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-raised-content-shadow)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-raised-content-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-raised-content-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "box-shadow"
          ],
          "inheritsFrom": "--qp-raised-content-shadow",
          "references": [
            {
              "name": "--qp-raised-content-shadow"
            }
          ]
        },
        "--qp-image-width": {
          "description": "Choose whether ordinary inline images occupy their available content width or shrink to the rendered media width.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-image__badge-background": {
          "description": "Uses the canvas color for image badge background, with semantic remapping for Image-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-image__badge-border": {
          "description": "Uses the standard complete border for image badge border, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "border"
          ],
          "inheritsFrom": "--qp-border"
        },
        "--qp-image__badge-text-color": {
          "description": "Uses the primary foreground color for image badge text color, with semantic remapping for Image-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "Lightbox": {
      "description": "Base theme variables owned by the Lightbox architecture key.",
      "architectureKey": "Lightbox",
      "variables": {
        "--qp-lightbox-backdrop": {
          "description": "Derives lightbox backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "color",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "color-mix(in srgb, var(--qp-color-black) 86%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in srgb, var(--qp-color-black) 86%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-lightbox-backdrop-filter": {
          "description": "Choose the complete compositing treatment behind the Lightbox surface.",
          "variableType": "root",
          "designType": "effect",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "backdrop-filter"
          ]
        },
        "--qp-lightbox-close-size": {
          "description": "Choose the physical size of the Lightbox close control.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.5rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.5rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "height",
            "width"
          ]
        },
        "--qp-lightbox-padding": {
          "description": "Uses the base spatial rhythm for lightbox padding, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 15,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-lightbox-radius": {
          "description": "Uses the compact rounding for lightbox radius, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-sm)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-radius-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "inheritsFrom": "--qp-radius-sm",
          "references": [
            {
              "name": "--qp-radius-sm"
            }
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-lightbox-text-color": {
          "description": "Uses the canvas color for lightbox text color, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-lightbox__caption-background": {
          "description": "Uses the framework-defined transparent color for lightbox caption background, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-lightbox__caption-secondary-text-color": {
          "description": "Uses the subdued inverse foreground for Lightbox caption secondary text, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse-muted)",
          "inheritsFrom": "--qp-text-color--inverse-muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse-muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse-muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse-muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-lightbox__caption-text-color": {
          "description": "Uses the canvas color for lightbox caption text color, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-lightbox__control-background": {
          "description": "Uses the canvas color for lightbox control background, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-lightbox__control-border": {
          "description": "Uses the standard complete border for lightbox control border, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "border"
          ],
          "inheritsFrom": "--qp-border"
        },
        "--qp-lightbox__control-text-color": {
          "description": "Uses the primary foreground color for lightbox control text color, with semantic remapping for Lightbox-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-lightbox__item-border-color--selected": {
          "description": "Chooses the  lightbox__item border color  selected treatment independently when it requires the Base white vocabulary value.",
          "variableType": "root",
          "designType": "color",
          "defaultValue": "var(--qp-color-white)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-white"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-color-white)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-white"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/lightbox.css"
          ],
          "cssProperties": [
            "border-color",
            "outline"
          ]
        }
      }
    },
    "List": {
      "description": "Base theme variables owned by the List architecture key.",
      "architectureKey": "List",
      "variables": {}
    },
    "MediaCaption": {
      "description": "Caption values shared by Base image, gallery, and lightbox presentation.",
      "variables": {
        "--qp-media-caption-gap": {
          "description": "Uses the small spatial rhythm for media caption gap, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 16,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "margin-top"
          ]
        },
        "--qp-media-caption-line-height": {
          "description": "Uses the body text rhythm for media caption line height, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "line-height",
          "defaultValue": "var(--qp-line-body)",
          "inheritsFrom": "--qp-line-body",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-line-body"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-line-body)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-line-body"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-media-caption-size": {
          "description": "Uses the small type level for media caption size, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-sm)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/gallery.css",
            "styles/image.css",
            "styles/lightbox.css"
          ],
          "inheritsFrom": "--qp-font-size-sm",
          "references": [
            {
              "name": "--qp-font-size-sm"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-media-caption-subtitle-line-height": {
          "description": "Uses the body text rhythm for media caption subtitle line height, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "line-height",
          "defaultValue": "var(--qp-line-body)",
          "inheritsFrom": "--qp-line-body",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-line-body"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-line-body)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-line-body"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-media-caption-text-color": {
          "description": "Uses the muted foreground color for media caption text color, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-media-caption-title-line-height": {
          "description": "Uses the body text rhythm for media caption title line height, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "line-height",
          "defaultValue": "var(--qp-line-body)",
          "inheritsFrom": "--qp-line-body",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-line-body"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-line-body)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-line-body"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "line-height"
          ]
        },
        "--qp-media-caption__subtitle-gap": {
          "description": "Uses the extra-small spatial rhythm for media caption subtitle gap, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 18,
          "defaultValue": "var(--qp-space-xs)",
          "inheritsFrom": "--qp-space-xs",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xs"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xs)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xs"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "margin-top"
          ]
        },
        "--qp-media-caption__title-gap": {
          "description": "Uses the framework-defined absence of spacing for media caption title gap, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 17,
          "defaultValue": "var(--qp-system-space-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-space-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-space-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "inheritsFrom": "--qp-system-space-none",
          "references": [
            {
              "name": "--qp-system-space-none"
            }
          ],
          "cssProperties": [
            "margin-bottom"
          ]
        },
        "--qp-media-caption-title-size": {
          "description": "Uses the small type level for media caption title size, with semantic remapping for MediaCaption-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-sm)",
          "inheritsFrom": "--qp-font-size-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-size-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-size-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/image.css"
          ],
          "cssProperties": [
            "font-size"
          ]
        }
      }
    },
    "Menu": {
      "description": "Base theme variables owned by the Menu architecture key.",
      "architectureKey": "Menu",
      "variables": {
        "--qp-menu-gap": {
          "description": "Choose the density of top-level navigation items without changing their clickable padding.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 19,
          "defaultValue": "0.375rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.375rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-menu-link-focus-width": {
          "description": "Uses the standard focus thickness for menu link focus width, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ],
          "inheritsFrom": "--qp-focus-width",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ]
        },
        "--qp-menu-link-font-weight": {
          "description": "Uses the semibold emphasis weight for menu link font weight, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-semibold)",
          "inheritsFrom": "--qp-font-weight-semibold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-semibold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-semibold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-semibold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-menu-link-min-height": {
          "description": "Choose the minimum interactive height of Menu links.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.75rem",
              "source": "variables.css",
              "selector": ":root"
            },
            {
              "value": "var(--qp-socials-link-size)",
              "source": "styles/socials.css",
              "selector": ".qp-socials",
              "references": [
                {
                  "name": "--qp-socials-link-size"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "min-height"
          ]
        },
        "--qp-menu-link-radius": {
          "description": "Uses the standard rounding for menu link radius, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            },
            {
              "value": "var(--qp-socials-link-radius)",
              "source": "styles/socials.css",
              "selector": ".qp-socials",
              "references": [
                {
                  "name": "--qp-socials-link-radius"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-menu-mobile-link-font-size": {
          "description": "Uses the large type level for menu mobile link font size, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-lg)",
          "inheritsFrom": "--qp-font-size-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-size-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-size-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-menu-mobile-link-font-weight": {
          "description": "Uses the semibold emphasis weight for menu mobile link font weight, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-semibold)",
          "inheritsFrom": "--qp-font-weight-semibold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-semibold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-semibold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-semibold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-menu-mobile-link-radius": {
          "description": "Uses the standard rounding for menu mobile link radius, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-menu-mobile-list-display": {
          "description": "Choose the layout mode used to compose the open mobile navigation list.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "grid",
          "source": "variables.css",
          "definitions": [
            {
              "value": "grid",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "display"
          ]
        },
        "--qp-menu-mobile-list-radius": {
          "description": "Uses the prominent rounding for menu mobile list radius, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-lg)",
          "inheritsFrom": "--qp-radius-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-menu-mobile-list-width": {
          "description": "Choose the maximum usable width of the mobile Menu surface.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "min(32rem, 100%)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "min(32rem, 100%)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-menu-mobile-toggle-focus-width": {
          "description": "Uses the standard focus thickness for menu mobile toggle focus width, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "inheritsFrom": "--qp-focus-width",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu-mobile-toggle-radius": {
          "description": "Uses the standard rounding for menu mobile toggle radius, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-menu-mobile-toggle-size": {
          "description": "Choose the physical size of the mobile Menu toggle control.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "height",
            "width"
          ]
        },
        "--qp-menu-nested-gap": {
          "description": "Choose the separation between entries in a nested navigation hierarchy.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 20,
          "defaultValue": "0.125rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.125rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-menu-nested-indent": {
          "description": "Uses the base spatial rhythm for menu nested indent, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 21,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding-inline-start"
          ]
        },
        "--qp-menu-search-focus-width": {
          "description": "Uses the standard focus thickness for menu search focus width, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "inheritsFrom": "--qp-focus-width",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu-submenu-focus-width": {
          "description": "Uses the standard focus thickness for menu submenu focus width, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "inheritsFrom": "--qp-focus-width",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu-submenu-toggle-radius": {
          "description": "Uses the compact rounding for menu submenu toggle radius, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-sm)",
          "inheritsFrom": "--qp-radius-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-menu-submenu-toggle-size": {
          "description": "Choose the physical size of submenu disclosure controls.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "min-height",
            "min-width"
          ]
        },
        "--qp-menu__link-background--hover": {
          "description": "Uses the light accent color for menu link background in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            },
            {
              "value": "var(--qp-socials__link-background--hover)",
              "source": "styles/socials.css",
              "selector": ".qp-socials",
              "references": [
                {
                  "name": "--qp-socials__link-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css",
            "styles/socials.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__link-focus-color": {
          "description": "Uses the primary accent color for menu link focus color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu__link-padding-block": {
          "description": "Uses the compact control density for menu link padding block, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 22,
          "defaultValue": "var(--qp-control-padding-block-sm)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-sm"
                }
              ]
            },
            {
              "value": "0",
              "source": "styles/socials.css",
              "selector": ".qp-socials"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-block-sm",
          "references": [
            {
              "name": "--qp-control-padding-block-sm"
            }
          ]
        },
        "--qp-menu__link-padding-inline": {
          "description": "Uses the compact-control inline inset for menu link padding inline, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 23,
          "defaultValue": "var(--qp-control-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-inline"
                }
              ]
            },
            {
              "value": "0",
              "source": "styles/socials.css",
              "selector": ".qp-socials"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-inline",
          "references": [
            {
              "name": "--qp-control-padding-inline"
            }
          ]
        },
        "--qp-menu__link-text-color": {
          "description": "Uses the primary foreground color for menu link text color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            },
            {
              "value": "var(--qp-socials__link-text-color)",
              "source": "styles/socials.css",
              "selector": ".qp-socials",
              "references": [
                {
                  "name": "--qp-socials__link-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__link-text-color--hover": {
          "description": "Uses the strong foreground color for menu link text color in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            },
            {
              "value": "var(--qp-socials__link-text-color--hover)",
              "source": "styles/socials.css",
              "selector": ".qp-socials",
              "references": [
                {
                  "name": "--qp-socials__link-text-color--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__mobile-link-background": {
          "description": "Uses the framework-defined transparent color for menu mobile link background, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__mobile-link-background--hover": {
          "description": "Uses the light accent color for menu mobile link background in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__mobile-link-padding-block": {
          "description": "Choose mobile navigation touch density independently from compact desktop controls.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 26,
          "defaultValue": "0.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-menu__mobile-link-padding-inline": {
          "description": "Uses the base spatial rhythm for menu mobile link padding inline, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 27,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-menu__mobile-link-text-color": {
          "description": "Uses the primary foreground color for menu mobile link text color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__mobile-link-text-color--hover": {
          "description": "Uses the strong foreground color for menu mobile link text color in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__mobile-list-background": {
          "description": "Uses the canvas color for menu mobile list background, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__mobile-list-gap": {
          "description": "Uses the extra-small spatial rhythm for menu mobile list gap, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 28,
          "defaultValue": "var(--qp-space-xs)",
          "inheritsFrom": "--qp-space-xs",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xs"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xs)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xs"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-menu__mobile-list-margin": {
          "description": "Choose how the expanded mobile navigation panel separates from header content.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 29,
          "defaultValue": "0.75rem auto 0",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.75rem auto 0",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "margin"
          ]
        },
        "--qp-menu__mobile-list-padding": {
          "description": "Uses the small spatial rhythm for menu mobile list padding, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 30,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-menu__mobile-toggle-background": {
          "description": "Uses the canvas color for menu mobile toggle background, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__mobile-toggle-background--hover": {
          "description": "Uses the light accent color for menu mobile toggle background in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__mobile-toggle-border-color": {
          "description": "Uses the strong edge color for menu mobile toggle border color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-menu__mobile-toggle-focus-color": {
          "description": "Uses the primary accent color for menu mobile toggle focus color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu__mobile-toggle-text-color": {
          "description": "Uses the primary accent color for menu mobile toggle text color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__search-background": {
          "description": "Uses the canvas color for menu search background, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__search-border-color": {
          "description": "Uses the strong edge color for menu search border color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-menu__search-empty-text-color": {
          "description": "Uses the subdued inverse foreground for Menu search empty text, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse-muted)",
          "inheritsFrom": "--qp-text-color--inverse-muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse-muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse-muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse-muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__search-focus-color": {
          "description": "Uses the primary accent color for menu search focus color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu__search-padding-block": {
          "description": "Uses the compact control density for menu search padding block, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 24,
          "defaultValue": "var(--qp-control-padding-block-sm)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-block-sm",
          "references": [
            {
              "name": "--qp-control-padding-block-sm"
            }
          ]
        },
        "--qp-menu__search-padding-inline": {
          "description": "Uses the compact-control inline inset for menu search padding inline, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 25,
          "defaultValue": "var(--qp-control-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-inline",
          "references": [
            {
              "name": "--qp-control-padding-inline"
            }
          ]
        },
        "--qp-menu__search-text-color": {
          "description": "Uses the strong foreground color for menu search text color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__nested-list-background": {
          "description": "Uses the canvas color for nested Menu branch backgrounds, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__submenu-focus-color": {
          "description": "Uses the primary accent color for menu submenu focus color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-menu__submenu-toggle-background--hover": {
          "description": "Uses the light accent color for menu submenu toggle background in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-menu__submenu-toggle-text-color": {
          "description": "Uses the primary foreground color for menu submenu toggle text color, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu__submenu-toggle-text-color--hover": {
          "description": "Uses the strong foreground color for menu submenu toggle text color in its hover state, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-menu-mobile-toggle-icon-size": {
          "description": "Choose the visual scale of the mobile Menu toggle glyph.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "1.25rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.25rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-menu-nested-border": {
          "description": "Uses the strong complete border for nested Menu hierarchy guides, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border--strong)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "references": [
            {
              "name": "--qp-border--strong"
            }
          ],
          "cssProperties": [
            "border-inline-start"
          ],
          "inheritsFrom": "--qp-border--strong"
        },
        "--qp-menu__mobile-list-border": {
          "description": "Uses the standard composite border for menu mobile list border, with semantic remapping for Menu-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "inheritsFrom": "--qp-border",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "cssProperties": [
            "border"
          ]
        }
      }
    },
    "Modal": {
      "description": "Base theme variables owned by the Modal architecture key.",
      "architectureKey": "Modal",
      "variables": {
        "--qp-modal-backdrop": {
          "description": "Derives modal backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "color",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "color-mix(in srgb, var(--qp-color-black) 55%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in srgb, var(--qp-color-black) 55%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-modal-background": {
          "description": "Uses the canvas color for modal background, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-modal-backdrop-filter": {
          "description": "Choose the complete compositing treatment behind Modal content.",
          "variableType": "root",
          "designType": "effect",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "backdrop-filter"
          ]
        },
        "--qp-modal-border": {
          "description": "Uses the standard complete border for modal border, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "border"
          ],
          "inheritsFrom": "--qp-border"
        },
        "--qp-modal-inset": {
          "description": "Uses the large spatial rhythm for modal inset, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 31,
          "defaultValue": "var(--qp-space-lg)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "inheritsFrom": "--qp-space-lg",
          "cssProperties": [
            "max-height",
            "padding",
            "width"
          ]
        },
        "--qp-modal-max-width": {
          "description": "Choose the maximum composition width of Modal surfaces.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "720px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "720px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-modal-padding": {
          "description": "Uses the large spatial rhythm for modal padding, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 32,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-modal-radius": {
          "description": "Uses the standard rounding for modal radius, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-modal-shadow": {
          "description": "Derives modal shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "shadow",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "0 12px 40px color-mix(in srgb, var(--qp-color-black) 25%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "0 12px 40px color-mix(in srgb, var(--qp-color-black) 25%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-modal-text-color": {
          "description": "Uses the primary foreground color for modal text color, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-modal-title-font-size": {
          "description": "Uses the large type level for modal title font size, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-lg)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "inheritsFrom": "--qp-font-size-lg",
          "references": [
            {
              "name": "--qp-font-size-lg"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-modal__close-background": {
          "description": "Uses the canvas color for modal close background, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-modal__close-background--hover": {
          "description": "Uses the light accent color for modal close background in its hover state, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-modal__close-border": {
          "description": "Uses the standard complete border for modal close border, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "border"
          ],
          "inheritsFrom": "--qp-border"
        },
        "--qp-modal__close-text-color": {
          "description": "Uses the primary foreground color for modal close text color, with semantic remapping for Modal-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-modal__title-text-color": {
          "description": "Uses the theme's heading color for  modal__title text color, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-heading-text-color)",
          "inheritsFrom": "--qp-heading-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-heading-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-heading-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-heading-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/modal.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "PageDocument": {
      "description": "Base theme variables owned by the PageDocument architecture key.",
      "architectureKey": "PageDocument",
      "variables": {
        "--qp-page-max-width": {
          "description": "Choose the maximum width of the QP page canvas.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-document.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-page-padding-bottom": {
          "description": "Uses the framework-defined absence of spacing for page padding bottom, with semantic remapping for PageDocument-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 35,
          "defaultValue": "var(--qp-system-space-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-space-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-space-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-document.css"
          ],
          "inheritsFrom": "--qp-system-space-none",
          "references": [
            {
              "name": "--qp-system-space-none"
            }
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-page-padding-inline": {
          "description": "Uses the framework-defined absence of spacing for page padding inline, with semantic remapping for PageDocument-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 34,
          "defaultValue": "var(--qp-system-space-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-space-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-space-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-document.css"
          ],
          "inheritsFrom": "--qp-system-space-none",
          "references": [
            {
              "name": "--qp-system-space-none"
            }
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-page-padding-top": {
          "description": "Uses the framework-defined absence of spacing for page padding top, with semantic remapping for PageDocument-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 33,
          "defaultValue": "var(--qp-system-space-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-space-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-space-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-document.css"
          ],
          "inheritsFrom": "--qp-system-space-none",
          "references": [
            {
              "name": "--qp-system-space-none"
            }
          ],
          "cssProperties": [
            "padding"
          ]
        }
      }
    },
    "PageHeader": {
      "description": "Base theme variables owned by the PageHeader architecture key.",
      "architectureKey": "PageHeader",
      "variables": {
        "--qp-page-header-background": {
          "description": "Uses the framework-defined transparent color for page header background, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-page-header-content-width": {
          "description": "Uses the section width default for page header content width, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "size",
          "defaultValue": "var(--qp-section-width-default)",
          "inheritsFrom": "--qp-section-width-default",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-section-width-default"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-section-width-default)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-section-width-default"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-page-header-hero-aspect-ratio": {
          "description": "Choose the framing proportion of PageHeader hero media.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "16 / 9",
          "source": "variables.css",
          "definitions": [
            {
              "value": "16 / 9",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "aspect-ratio"
          ]
        },
        "--qp-page-header-hero-background": {
          "description": "Uses the primary accent color for page header hero background, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-page-header-hero-panel-width": {
          "description": "Uses the section width wide for page header hero panel width, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "size",
          "defaultValue": "var(--qp-section-width-wide)",
          "inheritsFrom": "--qp-section-width-wide",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-section-width-wide"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-section-width-wide)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-section-width-wide"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-page-header-margin-block-end": {
          "description": "Uses the extra-large spatial rhythm for page header margin block end, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 37,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "margin-block"
          ]
        },
        "--qp-page-header-panel-inline-size": {
          "description": "Calculates page header panel inline size from the base spatial rhythm to preserve equal responsive edge insets.",
          "variableType": "derived",
          "designType": "size",
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(100% - (var(--qp-space-md) * 2))",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(100% - (var(--qp-space-md) * 2))",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-page-header-subtitle-max-width": {
          "description": "Uses the standard subtitle measure for page header subtitle max width, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "size",
          "defaultValue": "var(--qp-subtitle-max-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-subtitle-max-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-subtitle-max-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "max-width"
          ],
          "inheritsFrom": "--qp-subtitle-max-width",
          "references": [
            {
              "name": "--qp-subtitle-max-width"
            }
          ]
        },
        "--qp-page-header-text-color": {
          "description": "Uses the primary foreground color for page header text color, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-header-title-font-size": {
          "description": "Uses the display type level for page header title font size, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-3xl)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-3xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-3xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "inheritsFrom": "--qp-font-size-3xl",
          "references": [
            {
              "name": "--qp-font-size-3xl"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-page-header__hero-content-background": {
          "description": "Derives page header hero content background from the primary foreground color so translucent surface contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "color",
          "derivedFrom": "--qp-text-color",
          "defaultValue": "linear-gradient(0deg, color-mix(in srgb, var(--qp-text-color) 88%, transparent), color-mix(in srgb, var(--qp-text-color) 8%, transparent))",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            },
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "linear-gradient(0deg, color-mix(in srgb, var(--qp-text-color) 88%, transparent), color-mix(in srgb, var(--qp-text-color) 8%, transparent))",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                },
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-page-header__hero-content-background--mobile": {
          "description": "Uses the primary accent color for page header hero content background in its mobile state, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-page-header__hero-margin-block-end": {
          "description": "Uses the extra-large spatial rhythm for page header hero margin block end, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 42,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "margin-block-end"
          ]
        },
        "--qp-page-header__hero-panel-padding-block--mobile": {
          "description": "Uses the large spatial rhythm for page header hero panel padding block in its mobile state, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 40,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "padding-block"
          ]
        },
        "--qp-page-header__hero-panel-padding-inline": {
          "description": "Uses the major-surface inline safe area for page header hero panel padding inline, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 39,
          "defaultValue": "var(--qp-surface-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-surface-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "padding-inline"
          ],
          "inheritsFrom": "--qp-surface-padding-inline",
          "references": [
            {
              "name": "--qp-surface-padding-inline"
            }
          ]
        },
        "--qp-page-header__hero-panel-padding-inline--mobile": {
          "description": "Uses the base spatial rhythm for page header hero panel padding inline in its mobile state, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 41,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "padding-inline"
          ]
        },
        "--qp-page-header__hero-subtitle-text-color": {
          "description": "Uses the canvas color for page header hero subtitle text color, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-header__hero-text-color": {
          "description": "Uses the canvas color for page header hero text color, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-header__subtitle-text-color": {
          "description": "Uses the muted foreground color for page header subtitle text color, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-header__title-text-color": {
          "description": "Uses the theme's heading color for  page header__title text color, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-heading-text-color)",
          "inheritsFrom": "--qp-heading-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-heading-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-heading-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-heading-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-header-padding-block": {
          "description": "Uses the extra-large spatial rhythm for page header padding block, with semantic remapping for PageHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 36,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-header.css"
          ],
          "cssProperties": [
            "padding-block"
          ]
        }
      }
    },
    "PageList": {
      "description": "Base theme variables owned by the PageList architecture key.",
      "architectureKey": "PageList",
      "variables": {
        "--qp-page-list-action-radius": {
          "description": "Uses the standard rounding for page list action radius, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-page-list-action-weight": {
          "description": "Uses the semibold emphasis weight for page list action weight, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-semibold)",
          "inheritsFrom": "--qp-font-weight-semibold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-semibold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-semibold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-semibold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-page-list__action-background": {
          "description": "Uses the subtle surface color for page list action background, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-page-list__action-border": {
          "description": "Uses the standard complete border for page list action border, with semantic remapping for component-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "border"
          ],
          "inheritsFrom": "--qp-border"
        },
        "--qp-page-list__action-padding": {
          "description": "Builds the PageList action-label padding recipe from standard control density while retaining its local inline inset.",
          "variableType": "derived",
          "designType": "spacing",
          "sortOrder": 45,
          "defaultValue": "var(--qp-control-padding-block-md) 1rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-md) 1rem",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "derivedFrom": "--qp-control-padding-block-md",
          "references": [
            {
              "name": "--qp-control-padding-block-md"
            }
          ]
        },
        "--qp-page-list__action-text-color": {
          "description": "Uses the primary foreground color for page list action text color, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-page-list__body-gap": {
          "description": "Uses the small spatial rhythm for page list body gap, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 43,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-page-list__body-padding-inline": {
          "description": "Uses the large spatial rhythm for page list body padding inline, with semantic remapping for PageList-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 44,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-list.css"
          ],
          "cssProperties": [
            "margin",
            "padding-inline",
            "width"
          ]
        }
      }
    },
    "PageSection": {
      "description": "Base theme variables owned by the PageSection architecture key.",
      "architectureKey": "PageSection",
      "variables": {
        "--qp-section-background--alternate": {
          "description": "Uses the subtle surface color for section background in its alternate state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-section-background--default": {
          "description": "Uses the canvas color for section background in its default state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-section-border-color--alternate": {
          "description": "Uses the strong edge color for section border color in its alternate state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-section-border-color--default": {
          "description": "Uses the standard edge color for section border color in its default state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color)",
          "inheritsFrom": "--qp-border-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-section-inline-size": {
          "description": "Calculates section inline size from the base spatial rhythm to preserve equal responsive edge insets.",
          "variableType": "derived",
          "designType": "size",
          "derivedFrom": "--qp-space-md",
          "defaultValue": "calc(100% - (var(--qp-space-md) * 2))",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "calc(100% - (var(--qp-space-md) * 2))",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            },
            {
              "value": "100%",
              "source": "styles/toc.css",
              "selector": ".qp-toc__section"
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-section-margin-block-end": {
          "description": "Uses the extra-large spatial rhythm for section margin block end, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 46,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            },
            {
              "value": "0",
              "source": "styles/toc.css",
              "selector": ".qp-toc__section"
            }
          ],
          "consumedBy": [
            "styles/divider.css",
            "styles/page-section.css"
          ],
          "cssProperties": [
            "margin-block"
          ]
        },
        "--qp-section-subtitle-max-width": {
          "description": "Uses the standard subtitle measure for section subtitle max width, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "size",
          "defaultValue": "var(--qp-subtitle-max-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-subtitle-max-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-subtitle-max-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "max-width"
          ],
          "inheritsFrom": "--qp-subtitle-max-width",
          "references": [
            {
              "name": "--qp-subtitle-max-width"
            }
          ]
        },
        "--qp-section-surface-shadow": {
          "description": "Uses the standard raised-content elevation for section surface shadow, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-raised-content-shadow)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-raised-content-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-raised-content-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "box-shadow"
          ],
          "inheritsFrom": "--qp-raised-content-shadow",
          "references": [
            {
              "name": "--qp-raised-content-shadow"
            }
          ]
        },
        "--qp-section-text-color--alternate": {
          "description": "Uses the primary foreground color for section text color in its alternate state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-section-text-color--default": {
          "description": "Uses the primary foreground color for section text color in its default state, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-section-width-default": {
          "description": "Choose the standard content measure used by ordinary QP sections.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "60rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "60rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-section.css",
            "variables.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-section-width-wide": {
          "description": "Choose the expanded content measure used by wide QP compositions.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/page-section.css",
            "variables.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-section__header-margin-block-end": {
          "description": "Uses the large spatial rhythm for section header margin block end, with semantic remapping for PageSection-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 47,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            },
            {
              "value": "0",
              "source": "styles/toc.css",
              "selector": ".qp-toc__section"
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "margin-block-end"
          ]
        },
        "--qp-section__surface-padding-block": {
          "description": "Uses the extra-large spatial rhythm for the block-axis inset of standard default and alternate Section surfaces. A theme-owned appearance emits no standard appearance class and must consume this value explicitly if it wants the same inset.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 48,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "padding-block"
          ]
        },
        "--qp-section__surface-padding-inline": {
          "description": "Uses the major-surface inline safe area for the inline inset of standard default and alternate Section surfaces. A theme-owned appearance emits no standard appearance class and must consume this value explicitly if it wants the same inset.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 49,
          "defaultValue": "var(--qp-surface-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-surface-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/page-section.css"
          ],
          "cssProperties": [
            "padding-inline"
          ],
          "inheritsFrom": "--qp-surface-padding-inline",
          "references": [
            {
              "name": "--qp-surface-padding-inline"
            }
          ]
        }
      }
    },
    "Paragraph": {
      "description": "Base theme variables owned by the Paragraph architecture key.",
      "architectureKey": "Paragraph",
      "variables": {}
    },
    "ProductList": {
      "description": "Base theme variables owned by the ProductList architecture key.",
      "architectureKey": "ProductList",
      "variables": {
        "--qp-product-list-image-ratio": {
          "description": "Choose the consistent framing proportion used for product imagery across a ProductList.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "4 / 3",
          "source": "variables.css",
          "definitions": [
            {
              "value": "4 / 3",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/product-list.css"
          ],
          "cssProperties": [
            "aspect-ratio"
          ]
        },
        "--qp-product-list__body-gap": {
          "description": "Uses the small spatial rhythm for product list body gap, with semantic remapping for ProductList-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 50,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/product-list.css"
          ],
          "cssProperties": [
            "gap"
          ]
        }
      }
    },
    "Region": {
      "description": "Base theme variables owned by the Region architecture key.",
      "architectureKey": "Region",
      "variables": {
        "--qp-region-gap": {
          "description": "Uses the extra-large spatial rhythm between sibling Regions and Region rows. It does not inset Region content from the owning Section surface boundary.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 51,
          "defaultValue": "var(--qp-space-xl)",
          "inheritsFrom": "--qp-space-xl",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xl"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xl)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xl"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/region.css"
          ],
          "cssProperties": [
            "gap",
            "margin-top"
          ]
        },
        "--qp-region-mobile-gap": {
          "description": "Uses the large spatial rhythm between sibling Regions in the stacked mobile composition. It does not provide Region or Section surface padding.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 52,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/region.css"
          ],
          "cssProperties": [
            "gap"
          ]
        }
      }
    },
    "SiteFooter": {
      "description": "Base theme variables owned by the SiteFooter architecture key.",
      "architectureKey": "SiteFooter",
      "variables": {
        "--qp-footer-background": {
          "description": "Uses the subtle surface color for footer background, with semantic remapping for SiteFooter-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-footer-content-width": {
          "description": "Choose the maximum content measure inside the SiteFooter.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "min(75rem, 100%)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "min(75rem, 100%)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-footer-margin-top": {
          "description": "Choose whether the Footer is separated from the document or attached to the preceding surface.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 53,
          "defaultValue": "4rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "4rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "margin-top"
          ]
        },
        "--qp-footer-menu-max-width": {
          "description": "Choose the maximum measure available to Footer navigation.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "100%",
          "source": "variables.css",
          "definitions": [
            {
              "value": "100%",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-footer-menu-width": {
          "description": "Choose whether Footer navigation fills or shrink-wraps its available measure.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "fit-content",
          "source": "variables.css",
          "definitions": [
            {
              "value": "fit-content",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-footer-text-color": {
          "description": "Uses the muted foreground color for footer text color, with semantic remapping for SiteFooter-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-footer__section-padding-block": {
          "description": "Uses the large spatial rhythm for footer section padding block, with semantic remapping for SiteFooter-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 54,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "padding-block"
          ]
        },
        "--qp-footer__section-padding-inline": {
          "description": "Uses the major-surface inline safe area for footer section padding inline, with semantic remapping for SiteFooter-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 55,
          "defaultValue": "var(--qp-surface-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-surface-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "cssProperties": [
            "padding-inline"
          ],
          "inheritsFrom": "--qp-surface-padding-inline",
          "references": [
            {
              "name": "--qp-surface-padding-inline"
            }
          ]
        },
        "--qp-footer-border": {
          "description": "Uses the standard composite border for footer border, with semantic remapping for SiteFooter-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-footer.css"
          ],
          "inheritsFrom": "--qp-border",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "cssProperties": [
            "border-top"
          ]
        }
      }
    },
    "SiteHeader": {
      "description": "Base theme variables owned by the SiteHeader architecture key.",
      "architectureKey": "SiteHeader",
      "variables": {
        "--qp-site-header-backdrop-filter": {
          "description": "Choose the complete compositing treatment behind the SiteHeader surface.",
          "variableType": "root",
          "designType": "effect",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "backdrop-filter"
          ]
        },
        "--qp-site-header-background": {
          "description": "Uses the canvas color for site header background, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-site-header-border-color": {
          "description": "Uses the standard edge color for site header border color, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color)",
          "inheritsFrom": "--qp-border-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-site-header-content-width": {
          "description": "Choose the maximum content measure inside the SiteHeader.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "min(75rem, 100%)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "min(75rem, 100%)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-site-header-gap": {
          "description": "Uses the base spatial rhythm for site header gap, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 56,
          "defaultValue": "var(--qp-space-md)",
          "inheritsFrom": "--qp-space-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-site-header-justify": {
          "description": "Choose how branding, navigation, and actions are distributed across the SiteHeader.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "flex-start",
          "source": "variables.css",
          "definitions": [
            {
              "value": "flex-start",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "justify-content"
          ]
        },
        "--qp-site-header-menu-offset": {
          "description": "Choose how the SiteHeader menu is aligned relative to preceding header content.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "auto",
          "source": "variables.css",
          "definitions": [
            {
              "value": "auto",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "margin-inline-start"
          ]
        },
        "--qp-site-header-min-height": {
          "description": "Choose the minimum physical height of the SiteHeader.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "4rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "4rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "min-height"
          ]
        },
        "--qp-site-header-padding-block": {
          "description": "Choose the SiteHeader’s vertical density and overall bar height.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 57,
          "defaultValue": "0.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-site-header-padding-inline": {
          "description": "Uses the major-surface inline safe area for site header padding inline, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 58,
          "defaultValue": "var(--qp-surface-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-surface-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/site-header.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-surface-padding-inline",
          "references": [
            {
              "name": "--qp-surface-padding-inline"
            }
          ]
        },
        "--qp-site-header__menu-link-background--current": {
          "description": "Uses the interactive surface color for SiteHeader menu links in their current state, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-site-header__menu-link-text-color--current": {
          "description": "Uses the strong foreground color for site header menu link text color in its current state, with semantic remapping for SiteHeader-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/menu.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "Socials": {
      "description": "Base theme variables owned by the Socials architecture key.",
      "architectureKey": "Socials",
      "variables": {
        "--qp-socials-icon-size": {
          "description": "Choose the visual scale of Socials glyphs.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "1.25rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "1.25rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": []
        },
        "--qp-socials-link-border": {
          "description": "Uses the standard composite border for socials link border, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "inheritsFrom": "--qp-border",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-socials-link-radius": {
          "description": "Uses the standard rounding for socials link radius, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": []
        },
        "--qp-socials-link-size": {
          "description": "Choose the physical size of Socials link controls.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.75rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.75rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": [
            "height",
            "width"
          ]
        },
        "--qp-socials__link-background": {
          "description": "Uses the framework-defined transparent color for socials link background, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-socials__link-background--hover": {
          "description": "Uses the light accent color for socials link background in its hover state, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": []
        },
        "--qp-socials__link-text-color": {
          "description": "Uses the primary foreground color for socials link text color, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": []
        },
        "--qp-socials__link-text-color--hover": {
          "description": "Uses the strong foreground color for socials link text color in its hover state, with semantic remapping for Socials-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/socials.css"
          ],
          "cssProperties": []
        }
      }
    },
    "StickyTray": {
      "description": "Base theme variables owned by the StickyTray architecture key.",
      "architectureKey": "StickyTray",
      "variables": {
        "--qp-sticky-tray-bar-backdrop-filter": {
          "description": "Choose the complete compositing treatment behind the persistent StickyTray bar.",
          "variableType": "root",
          "designType": "effect",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "backdrop-filter"
          ]
        },
        "--qp-sticky-tray-bar-border-color": {
          "description": "Uses the strong edge color for sticky tray bar border color, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-border-color--strong)",
          "inheritsFrom": "--qp-border-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-border-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-border-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-color"
          ]
        },
        "--qp-sticky-tray-bar-open-radius": {
          "description": "Calculates sticky tray bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "var(--qp-radius-lg) var(--qp-radius-lg) 0 0",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg) var(--qp-radius-lg) 0 0",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-bar-radius": {
          "description": "Uses the prominent rounding for sticky tray bar radius, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-lg)",
          "inheritsFrom": "--qp-radius-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-bar-shadow": {
          "description": "Choose how strongly the persistent StickyTray bar separates from document content.",
          "variableType": "root",
          "designType": "shadow",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-sticky-tray-bottom-offset": {
          "description": "Reserve space below a bottom-positioned StickyTray.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "0px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": []
        },
        "--qp-sticky-tray-compact-max-width": {
          "description": "Calculates sticky tray compact max width from the small spatial rhythm to preserve viewport clearance.",
          "variableType": "derived",
          "designType": "size",
          "derivedFrom": "--qp-space-sm",
          "defaultValue": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-sticky-tray-focus-color": {
          "description": "Uses the primary accent color for sticky tray focus color, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-sticky-tray-focus-width": {
          "description": "Uses the standard focus thickness for sticky tray focus width, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "outline"
          ],
          "inheritsFrom": "--qp-focus-width",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ]
        },
        "--qp-sticky-tray-inline-offset": {
          "description": "Uses the small spatial rhythm for sticky tray inline offset, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "layout",
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": []
        },
        "--qp-sticky-tray-max-width": {
          "description": "Choose the maximum horizontal extent of the StickyTray.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "48rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "48rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-sticky-tray-occupied-bottom": {
          "description": "Tracks runtime-measured space already occupied at the bottom of the viewport.",
          "variableType": "system",
          "designType": "layout",
          "defaultValue": "0px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": []
        },
        "--qp-sticky-tray-occupied-top": {
          "description": "Tracks runtime-measured space already occupied at the top of the viewport.",
          "variableType": "system",
          "designType": "layout",
          "defaultValue": "0px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": []
        },
        "--qp-sticky-tray-panel-backdrop-filter": {
          "description": "Choose the complete compositing treatment behind the open StickyTray panel.",
          "variableType": "root",
          "designType": "effect",
          "defaultValue": "none",
          "source": "variables.css",
          "definitions": [
            {
              "value": "none",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "backdrop-filter"
          ]
        },
        "--qp-sticky-tray-panel-max-height": {
          "description": "Choose the maximum viewport capacity of an open StickyTray panel.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "60vh",
          "source": "variables.css",
          "definitions": [
            {
              "value": "60vh",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "max-height"
          ]
        },
        "--qp-sticky-tray-panel-radius": {
          "description": "Calculates sticky tray panel radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "0 0 var(--qp-radius-lg) var(--qp-radius-lg)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "0 0 var(--qp-radius-lg) var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-side-bar-radius": {
          "description": "Uses the prominent rounding for sticky tray side bar radius, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-lg)",
          "inheritsFrom": "--qp-radius-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-side-left-bar-open-radius": {
          "description": "Calculates sticky tray side left bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-side-left-panel-radius": {
          "description": "Calculates sticky tray side left panel radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-side-open-width": {
          "description": "Calculates sticky tray side open width from the small spatial rhythm to preserve viewport clearance.",
          "variableType": "derived",
          "designType": "size",
          "derivedFrom": "--qp-space-sm",
          "defaultValue": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-sticky-tray-side-right-bar-open-radius": {
          "description": "Calculates sticky tray side right bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-side-right-panel-radius": {
          "description": "Calculates sticky tray side right panel radius from the prominent rounding to preserve joined StickyTray corner geometry.",
          "variableType": "derived",
          "designType": "radius",
          "derivedFrom": "--qp-radius-lg",
          "defaultValue": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-lg"
            },
            {
              "name": "--qp-radius-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-lg"
                },
                {
                  "name": "--qp-radius-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-sticky-tray-top-offset": {
          "description": "Reserve space above a top-positioned StickyTray.",
          "variableType": "root",
          "designType": "layout",
          "defaultValue": "0px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": []
        },
        "--qp-sticky-tray-viewport-gutter": {
          "description": "Uses the small spatial rhythm for sticky tray viewport gutter, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "layout",
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "max-width",
            "width"
          ]
        },
        "--qp-sticky-tray__bar-background": {
          "description": "Uses the canvas color for sticky tray bar background, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-sticky-tray__bar-gap": {
          "description": "Uses the small spatial rhythm for sticky tray bar gap, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 59,
          "defaultValue": "var(--qp-space-sm)",
          "inheritsFrom": "--qp-space-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-sticky-tray__bar-padding-block": {
          "description": "Uses the standard control density for sticky tray bar padding block, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 60,
          "defaultValue": "var(--qp-control-padding-block-md)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "padding"
          ],
          "inheritsFrom": "--qp-control-padding-block-md",
          "references": [
            {
              "name": "--qp-control-padding-block-md"
            }
          ]
        },
        "--qp-sticky-tray__bar-text-color": {
          "description": "Uses the primary foreground color for sticky tray bar text color, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color)",
          "inheritsFrom": "--qp-text-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-sticky-tray__handle-text-color": {
          "description": "Uses the strong foreground color for sticky tray handle text color, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-sticky-tray__panel-background": {
          "description": "Uses the canvas color for sticky tray panel background, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-background)",
          "inheritsFrom": "--qp-background",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-background"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-background)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-background"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-sticky-tray-handle-font-family": {
          "description": "Uses the document typeface for sticky tray handle font family, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "font-family",
          "defaultValue": "var(--qp-document-font-family)",
          "inheritsFrom": "--qp-document-font-family",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-document-font-family"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-document-font-family)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-document-font-family"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "font-family"
          ]
        },
        "--qp-sticky-tray-handle-font-size": {
          "description": "Uses the small type level for sticky tray handle font size, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-sm)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "inheritsFrom": "--qp-font-size-sm",
          "references": [
            {
              "name": "--qp-font-size-sm"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-sticky-tray-handle-font-weight": {
          "description": "Uses the bold emphasis weight for sticky tray handle font weight, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "font-weight",
          "defaultValue": "var(--qp-font-weight-bold)",
          "inheritsFrom": "--qp-font-weight-bold",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-font-weight-bold"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-font-weight-bold)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-weight-bold"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "cssProperties": [
            "font-weight"
          ]
        },
        "--qp-sticky-tray-panel-border": {
          "description": "Uses the standard composite border for sticky tray panel border, with semantic remapping for StickyTray-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/sticky-tray.css"
          ],
          "inheritsFrom": "--qp-border",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "cssProperties": [
            "border",
            "border-inline-start",
            "border-top"
          ]
        }
      }
    },
    "Toast": {
      "description": "Base theme variables owned by the Toast architecture key.",
      "architectureKey": "Toast",
      "variables": {
        "--qp-toast-background": {
          "description": "Uses the strong foreground color for toast background, with semantic remapping for Toast-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-toast-bottom": {
          "description": "Uses the large spatial rhythm for toast bottom, with semantic remapping for Toast-specific treatment.",
          "variableType": "inherited",
          "designType": "layout",
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "bottom"
          ]
        },
        "--qp-toast-font-size": {
          "description": "Uses the body type level for toast font size, with semantic remapping for Toast-specific treatment.",
          "variableType": "inherited",
          "designType": "font-size",
          "defaultValue": "var(--qp-font-size-md)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-font-size-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-font-size-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "inheritsFrom": "--qp-font-size-md",
          "references": [
            {
              "name": "--qp-font-size-md"
            }
          ],
          "cssProperties": [
            "font-size"
          ]
        },
        "--qp-toast-max-width": {
          "description": "Choose the maximum readable width of Toast messages.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "40rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "40rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "max-width"
          ]
        },
        "--qp-toast-min-width": {
          "description": "Choose the minimum physical width of Toast messages.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "0px",
          "source": "variables.css",
          "definitions": [
            {
              "value": "0px",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "min-width"
          ]
        },
        "--qp-toast-padding": {
          "description": "Choose the density and prominence of transient Toast messages.",
          "variableType": "root",
          "designType": "spacing",
          "sortOrder": 62,
          "defaultValue": ".75rem 1rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": ".75rem 1rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "padding"
          ]
        },
        "--qp-toast-radius": {
          "description": "Uses the standard rounding for toast radius, with semantic remapping for Toast-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-md)",
          "inheritsFrom": "--qp-radius-md",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-md"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-md)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-md"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-toast-shadow": {
          "description": "Derives toast shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "shadow",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "0 4px 16px color-mix(in srgb, var(--qp-color-black) 20%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "0 4px 16px color-mix(in srgb, var(--qp-color-black) 20%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "box-shadow"
          ]
        },
        "--qp-toast-text-color": {
          "description": "Uses the canvas color for toast text color, with semantic remapping for Toast-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toast.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "Toc": {
      "description": "Base theme variables owned by the Toc architecture key.",
      "architectureKey": "Toc",
      "variables": {
        "--qp-toc-link-focus-width": {
          "description": "Uses the standard focus thickness for TOC link focus width, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "border-width",
          "defaultValue": "var(--qp-focus-width)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-focus-width)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-focus-width"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "outline"
          ],
          "inheritsFrom": "--qp-focus-width",
          "references": [
            {
              "name": "--qp-focus-width"
            }
          ]
        },
        "--qp-toc-link-min-height": {
          "description": "Choose the minimum interactive height of TOC links.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "2.5rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "2.5rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "min-height"
          ]
        },
        "--qp-toc-link-radius": {
          "description": "Uses the compact rounding for TOC link radius, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-radius-sm)",
          "inheritsFrom": "--qp-radius-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-radius-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-radius-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-radius-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-toc-nested-gap": {
          "description": "Uses the extra-small spatial rhythm for TOC nested gap, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 63,
          "defaultValue": "var(--qp-space-xs)",
          "inheritsFrom": "--qp-space-xs",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-xs"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-xs)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-xs"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "gap"
          ]
        },
        "--qp-toc-nested-indent": {
          "description": "Uses the large spatial rhythm for TOC nested indent, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 64,
          "defaultValue": "var(--qp-space-lg)",
          "inheritsFrom": "--qp-space-lg",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-space-lg"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-space-lg)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-space-lg"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "padding-inline-start"
          ]
        },
        "--qp-toc__link-background": {
          "description": "Uses the framework-defined transparent color for TOC link background, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-system-color-transparent)",
          "inheritsFrom": "--qp-system-color-transparent",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-system-color-transparent"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-system-color-transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-color-transparent"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-toc__link-background--current": {
          "description": "Uses the subtle surface color for TOC link background in its current state, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--muted)",
          "inheritsFrom": "--qp-surface-background--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--muted"
                }
              ]
            }
          ],
          "cssProperties": []
        },
        "--qp-toc__link-background--hover": {
          "description": "Uses the light accent color for TOC link background in its hover state, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-surface-background--hover)",
          "inheritsFrom": "--qp-surface-background--hover",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-surface-background--hover"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-surface-background--hover)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-surface-background--hover"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-toc__link-border-color--current": {
          "description": "Uses the primary accent color for TOC link border color in its current state, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "cssProperties": []
        },
        "--qp-toc__link-focus-color": {
          "description": "Uses the primary accent color for TOC link focus color, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-toc__link-padding-block": {
          "description": "Uses the compact control density for TOC link padding block, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 65,
          "defaultValue": "var(--qp-control-padding-block-sm)",
          "inheritsFrom": "--qp-control-padding-block-sm",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-control-padding-block-sm"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-control-padding-block-sm)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-block-sm"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "padding-block"
          ]
        },
        "--qp-toc__link-padding-inline": {
          "description": "Uses the compact-control inline inset for TOC link padding inline, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "spacing",
          "sortOrder": 66,
          "defaultValue": "var(--qp-control-padding-inline)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-control-padding-inline)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-control-padding-inline"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "padding-inline"
          ],
          "inheritsFrom": "--qp-control-padding-inline",
          "references": [
            {
              "name": "--qp-control-padding-inline"
            }
          ]
        },
        "--qp-toc__link-text-color": {
          "description": "Uses the muted foreground color for TOC link text color, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--muted)",
          "inheritsFrom": "--qp-text-color--muted",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--muted"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--muted)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--muted"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "color"
          ]
        },
        "--qp-toc__link-text-color--current": {
          "description": "Uses the strong foreground color for TOC link text color in its current state, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "cssProperties": []
        },
        "--qp-toc__link-text-color--hover": {
          "description": "Uses the strong foreground color for TOC link text color in its hover state, with semantic remapping for Toc-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--strong)",
          "inheritsFrom": "--qp-text-color--strong",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--strong"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--strong)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--strong"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/toc.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    },
    "Video": {
      "description": "Base theme variables owned by the Video architecture key.",
      "architectureKey": "Video",
      "variables": {
        "--qp-video-focus-color": {
          "description": "Uses the primary accent color for video focus color, with semantic remapping for Video-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-accent-color)",
          "inheritsFrom": "--qp-accent-color",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-accent-color"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-accent-color)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-accent-color"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "outline"
          ]
        },
        "--qp-video-max-height": {
          "description": "Choose the maximum displayed height of Video media.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "min(80vh, 50rem)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "min(80vh, 50rem)",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/video.css",
            "variables.css"
          ],
          "cssProperties": []
        },
        "--qp-video-max-inline-size": {
          "description": "Calculates Video width from its authored maximum height using the standard widescreen proportion.",
          "variableType": "derived",
          "designType": "size",
          "defaultValue": "calc(var(--qp-video-max-height) * 1.7778)",
          "derivedFrom": "--qp-video-max-height",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-video-max-height"
            }
          ],
          "definitions": [
            {
              "value": "calc(var(--qp-video-max-height) * 1.7778)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-video-max-height"
                }
              ]
            },
            {
              "value": "calc(var(--qp-video-max-height) * .5625)",
              "source": "styles/video.css",
              "selector": ".qp-video--9x16",
              "references": [
                {
                  "name": "--qp-video-max-height"
                }
              ]
            },
            {
              "value": "calc(var(--qp-video-max-height) * 1.3333)",
              "source": "styles/video.css",
              "selector": ".qp-video--4x3",
              "references": [
                {
                  "name": "--qp-video-max-height"
                }
              ]
            },
            {
              "value": "var(--qp-video-max-height)",
              "source": "styles/video.css",
              "selector": ".qp-video--1x1",
              "references": [
                {
                  "name": "--qp-video-max-height"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "usageFallbacks": [
            {
              "fallback": "100%",
              "source": "styles/video.css"
            }
          ],
          "cssProperties": [
            "width"
          ]
        },
        "--qp-video-play-icon-size": {
          "description": "Choose the visual scale of the Video play glyph.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "3rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "3rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "height",
            "width"
          ]
        },
        "--qp-video-play-size": {
          "description": "Choose the physical prominence of the Video play control.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "3rem",
          "source": "variables.css",
          "definitions": [
            {
              "value": "3rem",
              "source": "variables.css",
              "selector": ":root"
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "height",
            "width"
          ]
        },
        "--qp-video-poster-border": {
          "description": "Uses the standard composite border for video poster border, with semantic remapping for Video-specific treatment.",
          "variableType": "inherited",
          "designType": "border",
          "defaultValue": "var(--qp-border)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-border)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-border"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "inheritsFrom": "--qp-border",
          "references": [
            {
              "name": "--qp-border"
            }
          ],
          "cssProperties": [
            "border"
          ]
        },
        "--qp-video-poster-shadow": {
          "description": "Uses the standard raised-content elevation for video poster shadow, with semantic remapping for Video-specific treatment.",
          "variableType": "inherited",
          "designType": "shadow",
          "defaultValue": "var(--qp-raised-content-shadow)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-raised-content-shadow)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-raised-content-shadow"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "box-shadow"
          ],
          "inheritsFrom": "--qp-raised-content-shadow",
          "references": [
            {
              "name": "--qp-raised-content-shadow"
            }
          ]
        },
        "--qp-video-radius": {
          "description": "Uses the framework-defined absence of rounding for video radius, with semantic remapping for Video-specific treatment.",
          "variableType": "inherited",
          "designType": "radius",
          "defaultValue": "var(--qp-system-radius-none)",
          "source": "variables.css",
          "definitions": [
            {
              "value": "var(--qp-system-radius-none)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-system-radius-none"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "inheritsFrom": "--qp-system-radius-none",
          "references": [
            {
              "name": "--qp-system-radius-none"
            }
          ],
          "cssProperties": [
            "border-radius"
          ]
        },
        "--qp-video-ratio": {
          "description": "Choose the framing proportion of Video media.",
          "variableType": "root",
          "designType": "size",
          "defaultValue": "16 / 9",
          "source": "variables.css",
          "definitions": [
            {
              "value": "16 / 9",
              "source": "variables.css",
              "selector": ":root"
            },
            {
              "value": "9 / 16",
              "source": "styles/video.css",
              "selector": ".qp-video--9x16"
            },
            {
              "value": "4 / 3",
              "source": "styles/video.css",
              "selector": ".qp-video--4x3"
            },
            {
              "value": "1",
              "source": "styles/video.css",
              "selector": ".qp-video--1x1"
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "usageFallbacks": [
            {
              "fallback": "16 / 9",
              "source": "styles/video.css"
            }
          ],
          "cssProperties": [
            "aspect-ratio"
          ]
        },
        "--qp-video__play-background": {
          "description": "Derives video play background from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "color",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "color-mix(in srgb, var(--qp-color-black) 65%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in srgb, var(--qp-color-black) 65%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-video__play-background--hover": {
          "description": "Derives video play background in its hover state from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.",
          "variableType": "derived",
          "designType": "color",
          "derivedFrom": "--qp-color-black",
          "defaultValue": "color-mix(in srgb, var(--qp-color-black) 80%, transparent)",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-color-black"
            }
          ],
          "definitions": [
            {
              "value": "color-mix(in srgb, var(--qp-color-black) 80%, transparent)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-color-black"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "background"
          ]
        },
        "--qp-video__play-text-color": {
          "description": "Uses the canvas color for video play text color, with semantic remapping for Video-specific treatment.",
          "variableType": "inherited",
          "designType": "color",
          "defaultValue": "var(--qp-text-color--inverse)",
          "inheritsFrom": "--qp-text-color--inverse",
          "source": "variables.css",
          "references": [
            {
              "name": "--qp-text-color--inverse"
            }
          ],
          "definitions": [
            {
              "value": "var(--qp-text-color--inverse)",
              "source": "variables.css",
              "selector": ":root",
              "references": [
                {
                  "name": "--qp-text-color--inverse"
                }
              ]
            }
          ],
          "consumedBy": [
            "styles/video.css"
          ],
          "cssProperties": [
            "color"
          ]
        }
      }
    }
  }
}