{ "themeId": "featherquest", "variables": [ { "name": "--qp-accent-color", "description": "Chooses the primary accent color that carries theme identity and interactive emphasis.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-blue)", "variableType": "root", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-card-focus-color", "--qp-cta-background", "--qp-cta-focus-color", "--qp-menu__search-focus-color", "--qp-page-header__hero-content-background--mobile", "--qp-toc__link-border-color--current", "--qp-toc__link-focus-color" ] }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-white)", "variableType": "root", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-card-background" ] }, { "name": "--qp-bg-tile", "description": "FeatherQuest document artwork used by its document background composition.", "designType": "background", "variableType": "root", "declaredExpression": "url(\"https://img.featherquest.com/framework/backgrounds/background-tile.svg?v=3\")", "effectiveExpression": "url(\"https://img.featherquest.com/framework/backgrounds/background-tile.svg?v=3\")", "effectiveValue": "url(\"https://img.featherquest.com/framework/backgrounds/background-tile.svg?v=3\")", "resolution": "static", "status": "theme-owned" }, { "name": "--qp-border", "description": "Calculates the standard complete border from the ordinary border width and edge color.", "designType": "border", "baseVariableType": "derived", "baseExpression": "var(--qp-border-width) solid var(--qp-border-color)", "variableType": "derived", "effectiveExpression": "var(--qp-border-width) solid var(--qp-border-color)", "effectiveValue": "1px solid #37bfc1", "resolution": "static", "status": "base", "relationshipSource": [ "--qp-border-width", "--qp-border-color" ], "inheritedDependents": [ "--qp-page-list__action-border", "--qp-video-poster-border" ] }, { "name": "--qp-border--strong", "description": "Calculates the strong complete border from the ordinary border width and emphasized edge color.", "designType": "border", "baseVariableType": "derived", "baseExpression": "var(--qp-border-width) solid var(--qp-border-color--strong)", "variableType": "derived", "effectiveExpression": "var(--qp-border-width) solid var(--qp-border-color--strong)", "effectiveValue": "1px solid color-mix(in oklch, #37bfc1, black 10%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": [ "--qp-border-width", "--qp-border-color--strong" ] }, { "name": "--qp-border-accent", "description": "A translucent light edge derived from FeatherQuest’s primary foreground color.", "designType": "color", "variableType": "derived", "declaredExpression": "color-mix(in srgb, var(--qp-color-white) 14%, transparent)", "effectiveExpression": "color-mix(in srgb, var(--qp-color-white) 14%, transparent)", "effectiveValue": "color-mix(in srgb, #ffffff 14%, transparent)", "resolution": "browser-dependent", "status": "theme-owned", "relationshipSource": "--qp-color-white" }, { "name": "--qp-border-color", "description": "Chooses the standard edge color for ordinary bordered surfaces.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-mist)", "variableType": "root", "declaredExpression": "var(--theme-color-aqua)", "effectiveExpression": "var(--theme-color-aqua)", "effectiveValue": "#37bfc1", "resolution": "static", "status": "override" }, { "name": "--qp-border-color--strong", "description": "Chooses the stronger edge color used for emphasized separation.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-mist-dark)", "variableType": "root", "declaredExpression": "var(--theme-color-aqua-dark)", "effectiveExpression": "var(--theme-color-aqua-dark)", "effectiveValue": "color-mix(in oklch, #37bfc1, black 10%)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-card-border-color--alternate", "--qp-card-border-color--hover" ] }, { "name": "--qp-border-width", "description": "Choose the standard thickness of ordinary QP edges.", "designType": "border-width", "baseVariableType": "root", "baseExpression": "1px", "variableType": "root", "effectiveExpression": "1px", "effectiveValue": "1px", "resolution": "static", "status": "base" }, { "name": "--qp-card-background", "description": "Uses the canvas color for card background, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "effectiveExpression": "var(--qp-background)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-background" }, { "name": "--qp-card-background--alternate", "description": "Uses the subtle surface color for card background in its alternate state, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-surface-background--muted)", "effectiveValue": "color-mix(in oklch, #37bfc1, white 68%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-surface-background--muted" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "effectiveExpression": "var(--qp-border-color--strong)", "effectiveValue": "color-mix(in oklch, #37bfc1, black 10%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-border-color--strong" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "effectiveExpression": "var(--qp-border-color--strong)", "effectiveValue": "color-mix(in oklch, #37bfc1, black 10%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-border-color--strong" }, { "name": "--qp-card-focus-color", "description": "Uses the primary accent color for card focus color, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-card-focus-width", "description": "Uses the standard focus thickness for card focus width, with semantic remapping for Card-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "declaredExpression": "0px", "effectiveExpression": "0px", "effectiveValue": "0px", "resolution": "static", "status": "override", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-card-icon-glyph-size", "description": "Choose the visual scale of glyphs inside Card icon containers.", "designType": "size", "baseVariableType": "root", "baseExpression": "1.25rem", "variableType": "root", "declaredExpression": "var(--qp-font-size-xl)", "effectiveExpression": "var(--qp-font-size-xl)", "effectiveValue": "clamp(1.2rem, 1.1rem + .5vw, 1.4rem)", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-card-icon-radius", "description": "Uses the compact rounding for card icon radius, with semantic remapping for Card-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-sm)", "variableType": "inherited", "declaredExpression": "var(--qp-system-radius-none)", "effectiveExpression": "var(--qp-system-radius-none)", "effectiveValue": "0", "resolution": "static", "status": "remap", "relationshipSource": "--qp-system-radius-none" }, { "name": "--qp-card-icon-size", "description": "Choose the physical prominence of Card icon containers.", "designType": "size", "baseVariableType": "root", "baseExpression": "2rem", "variableType": "root", "declaredExpression": "auto", "effectiveExpression": "auto", "effectiveValue": "auto", "resolution": "static", "status": "override" }, { "name": "--qp-card-list-gap", "description": "Uses the large spatial rhythm for card list gap, with semantic remapping for CardList-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-card-list-margin", "description": "Calculates trailing CardList separation from large spatial rhythm so lists participate in document cadence without leading space.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "0 0 var(--qp-space-lg)", "variableType": "derived", "declaredExpression": "0 0 var(--qp-grid-gap)", "effectiveExpression": "0 0 var(--qp-grid-gap)", "effectiveValue": "0 0 calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-card-list-min-column-width", "description": "Choose the minimum useful Card column measure before a CardList reflows.", "designType": "size", "baseVariableType": "root", "baseExpression": "15.625rem", "variableType": "root", "effectiveExpression": "15.625rem", "effectiveValue": "15.625rem", "resolution": "browser-dependent", "status": "base" }, { "name": "--qp-card-shadow", "description": "Uses the standard raised-content elevation for card shadow, with semantic remapping for Card-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-raised-content-shadow)", "variableType": "inherited", "effectiveExpression": "var(--qp-raised-content-shadow)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-raised-content-shadow" }, { "name": "--qp-card-text-color", "description": "Uses the primary foreground color for card text color, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--qp-card-title-font-size", "description": "Uses the large type level for card title font size, with semantic remapping for Card-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-font-size-lg)", "effectiveExpression": "var(--qp-font-size-lg)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-font-size-lg" }, { "name": "--qp-card-title-row-justify", "description": "Choose how Card titles and optional icons share horizontal space.", "designType": "layout", "baseVariableType": "root", "baseExpression": "flex-start", "variableType": "root", "declaredExpression": "center", "effectiveExpression": "center", "effectiveValue": "center", "resolution": "static", "status": "override" }, { "name": "--qp-card__body-text-color", "description": "Uses the primary foreground color for card body text color, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--qp-card__icon-background", "description": "Uses the subtle surface color for card icon background, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "declaredExpression": "transparent", "effectiveExpression": "transparent", "effectiveValue": "transparent", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--muted" }, { "name": "--qp-card__icon-text-color", "description": "Uses the strong foreground color for card icon text color, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--strong)", "effectiveValue": "color-mix(in oklch, #003a44, black 24%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--strong" }, { "name": "--qp-card__subtitle-text-color", "description": "Uses the muted foreground color for card subtitle text color, with semantic remapping for Card-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "declaredExpression": "var(--qp-color-white)", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "remap", "relationshipSource": "--qp-color-white" }, { "name": "--qp-card__title-text-color", "description": "Uses the theme's heading color for card__title text color, with semantic remapping for component-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-heading-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-heading-text-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-heading-text-color" }, { "name": "--qp-code-font-family", "description": "Establish the monospace typeface for code and technical reference content.", "designType": "font-family", "baseVariableType": "root", "baseExpression": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", "variableType": "root", "effectiveExpression": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", "effectiveValue": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", "resolution": "static", "status": "base" }, { "name": "--qp-color-black", "description": "Provides black in the Base authored Color vocabulary.", "designType": "color", "baseVariableType": "enum", "baseExpression": "#000000", "variableType": "enum", "effectiveExpression": "#000000", "effectiveValue": "#000000", "resolution": "static", "status": "base" }, { "name": "--qp-color-white", "description": "Provides white in the Base authored Color vocabulary.", "designType": "color", "baseVariableType": "enum", "baseExpression": "#ffffff", "variableType": "enum", "effectiveExpression": "#ffffff", "effectiveValue": "#ffffff", "resolution": "static", "status": "base" }, { "name": "--qp-control-padding-block-md", "description": "Choose the ordinary block-axis density used by action controls and control-like bars.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.7rem", "variableType": "root", "declaredExpression": "0.65rem", "effectiveExpression": "0.65rem", "effectiveValue": "0.65rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-sticky-tray__bar-padding-block" ] }, { "name": "--qp-control-padding-block-sm", "description": "Choose the compact block-axis density used by navigation, search, and similar controls.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.625rem", "variableType": "root", "declaredExpression": "0.55rem", "effectiveExpression": "0.55rem", "effectiveValue": "0.55rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-menu__link-padding-block", "--qp-menu__search-padding-block", "--qp-toc__link-padding-block" ] }, { "name": "--qp-control-padding-inline", "description": "Choose the standard horizontal breathing room for compact navigation, search, and TOC controls.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.75rem", "variableType": "root", "declaredExpression": "0.75rem", "effectiveExpression": "0.75rem", "effectiveValue": "0.75rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-menu__link-padding-inline", "--qp-menu__search-padding-inline", "--qp-toc__link-padding-inline" ] }, { "name": "--qp-cta-background", "description": "Uses the primary accent color for CTA background, with semantic remapping for CTA-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-cta-background--hover", "description": "Uses the strong foreground color for CTA background in its hover state, with semantic remapping for CTA-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--qp-cta-border-color", "description": "Uses the primary accent color for CTA border color, with semantic remapping for CTA-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.88)", "effectiveExpression": "rgba(255, 255, 255, 0.88)", "effectiveValue": "rgba(255, 255, 255, 0.88)", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.85)", "effectiveExpression": "rgba(255, 255, 255, 0.85)", "effectiveValue": "rgba(255, 255, 255, 0.85)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color--muted" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.85)", "effectiveExpression": "rgba(255, 255, 255, 0.85)", "effectiveValue": "rgba(255, 255, 255, 0.85)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.92)", "effectiveExpression": "rgba(255, 255, 255, 0.92)", "effectiveValue": "rgba(255, 255, 255, 0.92)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color--strong" }, { "name": "--qp-cta-border-width", "description": "Uses the standard border thickness for CTA border width, with semantic remapping for CTA-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-width)", "variableType": "inherited", "declaredExpression": "2px", "effectiveExpression": "2px", "effectiveValue": "2px", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-width" }, { "name": "--qp-cta-focus-color", "description": "Uses the primary accent color for CTA focus color, with semantic remapping for CTA-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-cta-focus-width", "description": "Uses the standard focus thickness for CTA focus width, with semantic remapping for CTA-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-cta-font-weight", "description": "Uses the bold emphasis weight for CTA font weight, with semantic remapping for CTA-specific treatment.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-bold)", "variableType": "inherited", "declaredExpression": "var(--qp-font-weight-semibold)", "effectiveExpression": "var(--qp-font-weight-semibold)", "effectiveValue": "600", "resolution": "static", "status": "remap", "relationshipSource": "--qp-font-weight-semibold" }, { "name": "--qp-cta-gap", "description": "Uses the small spatial rhythm for CTA gap, with semantic remapping for CTA-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-cta-margin", "description": "Calculates vertical CTA separation from base spatial rhythm so actions participate consistently in document cadence.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "var(--qp-space-md) 0", "variableType": "derived", "declaredExpression": "auto 0 20px", "effectiveExpression": "auto 0 20px", "effectiveValue": "auto 0 20px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-md" }, { "name": "--qp-cta-max-width", "description": "Choose the maximum horizontal prominence of CTA controls.", "designType": "size", "baseVariableType": "root", "baseExpression": "100%", "variableType": "root", "declaredExpression": "300px", "effectiveExpression": "300px", "effectiveValue": "300px", "resolution": "static", "status": "override" }, { "name": "--qp-cta-min-height", "description": "Choose the minimum interactive height of CTA controls.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.625rem", "variableType": "root", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-cta-padding-block", "description": "Uses the standard control density for CTA padding block, with semantic remapping for CTA-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-block-md)", "variableType": "inherited", "declaredExpression": "0.85rem", "effectiveExpression": "0.85rem", "effectiveValue": "0.85rem", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-control-padding-block-md" }, { "name": "--qp-cta-padding-inline", "description": "Choose the horizontal emphasis and label breathing room of CTA controls.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "1.1rem", "variableType": "root", "declaredExpression": "2.25rem", "effectiveExpression": "2.25rem", "effectiveValue": "2.25rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-cta-radius", "description": "Uses the standard rounding for CTA radius, with semantic remapping for CTA-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "999px", "effectiveExpression": "999px", "effectiveValue": "999px", "resolution": "static", "status": "override", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-cta-shadow", "description": "Choose the resting depth treatment that establishes the primary CTA interaction language.", "designType": "shadow", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "effectiveExpression": "0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "effectiveValue": "0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-cta-shadow--alternate" ] }, { "name": "--qp-cta-shadow--alternate", "description": "Uses the CTA shadow for CTA shadow in its alternate state, with semantic remapping for CTA-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-cta-shadow)", "variableType": "inherited", "effectiveExpression": "var(--qp-cta-shadow)", "effectiveValue": "0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "resolution": "static", "status": "base", "relationshipSource": "--qp-cta-shadow" }, { "name": "--qp-cta-shadow--alternate-hover", "description": "Choose whether alternate CTAs gain a distinct elevation treatment during interaction.", "designType": "shadow", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45)", "effectiveExpression": "0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45)", "effectiveValue": "0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45)", "resolution": "static", "status": "override" }, { "name": "--qp-cta-shadow--hover", "description": "Uses the CTA shadow for CTA shadow in its hover state, with semantic remapping for CTA-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-cta-shadow)", "variableType": "inherited", "declaredExpression": "0 14px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "effectiveExpression": "0 14px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "effectiveValue": "0 14px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25)", "resolution": "static", "status": "override", "relationshipSource": "--qp-cta-shadow" }, { "name": "--qp-cta-text-color", "description": "Uses the canvas color for CTA text color, with semantic remapping for CTA-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "var(--qp-color-white)", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "remap", "relationshipSource": "--qp-color-white" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--qp-dark-panel", "description": "The dark translucent surface used for FeatherQuest overlay panels.", "designType": "color", "variableType": "root", "declaredExpression": "rgba(9, 39, 46, 0.92)", "effectiveExpression": "rgba(9, 39, 46, 0.92)", "effectiveValue": "rgba(9, 39, 46, 0.92)", "resolution": "static", "status": "theme-owned" }, { "name": "--qp-divider-subtle", "description": "A subdued divider color derived from FeatherQuest’s primary foreground color.", "designType": "color", "variableType": "derived", "declaredExpression": "color-mix(in srgb, var(--qp-color-white) 55%, transparent)", "effectiveExpression": "color-mix(in srgb, var(--qp-color-white) 55%, transparent)", "effectiveValue": "color-mix(in srgb, #ffffff 55%, transparent)", "resolution": "browser-dependent", "status": "theme-owned", "relationshipSource": "--qp-color-white" }, { "name": "--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.", "designType": "background", "baseVariableType": "root", "baseExpression": "var(--qp-color-white)", "variableType": "root", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "override" }, { "name": "--qp-document-background-image", "description": "Choose optional artwork, texture, photography, or gradients for the document canvas.", "designType": "background", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "var(--qp-bg-tile)", "effectiveExpression": "var(--qp-bg-tile)", "effectiveValue": "url(\"https://img.featherquest.com/framework/backgrounds/background-tile.svg?v=3\")", "resolution": "static", "status": "override" }, { "name": "--qp-document-background-repeat", "description": "Choose how document background artwork tiles across the canvas.", "designType": "background", "baseVariableType": "root", "baseExpression": "repeat", "variableType": "root", "effectiveExpression": "repeat", "effectiveValue": "repeat", "resolution": "static", "status": "base" }, { "name": "--qp-document-background-size", "description": "Choose how document background artwork is scaled across the canvas.", "designType": "background", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "declaredExpression": "1500px", "effectiveExpression": "1500px", "effectiveValue": "1500px", "resolution": "static", "status": "override" }, { "name": "--qp-document-focus-outline", "description": "Calculates the document focus outline from the authored focus width and accent color.", "designType": "border", "baseVariableType": "derived", "baseExpression": "var(--qp-focus-width) solid var(--qp-accent-color)", "variableType": "derived", "declaredExpression": "var(--qp-focus-width) solid var(--theme-color-gold)", "effectiveExpression": "var(--qp-focus-width) solid var(--theme-color-gold)", "effectiveValue": "2px solid #ffd62f", "resolution": "static", "status": "override", "relationshipSource": [ "--qp-focus-width", "--qp-accent-color" ] }, { "name": "--qp-document-focus-radius", "description": "Uses the compact rounding for document focus radius, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-sm)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-sm)", "effectiveExpression": "var(--qp-radius-sm)", "effectiveValue": "6px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-sm" }, { "name": "--qp-document-font-family", "description": "Establish the primary typeface for document content and inheriting interface text.", "designType": "font-family", "baseVariableType": "root", "baseExpression": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif", "variableType": "root", "declaredExpression": "\"Lato\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", "effectiveExpression": "\"Lato\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", "effectiveValue": "\"Lato\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", "resolution": "static", "status": "override" }, { "name": "--qp-document-font-size", "description": "Uses the body type level for document font size, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-md)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-md)", "effectiveValue": ".9375rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-md" }, { "name": "--qp-document-text-color", "description": "Uses the primary foreground color for document text color, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "var(--qp-color-white)", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "remap", "relationshipSource": "--qp-color-white" }, { "name": "--qp-document__selection-background", "description": "Uses the platform selection highlight for document selection background, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-highlight)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-highlight)", "effectiveValue": "Highlight", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-highlight" }, { "name": "--qp-document__selection-text-color", "description": "Uses the platform selection text color for document selection text color, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-highlight-text)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-highlight-text)", "effectiveValue": "HighlightText", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-highlight-text" }, { "name": "--qp-focus-color", "description": "Chooses the visible focus color used across QP interaction surfaces.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-blue)", "variableType": "root", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "override" }, { "name": "--qp-focus-width", "description": "Choose the standard visible focus-indicator thickness across QP controls and surfaces.", "designType": "border-width", "baseVariableType": "root", "baseExpression": "2px", "variableType": "root", "effectiveExpression": "2px", "effectiveValue": "2px", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-cta-focus-width", "--qp-menu-link-focus-width", "--qp-menu-mobile-toggle-focus-width", "--qp-menu-search-focus-width", "--qp-menu-submenu-focus-width", "--qp-toc-link-focus-width" ] }, { "name": "--qp-font-size-2xl", "description": "Establish the major-heading canonical type level for document-level hierarchy.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "clamp(1.75rem, 1.35rem + 2vw, 2.5rem)", "variableType": "root", "declaredExpression": "clamp(1.625rem, 1.25rem + 2vw, 2rem)", "effectiveExpression": "clamp(1.625rem, 1.25rem + 2vw, 2rem)", "effectiveValue": "clamp(1.625rem, 1.25rem + 2vw, 2rem)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-heading-1-size" ] }, { "name": "--qp-font-size-3xl", "description": "Establish the display canonical type level for responsive PageHeader typography.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "clamp(2.25rem, 1.35rem + 4vw, 4.5rem)", "variableType": "root", "effectiveExpression": "clamp(2.25rem, 1.35rem + 4vw, 4.5rem)", "effectiveValue": "clamp(2.25rem, 1.35rem + 4vw, 4.5rem)", "resolution": "browser-dependent", "status": "base" }, { "name": "--qp-font-size-lg", "description": "Establish the large canonical type level for component titles and modest emphasis.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem)", "variableType": "root", "declaredExpression": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "effectiveExpression": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-heading-3-size", "--qp-modal-title-font-size" ] }, { "name": "--qp-font-size-md", "description": "Establish the standard canonical type level for body copy and ordinary controls.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "1rem", "variableType": "root", "declaredExpression": ".9375rem", "effectiveExpression": ".9375rem", "effectiveValue": ".9375rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-document-font-size" ] }, { "name": "--qp-font-size-sm", "description": "Establish the small canonical type level for captions, secondary text, and compact controls.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "0.9375rem", "variableType": "root", "declaredExpression": ".875rem", "effectiveExpression": ".875rem", "effectiveValue": ".875rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-media-caption-size", "--qp-media-caption-title-size" ] }, { "name": "--qp-font-size-xl", "description": "Establish the extra-large canonical type level for section headings and prominent content titles.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "clamp(1.375rem, 1.15rem + 1vw, 1.75rem)", "variableType": "root", "declaredExpression": "clamp(1.2rem, 1.1rem + .5vw, 1.4rem)", "effectiveExpression": "clamp(1.2rem, 1.1rem + .5vw, 1.4rem)", "effectiveValue": "clamp(1.2rem, 1.1rem + .5vw, 1.4rem)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-heading-2-size" ] }, { "name": "--qp-font-size-xs", "description": "Establish the smallest canonical type level for compact metadata and tertiary labels.", "designType": "font-size", "baseVariableType": "root", "baseExpression": "0.8125rem", "variableType": "root", "declaredExpression": ".75rem", "effectiveExpression": ".75rem", "effectiveValue": ".75rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-font-weight-bold", "description": "Establish the canonical bold weight for headings and strong emphasis.", "designType": "font-weight", "baseVariableType": "root", "baseExpression": "700", "variableType": "root", "effectiveExpression": "700", "effectiveValue": "700", "resolution": "static", "status": "base" }, { "name": "--qp-font-weight-medium", "description": "Establish the canonical medium weight for moderate interface emphasis.", "designType": "font-weight", "baseVariableType": "root", "baseExpression": "500", "variableType": "root", "effectiveExpression": "500", "effectiveValue": "500", "resolution": "static", "status": "base" }, { "name": "--qp-font-weight-regular", "description": "Establish the canonical regular weight for ordinary reading text.", "designType": "font-weight", "baseVariableType": "root", "baseExpression": "400", "variableType": "root", "effectiveExpression": "400", "effectiveValue": "400", "resolution": "static", "status": "base" }, { "name": "--qp-font-weight-semibold", "description": "Establish the canonical semibold weight for navigation, actions, and labels.", "designType": "font-weight", "baseVariableType": "root", "baseExpression": "600", "variableType": "root", "effectiveExpression": "600", "effectiveValue": "600", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-page-list-action-weight" ] }, { "name": "--qp-footer-background", "description": "Uses the subtle surface color for footer background, with semantic remapping for SiteFooter-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--qp-footer-border", "description": "Uses the standard composite border for footer border, with semantic remapping for SiteFooter-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-footer-content-width", "description": "Choose the maximum content measure inside the SiteFooter.", "designType": "size", "baseVariableType": "root", "baseExpression": "min(75rem, 100%)", "variableType": "root", "declaredExpression": "100%", "effectiveExpression": "100%", "effectiveValue": "100%", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-footer-margin-top", "description": "Choose whether the Footer is separated from the document or attached to the preceding surface.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "4rem", "variableType": "root", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-footer-menu-max-width", "description": "Choose the maximum measure available to Footer navigation.", "designType": "size", "baseVariableType": "root", "baseExpression": "100%", "variableType": "root", "declaredExpression": "970px", "effectiveExpression": "970px", "effectiveValue": "970px", "resolution": "static", "status": "override" }, { "name": "--qp-footer-menu-width", "description": "Choose whether Footer navigation fills or shrink-wraps its available measure.", "designType": "size", "baseVariableType": "root", "baseExpression": "fit-content", "variableType": "root", "declaredExpression": "100%", "effectiveExpression": "100%", "effectiveValue": "100%", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-footer-text-color", "description": "Uses the muted foreground color for footer text color, with semantic remapping for SiteFooter-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--muted)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--muted" }, { "name": "--qp-footer__section-padding-block", "description": "Uses the large spatial rhythm for footer section padding block, with semantic remapping for SiteFooter-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-lg" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-padding-inline)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-padding-inline" }, { "name": "--qp-gallery-caption-radius", "description": "Uses the framework-defined absence of rounding for gallery caption radius, with semantic remapping for Gallery-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-radius-none)", "variableType": "inherited", "declaredExpression": "0 0 var(--qp-radius-md) var(--qp-radius-md)", "effectiveExpression": "0 0 var(--qp-radius-md) var(--qp-radius-md)", "effectiveValue": "0 0 12px 12px", "resolution": "static", "status": "override", "relationshipSource": "--qp-system-radius-none" }, { "name": "--qp-gallery-gap", "description": "Uses the base spatial rhythm for gallery gap, with semantic remapping for Gallery-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "declaredExpression": "var(--qp-space-md)", "effectiveExpression": "var(--qp-space-md)", "effectiveValue": "1rem", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-space-md" }, { "name": "--qp-gallery-image-height", "description": "Choose the common rendered height used to align Gallery imagery.", "designType": "size", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "declaredExpression": "100%", "effectiveExpression": "100%", "effectiveValue": "100%", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-gallery-image-radius", "description": "Uses the framework-defined absence of rounding for gallery image radius, with semantic remapping for Gallery-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-radius-none)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-md) var(--qp-radius-md) 0 0", "effectiveExpression": "var(--qp-radius-md) var(--qp-radius-md) 0 0", "effectiveValue": "12px 12px 0 0", "resolution": "static", "status": "override", "relationshipSource": "--qp-system-radius-none" }, { "name": "--qp-gallery-item-aspect-ratio", "description": "Choose the standard framing proportion of Gallery items.", "designType": "size", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "declaredExpression": "7 / 5", "effectiveExpression": "7 / 5", "effectiveValue": "7 / 5", "resolution": "static", "status": "override" }, { "name": "--qp-gallery-item-min-width", "description": "Choose the minimum useful Gallery item measure before the Gallery reflows.", "designType": "size", "baseVariableType": "root", "baseExpression": "220px", "variableType": "root", "declaredExpression": "312px", "effectiveExpression": "312px", "effectiveValue": "312px", "resolution": "static", "status": "override" }, { "name": "--qp-gallery-max-width", "description": "Choose the maximum composition width of a Gallery.", "designType": "size", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "1200px", "effectiveExpression": "1200px", "effectiveValue": "1200px", "resolution": "static", "status": "override" }, { "name": "--qp-gallery-portrait-aspect-ratio", "description": "Choose the framing proportion used for portrait Gallery items.", "designType": "size", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "declaredExpression": "5 / 7", "effectiveExpression": "5 / 7", "effectiveValue": "5 / 7", "resolution": "static", "status": "override" }, { "name": "--qp-gallery__caption-background", "description": "Uses the framework-defined transparent color for gallery caption background, with semantic remapping for Gallery-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .4)", "effectiveExpression": "rgba(0, 0, 0, .4)", "effectiveValue": "rgba(0, 0, 0, .4)", "resolution": "static", "status": "override", "relationshipSource": "--qp-system-color-transparent" }, { "name": "--qp-gallery__caption-secondary-text-color", "description": "Uses the subdued inverse foreground for Gallery caption secondary text, with semantic remapping for Gallery-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse-muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse-muted)", "effectiveValue": "#ccc", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse-muted" }, { "name": "--qp-gallery__caption-text-color", "description": "Uses the primary foreground color for gallery caption text color, with semantic remapping for Gallery-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-grid-gap", "description": "Uses the large spatial rhythm for grid gap, with semantic remapping for Foundation-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-space-lg)", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-heading-1-line-height", "description": "Uses the heading text rhythm for heading 1 line height, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "line-height", "baseVariableType": "inherited", "baseExpression": "var(--qp-heading-line-height)", "variableType": "inherited", "declaredExpression": "1.7em", "effectiveExpression": "1.7em", "effectiveValue": "1.7em", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-heading-line-height" }, { "name": "--qp-heading-1-size", "description": "Uses the major-heading type level for heading 1 size, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-2xl)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-2xl)", "effectiveValue": "clamp(1.625rem, 1.25rem + 2vw, 2rem)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-2xl" }, { "name": "--qp-heading-2-size", "description": "Uses the extra-large type level for heading 2 size, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-xl)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-xl)", "effectiveValue": "clamp(1.2rem, 1.1rem + .5vw, 1.4rem)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-xl" }, { "name": "--qp-heading-3-size", "description": "Uses the large type level for heading 3 size, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-lg)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-lg" }, { "name": "--qp-heading-font-family", "description": "Uses the document typeface for heading font family, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-family", "baseVariableType": "inherited", "baseExpression": "var(--qp-document-font-family)", "variableType": "inherited", "declaredExpression": "\"Playwrite DE Grund\", Georgia, serif", "effectiveExpression": "\"Playwrite DE Grund\", Georgia, serif", "effectiveValue": "\"Playwrite DE Grund\", Georgia, serif", "resolution": "static", "status": "override", "relationshipSource": "--qp-document-font-family" }, { "name": "--qp-heading-font-weight", "description": "Uses the bold emphasis weight for heading font weight, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-bold)", "variableType": "inherited", "declaredExpression": "var(--qp-font-weight-regular)", "effectiveExpression": "var(--qp-font-weight-regular)", "effectiveValue": "400", "resolution": "static", "status": "remap", "relationshipSource": "--qp-font-weight-regular" }, { "name": "--qp-heading-line-height", "description": "Choose the shared vertical rhythm for document headings.", "designType": "line-height", "baseVariableType": "root", "baseExpression": "1.2", "variableType": "root", "effectiveExpression": "1.2", "effectiveValue": "1.2", "resolution": "static", "status": "base" }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-ink-dark)", "variableType": "root", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-card__title-text-color", "--qp-page-header__title-text-color" ] }, { "name": "--qp-heading-text-color--primary", "description": "Uses the theme's heading color for heading text color primary, with semantic remapping for component-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-heading-text-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, .98)", "effectiveExpression": "rgba(255, 255, 255, .98)", "effectiveValue": "rgba(255, 255, 255, .98)", "resolution": "static", "status": "override", "relationshipSource": "--qp-heading-text-color" }, { "name": "--qp-icon-size", "description": "Choose the default scale of inline icons relative to surrounding content.", "designType": "size", "baseVariableType": "root", "baseExpression": "1em", "variableType": "root", "effectiveExpression": "1em", "effectiveValue": "1em", "resolution": "browser-dependent", "status": "base" }, { "name": "--qp-image-border", "description": "Choose whether ordinary inline media receives a complete framing border.", "designType": "border", "baseVariableType": "root", "baseExpression": "0", "variableType": "root", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "base" }, { "name": "--qp-image-max-height", "description": "Choose the maximum displayed height of ordinary inline images.", "designType": "size", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "base" }, { "name": "--qp-image-radius", "description": "Uses the framework-defined absence of rounding for image radius, with semantic remapping for Image-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-radius-none)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-radius-none)", "effectiveValue": "0", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-radius-none" }, { "name": "--qp-image-shadow", "description": "Uses the standard raised-content elevation for image shadow, with semantic remapping for Image-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-raised-content-shadow)", "variableType": "inherited", "effectiveExpression": "var(--qp-raised-content-shadow)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-raised-content-shadow" }, { "name": "--qp-image-width", "description": "Choose whether ordinary inline images occupy their available content width or shrink to the rendered media width.", "designType": "size", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "effectiveExpression": "auto", "effectiveValue": "auto", "resolution": "static", "status": "base" }, { "name": "--qp-image__badge-background", "description": "Uses the canvas color for image badge background, with semantic remapping for Image-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .55))", "effectiveExpression": "linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .55))", "effectiveValue": "linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .55))", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-image__badge-border", "description": "Uses the standard complete border for image badge border, with semantic remapping for component-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "1px solid rgba(255, 255, 255, .16)", "effectiveExpression": "1px solid rgba(255, 255, 255, .16)", "effectiveValue": "1px solid rgba(255, 255, 255, .16)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-image__badge-text-color", "description": "Uses the primary foreground color for image badge text color, with semantic remapping for Image-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, .92)", "effectiveExpression": "rgba(255, 255, 255, .92)", "effectiveValue": "rgba(255, 255, 255, .92)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color" }, { "name": "--qp-lightbox-backdrop", "description": "Derives lightbox backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.", "designType": "color", "baseVariableType": "derived", "baseExpression": "color-mix(in srgb, var(--qp-color-black) 86%, transparent)", "variableType": "derived", "declaredExpression": "rgba(0, 0, 0, .85)", "effectiveExpression": "rgba(0, 0, 0, .85)", "effectiveValue": "rgba(0, 0, 0, .85)", "resolution": "static", "status": "override", "relationshipSource": "--qp-color-black" }, { "name": "--qp-lightbox-backdrop-filter", "description": "Choose the complete compositing treatment behind the Lightbox surface.", "designType": "effect", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "blur(6px)", "effectiveExpression": "blur(6px)", "effectiveValue": "blur(6px)", "resolution": "static", "status": "override" }, { "name": "--qp-lightbox-close-size", "description": "Choose the physical size of the Lightbox close control.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.5rem", "variableType": "root", "declaredExpression": "36px", "effectiveExpression": "36px", "effectiveValue": "36px", "resolution": "static", "status": "override" }, { "name": "--qp-lightbox-padding", "description": "Uses the base spatial rhythm for lightbox padding, with semantic remapping for Lightbox-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-md" }, { "name": "--qp-lightbox-radius", "description": "Uses the compact rounding for lightbox radius, with semantic remapping for Lightbox-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-sm)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-sm)", "effectiveExpression": "var(--qp-radius-sm)", "effectiveValue": "6px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-sm" }, { "name": "--qp-lightbox-text-color", "description": "Uses the canvas color for lightbox text color, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--qp-lightbox__caption-background", "description": "Uses the framework-defined transparent color for lightbox caption background, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-transparent)", "effectiveValue": "transparent", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-transparent" }, { "name": "--qp-lightbox__caption-secondary-text-color", "description": "Uses the subdued inverse foreground for Lightbox caption secondary text, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse-muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse-muted)", "effectiveValue": "#ccc", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse-muted" }, { "name": "--qp-lightbox__caption-text-color", "description": "Uses the canvas color for lightbox caption text color, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-lightbox__control-background", "description": "Uses the canvas color for lightbox control background, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "#000", "effectiveExpression": "#000", "effectiveValue": "#000", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-lightbox__control-border", "description": "Uses the standard complete border for lightbox control border, with semantic remapping for component-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "none", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-lightbox__control-text-color", "description": "Uses the primary foreground color for lightbox control text color, with semantic remapping for Lightbox-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "#fff", "effectiveExpression": "#fff", "effectiveValue": "#fff", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color" }, { "name": "--qp-lightbox__item-border-color--selected", "description": "Chooses the lightbox__item border color selected treatment independently when it requires the Base white vocabulary value.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-white)", "variableType": "root", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base" }, { "name": "--qp-line-body", "description": "Choose the default vertical rhythm for body copy and ordinary readable text.", "designType": "line-height", "baseVariableType": "root", "baseExpression": "1.5", "variableType": "root", "declaredExpression": "1.4", "effectiveExpression": "1.4", "effectiveValue": "1.4", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-media-caption-line-height", "--qp-media-caption-subtitle-line-height", "--qp-media-caption-title-line-height" ] }, { "name": "--qp-link-text-color", "description": "Chooses the ordinary link color independently from other interactive emphasis.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-blue)", "variableType": "root", "declaredExpression": "var(--theme-color-aqua)", "effectiveExpression": "var(--theme-color-aqua)", "effectiveValue": "#37bfc1", "resolution": "static", "status": "override" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-link-text-color--visited", "description": "Derives the visited-link color from the ordinary link decision so link identity remains coordinated across states.", "designType": "color", "baseVariableType": "derived", "baseExpression": "color-mix(in oklch, var(--qp-link-text-color), black 18%)", "variableType": "derived", "declaredExpression": "var(--theme-color-aqua)", "effectiveExpression": "var(--theme-color-aqua)", "effectiveValue": "#37bfc1", "resolution": "static", "status": "override", "relationshipSource": "--qp-link-text-color" }, { "name": "--qp-media-caption-gap", "description": "Uses the small spatial rhythm for media caption gap, with semantic remapping for MediaCaption-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-sm)", "effectiveValue": "calc(1rem * .5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-media-caption-line-height", "description": "Uses the body text rhythm for media caption line height, with semantic remapping for MediaCaption-specific treatment.", "designType": "line-height", "baseVariableType": "inherited", "baseExpression": "var(--qp-line-body)", "variableType": "inherited", "effectiveExpression": "var(--qp-line-body)", "effectiveValue": "1.4", "resolution": "static", "status": "base", "relationshipSource": "--qp-line-body" }, { "name": "--qp-media-caption-size", "description": "Uses the small type level for media caption size, with semantic remapping for MediaCaption-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-sm)", "effectiveValue": ".875rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-sm" }, { "name": "--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.", "designType": "line-height", "baseVariableType": "inherited", "baseExpression": "var(--qp-line-body)", "variableType": "inherited", "effectiveExpression": "var(--qp-line-body)", "effectiveValue": "1.4", "resolution": "static", "status": "base", "relationshipSource": "--qp-line-body" }, { "name": "--qp-media-caption-text-color", "description": "Uses the muted foreground color for media caption text color, with semantic remapping for MediaCaption-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--muted)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--muted" }, { "name": "--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.", "designType": "line-height", "baseVariableType": "inherited", "baseExpression": "var(--qp-line-body)", "variableType": "inherited", "effectiveExpression": "var(--qp-line-body)", "effectiveValue": "1.4", "resolution": "static", "status": "base", "relationshipSource": "--qp-line-body" }, { "name": "--qp-media-caption-title-size", "description": "Uses the small type level for media caption title size, with semantic remapping for MediaCaption-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-sm)", "effectiveValue": ".875rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-sm" }, { "name": "--qp-media-caption__subtitle-gap", "description": "Uses the extra-small spatial rhythm for media caption subtitle gap, with semantic remapping for MediaCaption-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xs)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-xs)", "effectiveValue": "calc(1rem * .25)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-xs" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-space-none)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-space-none)", "effectiveValue": "0", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-space-none" }, { "name": "--qp-menu-gap", "description": "Choose the density of top-level navigation items without changing their clickable padding.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.375rem", "variableType": "root", "declaredExpression": "0.2rem", "effectiveExpression": "0.2rem", "effectiveValue": "0.2rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-menu-link-focus-width", "description": "Uses the standard focus thickness for menu link focus width, with semantic remapping for Menu-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-menu-link-font-weight", "description": "Uses the semibold emphasis weight for menu link font weight, with semantic remapping for Menu-specific treatment.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-semibold)", "variableType": "inherited", "declaredExpression": "var(--qp-font-weight-regular)", "effectiveExpression": "var(--qp-font-weight-regular)", "effectiveValue": "400", "resolution": "static", "status": "remap", "relationshipSource": "--qp-font-weight-regular" }, { "name": "--qp-menu-link-min-height", "description": "Choose the minimum interactive height of Menu links.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.75rem", "variableType": "root", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-menu-link-radius", "description": "Uses the standard rounding for menu link radius, with semantic remapping for Menu-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-md)", "effectiveExpression": "var(--qp-radius-md)", "effectiveValue": "12px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-md" }, { "name": "--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.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-font-size-lg)", "effectiveExpression": "var(--qp-font-size-lg)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-font-size-lg" }, { "name": "--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.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-semibold)", "variableType": "inherited", "declaredExpression": "var(--qp-font-weight-semibold)", "effectiveExpression": "var(--qp-font-weight-semibold)", "effectiveValue": "600", "resolution": "static", "status": "remap", "relationshipSource": "--qp-font-weight-semibold" }, { "name": "--qp-menu-mobile-link-radius", "description": "Uses the standard rounding for menu mobile link radius, with semantic remapping for Menu-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "var(--qp-system-radius-none)", "effectiveExpression": "var(--qp-system-radius-none)", "effectiveValue": "0", "resolution": "static", "status": "remap", "relationshipSource": "--qp-system-radius-none" }, { "name": "--qp-menu-mobile-list-display", "description": "Choose the layout mode used to compose the open mobile navigation list.", "designType": "layout", "baseVariableType": "root", "baseExpression": "grid", "variableType": "root", "declaredExpression": "block", "effectiveExpression": "block", "effectiveValue": "block", "resolution": "static", "status": "override" }, { "name": "--qp-menu-mobile-list-radius", "description": "Uses the prominent rounding for menu mobile list radius, with semantic remapping for Menu-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-lg)", "effectiveExpression": "var(--qp-radius-lg)", "effectiveValue": "18px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-menu-mobile-list-width", "description": "Choose the maximum usable width of the mobile Menu surface.", "designType": "size", "baseVariableType": "root", "baseExpression": "min(32rem, 100%)", "variableType": "root", "declaredExpression": "min(560px, 100%)", "effectiveExpression": "min(560px, 100%)", "effectiveValue": "min(560px, 100%)", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-menu-mobile-toggle-icon-size", "description": "Choose the visual scale of the mobile Menu toggle glyph.", "designType": "size", "baseVariableType": "root", "baseExpression": "1.25rem", "variableType": "root", "declaredExpression": "1.375rem", "effectiveExpression": "1.375rem", "effectiveValue": "1.375rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-menu-mobile-toggle-radius", "description": "Uses the standard rounding for menu mobile toggle radius, with semantic remapping for Menu-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-md)", "effectiveExpression": "var(--qp-radius-md)", "effectiveValue": "12px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-menu-mobile-toggle-size", "description": "Choose the physical size of the mobile Menu toggle control.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.75rem", "variableType": "root", "declaredExpression": "44px", "effectiveExpression": "44px", "effectiveValue": "44px", "resolution": "static", "status": "override" }, { "name": "--qp-menu-nested-border", "description": "Uses the strong complete border for nested Menu hierarchy guides, with semantic remapping for Menu-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border--strong)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-border--strong" }, { "name": "--qp-menu-nested-gap", "description": "Choose the separation between entries in a nested navigation hierarchy.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.125rem", "variableType": "root", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-menu-nested-indent", "description": "Uses the base spatial rhythm for menu nested indent, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-md" }, { "name": "--qp-menu-search-focus-width", "description": "Uses the standard focus thickness for menu search focus width, with semantic remapping for Menu-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-menu-submenu-focus-width", "description": "Uses the standard focus thickness for menu submenu focus width, with semantic remapping for Menu-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-menu-submenu-toggle-radius", "description": "Uses the compact rounding for menu submenu toggle radius, with semantic remapping for Menu-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-sm)", "variableType": "inherited", "declaredExpression": "999px", "effectiveExpression": "999px", "effectiveValue": "999px", "resolution": "static", "status": "override", "relationshipSource": "--qp-radius-sm" }, { "name": "--qp-menu-submenu-toggle-size", "description": "Choose the physical size of submenu disclosure controls.", "designType": "size", "baseVariableType": "root", "baseExpression": "2rem", "variableType": "root", "declaredExpression": "1.9rem", "effectiveExpression": "1.9rem", "effectiveValue": "1.9rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.06)", "effectiveExpression": "rgba(255, 255, 255, 0.06)", "effectiveValue": "rgba(255, 255, 255, 0.06)", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--hover" }, { "name": "--qp-menu__link-focus-color", "description": "Uses the primary accent color for menu link focus color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 214, 47, 0.85)", "effectiveExpression": "rgba(255, 214, 47, 0.85)", "effectiveValue": "rgba(255, 214, 47, 0.85)", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-menu__link-padding-block", "description": "Uses the compact control density for menu link padding block, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-block-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-block-sm)", "effectiveValue": "0.55rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-block-sm" }, { "name": "--qp-menu__link-padding-inline", "description": "Uses the compact-control inline inset for menu link padding inline, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-inline)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-inline)", "effectiveValue": "0.75rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-inline" }, { "name": "--qp-menu__link-text-color", "description": "Uses the primary foreground color for menu link text color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.88)", "effectiveExpression": "rgba(255, 255, 255, 0.88)", "effectiveValue": "rgba(255, 255, 255, 0.88)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-menu__mobile-link-background", "description": "Uses the framework-defined transparent color for menu mobile link background, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-transparent)", "effectiveValue": "transparent", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-transparent" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-background--hover)", "effectiveExpression": "var(--qp-menu__link-background--hover)", "effectiveValue": "rgba(255, 255, 255, 0.06)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-background--hover" }, { "name": "--qp-menu__mobile-link-padding-block", "description": "Choose mobile navigation touch density independently from compact desktop controls.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.75rem", "variableType": "root", "declaredExpression": "1.25rem", "effectiveExpression": "1.25rem", "effectiveValue": "1.25rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "declaredExpression": "1.35rem", "effectiveExpression": "1.35rem", "effectiveValue": "1.35rem", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-space-md" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__mobile-toggle-text-color)", "effectiveExpression": "var(--qp-menu__mobile-toggle-text-color)", "effectiveValue": "rgba(255, 255, 255, 0.92)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__mobile-toggle-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-menu__mobile-list-background", "description": "Uses the canvas color for menu mobile list background, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, 0.30)", "effectiveExpression": "rgba(0, 0, 0, 0.30)", "effectiveValue": "rgba(0, 0, 0, 0.30)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-menu__mobile-list-border", "description": "Uses the standard composite border for menu mobile list border, with semantic remapping for Menu-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "1px solid var(--qp-border-accent)", "effectiveExpression": "1px solid var(--qp-border-accent)", "effectiveValue": "1px solid color-mix(in srgb, #ffffff 14%, transparent)", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-menu__mobile-list-gap", "description": "Uses the extra-small spatial rhythm for menu mobile list gap, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xs)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-xs" }, { "name": "--qp-menu__mobile-list-margin", "description": "Choose how the expanded mobile navigation panel separates from header content.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.75rem auto 0", "variableType": "root", "declaredExpression": "1rem auto 0", "effectiveExpression": "1rem auto 0", "effectiveValue": "1rem auto 0", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-menu__mobile-list-padding", "description": "Uses the small spatial rhythm for menu mobile list padding, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-menu__mobile-toggle-background", "description": "Uses the canvas color for menu mobile toggle background, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, 0.20)", "effectiveExpression": "rgba(0, 0, 0, 0.20)", "effectiveValue": "rgba(0, 0, 0, 0.20)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.08)", "effectiveExpression": "rgba(255, 255, 255, 0.08)", "effectiveValue": "rgba(255, 255, 255, 0.08)", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--hover" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.16)", "effectiveExpression": "rgba(255, 255, 255, 0.16)", "effectiveValue": "rgba(255, 255, 255, 0.16)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-color--strong" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-focus-color)", "effectiveExpression": "var(--qp-menu__link-focus-color)", "effectiveValue": "rgba(255, 214, 47, 0.85)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-focus-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.92)", "effectiveExpression": "rgba(255, 255, 255, 0.92)", "effectiveValue": "rgba(255, 255, 255, 0.92)", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-menu__nested-list-background", "description": "Uses the canvas color for nested Menu branch backgrounds, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__search-background)", "effectiveExpression": "var(--qp-menu__search-background)", "effectiveValue": "rgba(0, 0, 0, 0.45)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__search-background" }, { "name": "--qp-menu__search-background", "description": "Uses the canvas color for menu search background, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, 0.45)", "effectiveExpression": "rgba(0, 0, 0, 0.45)", "effectiveValue": "rgba(0, 0, 0, 0.45)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-menu__search-border-color", "description": "Uses the strong edge color for menu search border color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.25)", "effectiveExpression": "rgba(255, 255, 255, 0.25)", "effectiveValue": "rgba(255, 255, 255, 0.25)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-color--strong" }, { "name": "--qp-menu__search-empty-text-color", "description": "Uses the subdued inverse foreground for Menu search empty text, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse-muted)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.72)", "effectiveExpression": "rgba(255, 255, 255, 0.72)", "effectiveValue": "rgba(255, 255, 255, 0.72)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color--inverse-muted" }, { "name": "--qp-menu__search-focus-color", "description": "Uses the primary accent color for menu search focus color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-menu__search-padding-block", "description": "Uses the compact control density for menu search padding block, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-block-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-block-sm)", "effectiveValue": "0.55rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-block-sm" }, { "name": "--qp-menu__search-padding-inline", "description": "Uses the compact-control inline inset for menu search padding inline, with semantic remapping for Menu-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-inline)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-inline)", "effectiveValue": "0.75rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-inline" }, { "name": "--qp-menu__search-text-color", "description": "Uses the strong foreground color for menu search text color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "#fff", "effectiveExpression": "#fff", "effectiveValue": "#fff", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color--strong" }, { "name": "--qp-menu__submenu-focus-color", "description": "Uses the primary accent color for menu submenu focus color, with semantic remapping for Menu-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-focus-color)", "effectiveExpression": "var(--qp-menu__link-focus-color)", "effectiveValue": "rgba(255, 214, 47, 0.85)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-focus-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.1)", "effectiveExpression": "rgba(255, 255, 255, 0.1)", "effectiveValue": "rgba(255, 255, 255, 0.1)", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--hover" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--strong)", "effectiveValue": "color-mix(in oklch, #003a44, black 24%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--strong" }, { "name": "--qp-modal-backdrop", "description": "Derives modal backdrop from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.", "designType": "color", "baseVariableType": "derived", "baseExpression": "color-mix(in srgb, var(--qp-color-black) 55%, transparent)", "variableType": "derived", "effectiveExpression": "color-mix(in srgb, var(--qp-color-black) 55%, transparent)", "effectiveValue": "color-mix(in srgb, #000000 55%, transparent)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-color-black" }, { "name": "--qp-modal-backdrop-filter", "description": "Choose the complete compositing treatment behind Modal content.", "designType": "effect", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "blur(6px)", "effectiveExpression": "blur(6px)", "effectiveValue": "blur(6px)", "resolution": "static", "status": "override" }, { "name": "--qp-modal-background", "description": "Uses the canvas color for modal background, with semantic remapping for Modal-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "var(--qp-dark-panel)", "effectiveExpression": "var(--qp-dark-panel)", "effectiveValue": "rgba(9, 39, 46, 0.92)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-dark-panel" }, { "name": "--qp-modal-border", "description": "Uses the standard complete border for modal border, with semantic remapping for component-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "1px solid var(--qp-border-accent)", "effectiveExpression": "1px solid var(--qp-border-accent)", "effectiveValue": "1px solid color-mix(in srgb, #ffffff 14%, transparent)", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-modal-inset", "description": "Uses the large spatial rhythm for modal inset, with semantic remapping for Modal-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-modal-max-width", "description": "Choose the maximum composition width of Modal surfaces.", "designType": "size", "baseVariableType": "root", "baseExpression": "720px", "variableType": "root", "effectiveExpression": "720px", "effectiveValue": "720px", "resolution": "static", "status": "base" }, { "name": "--qp-modal-padding", "description": "Uses the large spatial rhythm for modal padding, with semantic remapping for Modal-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "26px 26px 22px", "effectiveExpression": "26px 26px 22px", "effectiveValue": "26px 26px 22px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-modal-radius", "description": "Uses the standard rounding for modal radius, with semantic remapping for Modal-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "22px", "effectiveExpression": "22px", "effectiveValue": "22px", "resolution": "static", "status": "override", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-modal-shadow", "description": "Derives modal shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.", "designType": "shadow", "baseVariableType": "derived", "baseExpression": "0 12px 40px color-mix(in srgb, var(--qp-color-black) 25%, transparent)", "variableType": "derived", "declaredExpression": "0 24px 80px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .06) inset", "effectiveExpression": "0 24px 80px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .06) inset", "effectiveValue": "0 24px 80px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .06) inset", "resolution": "static", "status": "override", "relationshipSource": "--qp-color-black" }, { "name": "--qp-modal-text-color", "description": "Uses the primary foreground color for modal text color, with semantic remapping for Modal-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "#fff", "effectiveExpression": "#fff", "effectiveValue": "#fff", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color" }, { "name": "--qp-modal-title-font-size", "description": "Uses the large type level for modal title font size, with semantic remapping for Modal-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-size-lg)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-font-size-lg" }, { "name": "--qp-modal__close-background", "description": "Uses the canvas color for modal close background, with semantic remapping for Modal-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .25)", "effectiveExpression": "rgba(0, 0, 0, .25)", "effectiveValue": "rgba(0, 0, 0, .25)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .45)", "effectiveExpression": "rgba(0, 0, 0, .45)", "effectiveValue": "rgba(0, 0, 0, .45)", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--hover" }, { "name": "--qp-modal__close-border", "description": "Uses the standard complete border for modal close border, with semantic remapping for component-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "2px solid var(--theme-color-gold)", "effectiveExpression": "2px solid var(--theme-color-gold)", "effectiveValue": "2px solid #ffd62f", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-modal__close-text-color", "description": "Uses the primary foreground color for modal close text color, with semantic remapping for Modal-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-modal__title-text-color", "description": "Uses the theme's heading color for modal__title text color, with semantic remapping for component-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-heading-text-color)", "variableType": "inherited", "declaredExpression": "var(--qp-color-white)", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "remap", "relationshipSource": "--qp-color-white" }, { "name": "--qp-page-header-background", "description": "Uses the framework-defined transparent color for page header background, with semantic remapping for PageHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-transparent)", "effectiveValue": "transparent", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-transparent" }, { "name": "--qp-page-header-content-width", "description": "Uses the section width default for page header content width, with semantic remapping for PageHeader-specific treatment.", "designType": "size", "baseVariableType": "inherited", "baseExpression": "var(--qp-section-width-default)", "variableType": "inherited", "effectiveExpression": "var(--qp-section-width-default)", "effectiveValue": "60rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-section-width-default" }, { "name": "--qp-page-header-hero-aspect-ratio", "description": "Choose the framing proportion of PageHeader hero media.", "designType": "size", "baseVariableType": "root", "baseExpression": "16 / 9", "variableType": "root", "effectiveExpression": "16 / 9", "effectiveValue": "16 / 9", "resolution": "static", "status": "base" }, { "name": "--qp-page-header-hero-background", "description": "Uses the primary accent color for page header hero background, with semantic remapping for PageHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "transparent", "effectiveExpression": "transparent", "effectiveValue": "transparent", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--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.", "designType": "size", "baseVariableType": "inherited", "baseExpression": "var(--qp-section-width-wide)", "variableType": "inherited", "declaredExpression": "none", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "override", "relationshipSource": "--qp-section-width-wide" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-xl)", "effectiveValue": "calc(1rem * 2)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-xl" }, { "name": "--qp-page-header-padding-block", "description": "Uses the extra-large spatial rhythm for page header padding block, with semantic remapping for PageHeader-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "declaredExpression": "0px", "effectiveExpression": "0px", "effectiveValue": "0px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-xl" }, { "name": "--qp-page-header-panel-inline-size", "description": "Calculates page header panel inline size from the base spatial rhythm to preserve equal responsive edge insets.", "designType": "size", "baseVariableType": "derived", "baseExpression": "calc(100% - (var(--qp-space-md) * 2))", "variableType": "derived", "effectiveExpression": "calc(100% - (var(--qp-space-md) * 2))", "effectiveValue": "calc(100% - (1rem * 2))", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md" }, { "name": "--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.", "designType": "size", "baseVariableType": "inherited", "baseExpression": "var(--qp-subtitle-max-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-subtitle-max-width)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-subtitle-max-width" }, { "name": "--qp-page-header-text-color", "description": "Uses the primary foreground color for page header text color, with semantic remapping for PageHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-3xl)", "variableType": "inherited", "declaredExpression": "var(--qp-font-size-2xl)", "effectiveExpression": "var(--qp-font-size-2xl)", "effectiveValue": "clamp(1.625rem, 1.25rem + 2vw, 2rem)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-font-size-2xl" }, { "name": "--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.", "designType": "color", "baseVariableType": "derived", "baseExpression": "linear-gradient(0deg, color-mix(in srgb, var(--qp-text-color) 88%, transparent), color-mix(in srgb, var(--qp-text-color) 8%, transparent))", "variableType": "derived", "effectiveExpression": "linear-gradient(0deg, color-mix(in srgb, var(--qp-text-color) 88%, transparent), color-mix(in srgb, var(--qp-text-color) 8%, transparent))", "effectiveValue": "linear-gradient(0deg, color-mix(in srgb, #003a44 88%, transparent), color-mix(in srgb, #003a44 8%, transparent))", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-xl)", "effectiveValue": "calc(1rem * 2)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-xl" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-lg" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-padding-inline)", "variableType": "inherited", "effectiveExpression": "var(--qp-surface-padding-inline)", "effectiveValue": "clamp(14px, 2.2vw, 22px)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-surface-padding-inline" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-md)", "effectiveValue": "1rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--qp-page-header__hero-text-color", "description": "Uses the canvas color for page header hero text color, with semantic remapping for PageHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--muted)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--muted" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-heading-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-heading-text-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-heading-text-color" }, { "name": "--qp-page-list-action-radius", "description": "Uses the standard rounding for page list action radius, with semantic remapping for PageList-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "effectiveExpression": "var(--qp-radius-md)", "effectiveValue": "12px", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-page-list-action-weight", "description": "Uses the semibold emphasis weight for page list action weight, with semantic remapping for PageList-specific treatment.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-semibold)", "variableType": "inherited", "effectiveExpression": "var(--qp-font-weight-semibold)", "effectiveValue": "600", "resolution": "static", "status": "base", "relationshipSource": "--qp-font-weight-semibold" }, { "name": "--qp-page-list__action-background", "description": "Uses the subtle surface color for page list action background, with semantic remapping for PageList-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-surface-background--muted)", "effectiveValue": "color-mix(in oklch, #37bfc1, white 68%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-surface-background--muted" }, { "name": "--qp-page-list__action-border", "description": "Uses the standard complete border for page list action border, with semantic remapping for component-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "effectiveExpression": "var(--qp-border)", "effectiveValue": "1px solid #37bfc1", "resolution": "static", "status": "base", "relationshipSource": "--qp-border" }, { "name": "--qp-page-list__action-padding", "description": "Builds the PageList action-label padding recipe from standard control density while retaining its local inline inset.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "var(--qp-control-padding-block-md) 1rem", "variableType": "derived", "effectiveExpression": "var(--qp-control-padding-block-md) 1rem", "effectiveValue": "0.65rem 1rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-block-md" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--qp-page-list__body-gap", "description": "Uses the small spatial rhythm for page list body gap, with semantic remapping for PageList-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-space-md)", "effectiveExpression": "var(--qp-space-md)", "effectiveValue": "1rem", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-space-md" }, { "name": "--qp-page-max-width", "description": "Choose the maximum width of the QP page canvas.", "designType": "size", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "base" }, { "name": "--qp-page-padding-bottom", "description": "Uses the framework-defined absence of spacing for page padding bottom, with semantic remapping for PageDocument-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-space-none)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-space-none)", "effectiveValue": "0", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-space-none" }, { "name": "--qp-page-padding-inline", "description": "Uses the framework-defined absence of spacing for page padding inline, with semantic remapping for PageDocument-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-space-none)", "variableType": "inherited", "declaredExpression": "var(--qp-space-lg)", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-page-padding-top", "description": "Uses the framework-defined absence of spacing for page padding top, with semantic remapping for PageDocument-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-space-none)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-space-none)", "effectiveValue": "0", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-space-none" }, { "name": "--qp-product-list-image-ratio", "description": "Choose the consistent framing proportion used for product imagery across a ProductList.", "designType": "size", "baseVariableType": "root", "baseExpression": "4 / 3", "variableType": "root", "effectiveExpression": "4 / 3", "effectiveValue": "4 / 3", "resolution": "static", "status": "base" }, { "name": "--qp-product-list__body-gap", "description": "Uses the small spatial rhythm for product list body gap, with semantic remapping for ProductList-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-prose__link-text-color", "description": "Uses the primary accent color for prose link text color, with semantic remapping for DocumentFoundation-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "#d19e2b", "effectiveExpression": "#d19e2b", "effectiveValue": "#d19e2b", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-radius-lg", "description": "Establish prominent rounding for cards, panels, and major containers.", "designType": "radius", "baseVariableType": "root", "baseExpression": "0.75rem", "variableType": "root", "declaredExpression": "18px", "effectiveExpression": "18px", "effectiveValue": "18px", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-sticky-tray-side-bar-radius" ] }, { "name": "--qp-radius-md", "description": "Establish standard rounding for ordinary controls, media, and surfaces.", "designType": "radius", "baseVariableType": "root", "baseExpression": "0.5rem", "variableType": "root", "declaredExpression": "12px", "effectiveExpression": "12px", "effectiveValue": "12px", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-page-list-action-radius" ] }, { "name": "--qp-radius-sm", "description": "Establish compact rounding for controls and subtle surface treatment.", "designType": "radius", "baseVariableType": "root", "baseExpression": "0.375rem", "variableType": "root", "declaredExpression": "6px", "effectiveExpression": "6px", "effectiveValue": "6px", "resolution": "static", "status": "override" }, { "name": "--qp-raised-content-shadow", "description": "Establish the standard elevation treatment for raised content surfaces and framed media.", "designType": "shadow", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-card-shadow", "--qp-image-shadow", "--qp-section-surface-shadow", "--qp-video-poster-shadow" ] }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "declaredExpression": "5em", "effectiveExpression": "5em", "effectiveValue": "5em", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-space-xl" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-region-gap)", "effectiveExpression": "var(--qp-region-gap)", "effectiveValue": "5em", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-region-gap" }, { "name": "--qp-section-background--alternate", "description": "Uses the subtle surface color for section background in its alternate state, with semantic remapping for PageSection-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "declaredExpression": "linear-gradient(180deg, rgba(10, 35, 45, 0.92), rgba(10, 35, 45, 0.78))", "effectiveExpression": "linear-gradient(180deg, rgba(10, 35, 45, 0.92), rgba(10, 35, 45, 0.78))", "effectiveValue": "linear-gradient(180deg, rgba(10, 35, 45, 0.92), rgba(10, 35, 45, 0.78))", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-background--muted" }, { "name": "--qp-section-background--default", "description": "Uses the canvas color for section background in its default state, with semantic remapping for PageSection-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.05)", "effectiveExpression": "rgba(255, 255, 255, 0.05)", "effectiveValue": "rgba(255, 255, 255, 0.05)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.14)", "effectiveExpression": "rgba(255, 255, 255, 0.14)", "effectiveValue": "rgba(255, 255, 255, 0.14)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-color--strong" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color)", "variableType": "inherited", "declaredExpression": "var(--qp-border-accent)", "effectiveExpression": "var(--qp-border-accent)", "effectiveValue": "color-mix(in srgb, #ffffff 14%, transparent)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-border-accent" }, { "name": "--qp-section-inline-size", "description": "Calculates section inline size from the base spatial rhythm to preserve equal responsive edge insets.", "designType": "size", "baseVariableType": "derived", "baseExpression": "calc(100% - (var(--qp-space-md) * 2))", "variableType": "derived", "declaredExpression": "100%", "effectiveExpression": "100%", "effectiveValue": "100%", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-space-md" }, { "name": "--qp-section-margin-block-end", "description": "Uses the extra-large spatial rhythm for section margin block end, with semantic remapping for PageSection-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "declaredExpression": "var(--qp-section-pad-y)", "effectiveExpression": "var(--qp-section-pad-y)", "effectiveValue": "70px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-section-pad-y" }, { "name": "--qp-section-pad-y", "description": "The primary vertical section rhythm used by FeatherQuest compositions.", "designType": "spacing", "variableType": "root", "declaredExpression": "70px", "effectiveExpression": "70px", "effectiveValue": "70px", "resolution": "static", "status": "theme-owned" }, { "name": "--qp-section-subtitle-max-width", "description": "Uses the standard subtitle measure for section subtitle max width, with semantic remapping for PageSection-specific treatment.", "designType": "size", "baseVariableType": "inherited", "baseExpression": "var(--qp-subtitle-max-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-subtitle-max-width)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-subtitle-max-width" }, { "name": "--qp-section-surface-shadow", "description": "Uses the standard raised-content elevation for section surface shadow, with semantic remapping for PageSection-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-raised-content-shadow)", "variableType": "inherited", "effectiveExpression": "var(--qp-raised-content-shadow)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-raised-content-shadow" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--qp-section-width-default", "description": "Choose the standard content measure used by ordinary QP sections.", "designType": "size", "baseVariableType": "root", "baseExpression": "60rem", "variableType": "root", "declaredExpression": "60rem", "effectiveExpression": "60rem", "effectiveValue": "60rem", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-page-header-content-width" ] }, { "name": "--qp-section-width-wide", "description": "Choose the expanded content measure used by wide QP compositions.", "designType": "size", "baseVariableType": "root", "baseExpression": "75rem", "variableType": "root", "declaredExpression": "75rem", "effectiveExpression": "75rem", "effectiveValue": "75rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-lg" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xl)", "variableType": "inherited", "declaredExpression": "42px", "effectiveExpression": "42px", "effectiveValue": "42px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-xl" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-padding-inline)", "variableType": "inherited", "declaredExpression": "65px", "effectiveExpression": "65px", "effectiveValue": "65px", "resolution": "static", "status": "override", "relationshipSource": "--qp-surface-padding-inline" }, { "name": "--qp-site-header-backdrop-filter", "description": "Choose the complete compositing treatment behind the SiteHeader surface.", "designType": "effect", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "blur(8px) saturate(1)", "effectiveExpression": "blur(8px) saturate(1)", "effectiveValue": "blur(8px) saturate(1)", "resolution": "static", "status": "override" }, { "name": "--qp-site-header-background", "description": "Uses the canvas color for site header background, with semantic remapping for SiteHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, 0.42)", "effectiveExpression": "rgba(0, 0, 0, 0.42)", "effectiveValue": "rgba(0, 0, 0, 0.42)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-site-header-border-color", "description": "Uses the standard edge color for site header border color, with semantic remapping for SiteHeader-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, 0.12)", "effectiveExpression": "rgba(255, 255, 255, 0.12)", "effectiveValue": "rgba(255, 255, 255, 0.12)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-color" }, { "name": "--qp-site-header-content-width", "description": "Choose the maximum content measure inside the SiteHeader.", "designType": "size", "baseVariableType": "root", "baseExpression": "min(75rem, 100%)", "variableType": "root", "declaredExpression": "100%", "effectiveExpression": "100%", "effectiveValue": "100%", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-site-header-gap", "description": "Uses the base spatial rhythm for site header gap, with semantic remapping for SiteHeader-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-md)", "variableType": "inherited", "declaredExpression": "var(--qp-space-md)", "effectiveExpression": "var(--qp-space-md)", "effectiveValue": "1rem", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-space-md" }, { "name": "--qp-site-header-justify", "description": "Choose how branding, navigation, and actions are distributed across the SiteHeader.", "designType": "layout", "baseVariableType": "root", "baseExpression": "flex-start", "variableType": "root", "declaredExpression": "space-between", "effectiveExpression": "space-between", "effectiveValue": "space-between", "resolution": "static", "status": "override" }, { "name": "--qp-site-header-menu-offset", "description": "Choose how the SiteHeader menu is aligned relative to preceding header content.", "designType": "layout", "baseVariableType": "root", "baseExpression": "auto", "variableType": "root", "effectiveExpression": "auto", "effectiveValue": "auto", "resolution": "static", "status": "base" }, { "name": "--qp-site-header-min-height", "description": "Choose the minimum physical height of the SiteHeader.", "designType": "size", "baseVariableType": "root", "baseExpression": "4rem", "variableType": "root", "declaredExpression": "0", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-site-header-padding-block", "description": "Choose the SiteHeader’s vertical density and overall bar height.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "0.75rem", "variableType": "root", "declaredExpression": "0.9rem", "effectiveExpression": "0.9rem", "effectiveValue": "0.9rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-padding-inline)", "variableType": "inherited", "effectiveExpression": "var(--qp-surface-padding-inline)", "effectiveValue": "clamp(14px, 2.2vw, 22px)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-surface-padding-inline" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-background--hover)", "effectiveExpression": "var(--qp-menu__link-background--hover)", "effectiveValue": "rgba(255, 255, 255, 0.06)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-background--hover" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-socials-icon-size", "description": "Choose the visual scale of Socials glyphs.", "designType": "size", "baseVariableType": "root", "baseExpression": "1.25rem", "variableType": "root", "declaredExpression": "22px", "effectiveExpression": "22px", "effectiveValue": "22px", "resolution": "static", "status": "override" }, { "name": "--qp-socials-link-border", "description": "Uses the standard composite border for socials link border, with semantic remapping for Socials-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "1px solid rgba(255, 255, 255, .15)", "effectiveExpression": "1px solid rgba(255, 255, 255, .15)", "effectiveValue": "1px solid rgba(255, 255, 255, .15)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-socials-link-radius", "description": "Uses the standard rounding for socials link radius, with semantic remapping for Socials-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-md)", "effectiveExpression": "var(--qp-radius-md)", "effectiveValue": "12px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-socials-link-size", "description": "Choose the physical size of Socials link controls.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.75rem", "variableType": "root", "declaredExpression": "46px", "effectiveExpression": "46px", "effectiveValue": "46px", "resolution": "static", "status": "override" }, { "name": "--qp-socials__link-background", "description": "Uses the framework-defined transparent color for socials link background, with semantic remapping for Socials-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-teal" }, { "name": "--qp-socials__link-text-color", "description": "Uses the primary foreground color for socials link text color, with semantic remapping for Socials-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "declaredExpression": "var(--theme-color-aqua)", "effectiveExpression": "var(--theme-color-aqua)", "effectiveValue": "#37bfc1", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-aqua" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-space-lg", "description": "Derives large spacing from the base spatial rhythm to keep prominent component spacing proportional.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "calc(var(--qp-space-md) * 1.5)", "variableType": "derived", "effectiveExpression": "calc(var(--qp-space-md) * 1.5)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md", "inheritedDependents": [ "--qp-card-list-gap", "--qp-modal-inset", "--qp-page-header__hero-panel-padding-block--mobile", "--qp-toast-bottom", "--qp-toc-nested-indent" ] }, { "name": "--qp-space-md", "description": "Choose the base unit that controls QP’s overall spatial density.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "1rem", "variableType": "root", "effectiveExpression": "1rem", "effectiveValue": "1rem", "resolution": "browser-dependent", "status": "base", "inheritedDependents": [ "--qp-page-header__hero-panel-padding-inline--mobile" ] }, { "name": "--qp-space-sm", "description": "Derives small spacing from the base spatial rhythm to keep compact relationships proportional.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "calc(var(--qp-space-md) * .5)", "variableType": "derived", "effectiveExpression": "calc(var(--qp-space-md) * .5)", "effectiveValue": "calc(1rem * .5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md", "inheritedDependents": [ "--qp-media-caption-gap" ] }, { "name": "--qp-space-xl", "description": "Derives extra-large spacing from the base spatial rhythm to keep section-scale separation proportional.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "calc(var(--qp-space-md) * 2)", "variableType": "derived", "effectiveExpression": "calc(var(--qp-space-md) * 2)", "effectiveValue": "calc(1rem * 2)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md", "inheritedDependents": [ "--qp-page-header-margin-block-end", "--qp-page-header__hero-margin-block-end" ] }, { "name": "--qp-space-xs", "description": "Derives extra-small spacing from the base spatial rhythm to keep tightly related content proportional.", "designType": "spacing", "baseVariableType": "derived", "baseExpression": "calc(var(--qp-space-md) * .25)", "variableType": "derived", "effectiveExpression": "calc(var(--qp-space-md) * .25)", "effectiveValue": "calc(1rem * .25)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-md", "inheritedDependents": [ "--qp-media-caption__subtitle-gap", "--qp-toc-nested-gap" ] }, { "name": "--qp-sticky-tray-bar-backdrop-filter", "description": "Choose the complete compositing treatment behind the persistent StickyTray bar.", "designType": "effect", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "blur(18px) saturate(1.1)", "effectiveExpression": "blur(18px) saturate(1.1)", "effectiveValue": "blur(18px) saturate(1.1)", "resolution": "static", "status": "override" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-border-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(255, 255, 255, .22)", "effectiveExpression": "rgba(255, 255, 255, .22)", "effectiveValue": "rgba(255, 255, 255, .22)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border-color--strong" }, { "name": "--qp-sticky-tray-bar-open-radius", "description": "Calculates sticky tray bar open radius from the prominent rounding to preserve joined StickyTray corner geometry.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "var(--qp-radius-lg) var(--qp-radius-lg) 0 0", "variableType": "derived", "declaredExpression": "var(--qp-radius-lg) var(--qp-radius-lg) 0 0", "effectiveExpression": "var(--qp-radius-lg) var(--qp-radius-lg) 0 0", "effectiveValue": "18px 18px 0 0", "resolution": "static", "status": "override", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-sticky-tray-bar-radius", "description": "Uses the prominent rounding for sticky tray bar radius, with semantic remapping for StickyTray-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-lg)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-lg)", "effectiveExpression": "var(--qp-radius-lg)", "effectiveValue": "18px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-sticky-tray-bar-shadow", "description": "Choose how strongly the persistent StickyTray bar separates from document content.", "designType": "shadow", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08)", "effectiveExpression": "0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08)", "effectiveValue": "0 10px 22px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .08)", "resolution": "static", "status": "override" }, { "name": "--qp-sticky-tray-bottom-offset", "description": "Reserve space below a bottom-positioned StickyTray.", "designType": "layout", "baseVariableType": "root", "baseExpression": "0px", "variableType": "root", "declaredExpression": "max(8px, env(safe-area-inset-bottom))", "effectiveExpression": "max(8px, env(safe-area-inset-bottom))", "effectiveValue": "max(8px, env(safe-area-inset-bottom))", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-sticky-tray-compact-max-width", "description": "Calculates sticky tray compact max width from the small spatial rhythm to preserve viewport clearance.", "designType": "size", "baseVariableType": "derived", "baseExpression": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))", "variableType": "derived", "effectiveExpression": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))", "effectiveValue": "min(24rem, calc(100vw - (calc(1rem * .5) * 2)))", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-sticky-tray-focus-color", "description": "Uses the primary accent color for sticky tray focus color, with semantic remapping for StickyTray-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "rgba(255, 201, 51, .85)", "effectiveExpression": "rgba(255, 201, 51, .85)", "effectiveValue": "rgba(255, 201, 51, .85)", "resolution": "static", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-sticky-tray-focus-width", "description": "Uses the standard focus thickness for sticky tray focus width, with semantic remapping for StickyTray-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "declaredExpression": "3px", "effectiveExpression": "3px", "effectiveValue": "3px", "resolution": "static", "status": "override", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-sticky-tray-handle-font-family", "description": "Uses the document typeface for sticky tray handle font family, with semantic remapping for StickyTray-specific treatment.", "designType": "font-family", "baseVariableType": "inherited", "baseExpression": "var(--qp-document-font-family)", "variableType": "inherited", "declaredExpression": "var(--qp-document-font-family)", "effectiveExpression": "var(--qp-document-font-family)", "effectiveValue": "\"Lato\", system-ui, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif", "resolution": "static", "status": "remap", "relationshipSource": "--qp-document-font-family" }, { "name": "--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.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-sm)", "variableType": "inherited", "declaredExpression": "var(--qp-font-size-md)", "effectiveExpression": "var(--qp-font-size-md)", "effectiveValue": ".9375rem", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-font-size-md" }, { "name": "--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.", "designType": "font-weight", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-weight-bold)", "variableType": "inherited", "declaredExpression": "var(--qp-font-weight-bold)", "effectiveExpression": "var(--qp-font-weight-bold)", "effectiveValue": "700", "resolution": "static", "status": "remap", "relationshipSource": "--qp-font-weight-bold" }, { "name": "--qp-sticky-tray-icon-size", "description": "The glyph scale FeatherQuest uses inside StickyTray controls.", "designType": "size", "variableType": "root", "declaredExpression": "1.35rem", "effectiveExpression": "1.35rem", "effectiveValue": "1.35rem", "resolution": "browser-dependent", "status": "theme-owned" }, { "name": "--qp-sticky-tray-inline-offset", "description": "Uses the small spatial rhythm for sticky tray inline offset, with semantic remapping for StickyTray-specific treatment.", "designType": "layout", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "12px", "effectiveExpression": "12px", "effectiveValue": "12px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-sticky-tray-max-width", "description": "Choose the maximum horizontal extent of the StickyTray.", "designType": "size", "baseVariableType": "root", "baseExpression": "48rem", "variableType": "root", "declaredExpression": "760px", "effectiveExpression": "760px", "effectiveValue": "760px", "resolution": "static", "status": "override" }, { "name": "--qp-sticky-tray-occupied-bottom", "description": "Tracks runtime-measured space already occupied at the bottom of the viewport.", "designType": "layout", "baseVariableType": "system", "baseExpression": "0px", "variableType": "system", "effectiveExpression": "0px", "effectiveValue": "0px", "resolution": "static", "status": "base" }, { "name": "--qp-sticky-tray-occupied-top", "description": "Tracks runtime-measured space already occupied at the top of the viewport.", "designType": "layout", "baseVariableType": "system", "baseExpression": "0px", "variableType": "system", "effectiveExpression": "0px", "effectiveValue": "0px", "resolution": "static", "status": "base" }, { "name": "--qp-sticky-tray-panel-backdrop-filter", "description": "Choose the complete compositing treatment behind the open StickyTray panel.", "designType": "effect", "baseVariableType": "root", "baseExpression": "none", "variableType": "root", "declaredExpression": "blur(14px) saturate(1.05)", "effectiveExpression": "blur(14px) saturate(1.05)", "effectiveValue": "blur(14px) saturate(1.05)", "resolution": "static", "status": "override" }, { "name": "--qp-sticky-tray-panel-border", "description": "Uses the standard composite border for sticky tray panel border, with semantic remapping for StickyTray-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "declaredExpression": "2px solid rgba(255, 255, 255, .25)", "effectiveExpression": "2px solid rgba(255, 255, 255, .25)", "effectiveValue": "2px solid rgba(255, 255, 255, .25)", "resolution": "static", "status": "override", "relationshipSource": "--qp-border" }, { "name": "--qp-sticky-tray-panel-max-height", "description": "Choose the maximum viewport capacity of an open StickyTray panel.", "designType": "size", "baseVariableType": "root", "baseExpression": "60vh", "variableType": "root", "declaredExpression": "min(55vh, 420px)", "effectiveExpression": "min(55vh, 420px)", "effectiveValue": "min(55vh, 420px)", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-sticky-tray-panel-radius", "description": "Calculates sticky tray panel radius from the prominent rounding to preserve joined StickyTray corner geometry.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "0 0 var(--qp-radius-lg) var(--qp-radius-lg)", "variableType": "derived", "declaredExpression": "0 0 var(--qp-radius-lg) var(--qp-radius-lg)", "effectiveExpression": "0 0 var(--qp-radius-lg) var(--qp-radius-lg)", "effectiveValue": "0 0 18px 18px", "resolution": "static", "status": "override", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-sticky-tray-side-bar-radius", "description": "Uses the prominent rounding for sticky tray side bar radius, with semantic remapping for StickyTray-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-radius-lg)", "effectiveValue": "18px", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-lg" }, { "name": "--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.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)", "variableType": "derived", "effectiveExpression": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)", "effectiveValue": "18px 0 0 18px", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-lg" }, { "name": "--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.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0", "variableType": "derived", "effectiveExpression": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0", "effectiveValue": "0 18px 18px 0", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-sticky-tray-side-open-width", "description": "Calculates sticky tray side open width from the small spatial rhythm to preserve viewport clearance.", "designType": "size", "baseVariableType": "derived", "baseExpression": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))", "variableType": "derived", "effectiveExpression": "min(24rem, calc(100vw - (var(--qp-space-sm) * 2)))", "effectiveValue": "min(24rem, calc(100vw - (calc(1rem * .5) * 2)))", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-sm" }, { "name": "--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.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0", "variableType": "derived", "effectiveExpression": "0 var(--qp-radius-lg) var(--qp-radius-lg) 0", "effectiveValue": "0 18px 18px 0", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-lg" }, { "name": "--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.", "designType": "radius", "baseVariableType": "derived", "baseExpression": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)", "variableType": "derived", "effectiveExpression": "var(--qp-radius-lg) 0 0 var(--qp-radius-lg)", "effectiveValue": "18px 0 0 18px", "resolution": "static", "status": "base", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-sticky-tray-top-offset", "description": "Reserve space above a top-positioned StickyTray.", "designType": "layout", "baseVariableType": "root", "baseExpression": "0px", "variableType": "root", "declaredExpression": "0px", "effectiveExpression": "0px", "effectiveValue": "0px", "resolution": "static", "status": "override" }, { "name": "--qp-sticky-tray-viewport-gutter", "description": "Uses the small spatial rhythm for sticky tray viewport gutter, with semantic remapping for StickyTray-specific treatment.", "designType": "layout", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": "12px", "effectiveExpression": "12px", "effectiveValue": "12px", "resolution": "static", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--qp-sticky-tray__bar-background", "description": "Uses the canvas color for sticky tray bar background, with semantic remapping for StickyTray-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .88)", "effectiveExpression": "rgba(0, 0, 0, .88)", "effectiveValue": "rgba(0, 0, 0, .88)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-sticky-tray__bar-gap", "description": "Uses the small spatial rhythm for sticky tray bar gap, with semantic remapping for StickyTray-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-sm)", "variableType": "inherited", "declaredExpression": ".6rem", "effectiveExpression": ".6rem", "effectiveValue": ".6rem", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-space-sm" }, { "name": "--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.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-block-md)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-block-md)", "effectiveValue": "0.65rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-block-md" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color)", "effectiveValue": "#003a44", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-sticky-tray__panel-background", "description": "Uses the canvas color for sticky tray panel background, with semantic remapping for StickyTray-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-background)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .74)", "effectiveExpression": "rgba(0, 0, 0, .74)", "effectiveValue": "rgba(0, 0, 0, .74)", "resolution": "static", "status": "override", "relationshipSource": "--qp-background" }, { "name": "--qp-subtitle-max-width", "description": "Choose the standard readable measure for explanatory subtitles across major QP compositions.", "designType": "size", "baseVariableType": "root", "baseExpression": "48rem", "variableType": "root", "declaredExpression": "none", "effectiveExpression": "none", "effectiveValue": "none", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-page-header-subtitle-max-width", "--qp-section-subtitle-max-width" ] }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-blue-light)", "variableType": "root", "declaredExpression": "var(--theme-color-gold-light)", "effectiveExpression": "var(--theme-color-gold-light)", "effectiveValue": "color-mix(in oklch, #ffd62f, white 82%)", "resolution": "browser-dependent", "status": "override" }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-mist-light)", "variableType": "root", "declaredExpression": "var(--theme-color-aqua-light)", "effectiveExpression": "var(--theme-color-aqua-light)", "effectiveValue": "color-mix(in oklch, #37bfc1, white 68%)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-card-background--alternate", "--qp-page-list__action-background" ] }, { "name": "--qp-surface-padding-inline", "description": "Choose the default responsive inline safe area inside major QP surfaces.", "designType": "spacing", "baseVariableType": "root", "baseExpression": "clamp(1rem, 4vw, 2rem)", "variableType": "root", "declaredExpression": "clamp(14px, 2.2vw, 22px)", "effectiveExpression": "clamp(14px, 2.2vw, 22px)", "effectiveValue": "clamp(14px, 2.2vw, 22px)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-page-header__hero-panel-padding-inline", "--qp-site-header-padding-inline" ] }, { "name": "--qp-system-color-highlight", "description": "Provides the browser or operating-system highlight color for selected content.", "designType": "color", "baseVariableType": "system", "baseExpression": "Highlight", "variableType": "system", "effectiveExpression": "Highlight", "effectiveValue": "Highlight", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-document__selection-background" ] }, { "name": "--qp-system-color-highlight-text", "description": "Provides the browser or operating-system text color for selected content.", "designType": "color", "baseVariableType": "system", "baseExpression": "HighlightText", "variableType": "system", "effectiveExpression": "HighlightText", "effectiveValue": "HighlightText", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-document__selection-text-color" ] }, { "name": "--qp-system-color-transparent", "description": "Represents complete transparency independently from the authored palette.", "designType": "color", "baseVariableType": "system", "baseExpression": "transparent", "variableType": "system", "effectiveExpression": "transparent", "effectiveValue": "transparent", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-lightbox__caption-background", "--qp-menu__mobile-link-background", "--qp-page-header-background", "--qp-toc__link-background" ] }, { "name": "--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.", "designType": "layer", "baseVariableType": "system", "baseExpression": "300", "variableType": "system", "effectiveExpression": "300", "effectiveValue": "300", "resolution": "static", "status": "base" }, { "name": "--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.", "designType": "layer", "baseVariableType": "system", "baseExpression": "200", "variableType": "system", "effectiveExpression": "200", "effectiveValue": "200", "resolution": "static", "status": "base" }, { "name": "--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.", "designType": "layer", "baseVariableType": "system", "baseExpression": "100", "variableType": "system", "effectiveExpression": "100", "effectiveValue": "100", "resolution": "static", "status": "base" }, { "name": "--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.", "designType": "layer", "baseVariableType": "system", "baseExpression": "400", "variableType": "system", "effectiveExpression": "400", "effectiveValue": "400", "resolution": "static", "status": "base" }, { "name": "--qp-system-radius-none", "description": "Represents the intrinsic absence of rounding independently from the authored radius scale.", "designType": "radius", "baseVariableType": "system", "baseExpression": "0", "variableType": "system", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-image-radius" ] }, { "name": "--qp-system-space-none", "description": "Represents the canonical absence of spacing for semantic relationships that resolve to zero.", "designType": "spacing", "baseVariableType": "system", "baseExpression": "0", "variableType": "system", "effectiveExpression": "0", "effectiveValue": "0", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-media-caption__title-gap", "--qp-page-padding-bottom", "--qp-page-padding-top" ] }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-ink)", "variableType": "root", "declaredExpression": "var(--theme-color-teal)", "effectiveExpression": "var(--theme-color-teal)", "effectiveValue": "#003a44", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-card-text-color", "--qp-card__body-text-color", "--qp-menu__submenu-toggle-text-color", "--qp-page-header-text-color", "--qp-page-list__action-text-color", "--qp-section-text-color--alternate", "--qp-section-text-color--default", "--qp-sticky-tray__bar-text-color" ] }, { "name": "--qp-text-color--disabled", "description": "Uses the muted foreground color for text color in its disabled state, with semantic remapping for Foundation-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--muted)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-text-color--muted" }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-white)", "variableType": "root", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "inheritedDependents": [ "--qp-cta-text-color--hover", "--qp-lightbox-text-color", "--qp-page-header__hero-subtitle-text-color", "--qp-page-header__hero-text-color", "--qp-toast-text-color", "--qp-video__play-text-color" ] }, { "name": "--qp-text-color--inverse-muted", "description": "Chooses the subdued foreground color used for secondary information on inverse or dark surfaces.", "designType": "color", "baseVariableType": "root", "baseExpression": "color-mix(in srgb, var(--qp-color-white) 72%, transparent)", "variableType": "root", "declaredExpression": "#ccc", "effectiveExpression": "#ccc", "effectiveValue": "#ccc", "resolution": "static", "status": "override", "inheritedDependents": [ "--qp-gallery__caption-secondary-text-color", "--qp-lightbox__caption-secondary-text-color" ] }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-ink-soft)", "variableType": "root", "declaredExpression": "var(--theme-color-teal-soft)", "effectiveExpression": "var(--theme-color-teal-soft)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-footer-text-color", "--qp-media-caption-text-color", "--qp-page-header__subtitle-text-color", "--qp-text-color--disabled" ] }, { "name": "--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.", "designType": "color", "baseVariableType": "root", "baseExpression": "var(--qp-color-ink-dark)", "variableType": "root", "declaredExpression": "var(--theme-color-teal-dark)", "effectiveExpression": "var(--theme-color-teal-dark)", "effectiveValue": "color-mix(in oklch, #003a44, black 24%)", "resolution": "browser-dependent", "status": "override", "inheritedDependents": [ "--qp-card__icon-text-color", "--qp-menu__submenu-toggle-text-color--hover" ] }, { "name": "--qp-toast-background", "description": "Uses the strong foreground color for toast background, with semantic remapping for Toast-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "rgba(0, 0, 0, .9)", "effectiveExpression": "rgba(0, 0, 0, .9)", "effectiveValue": "rgba(0, 0, 0, .9)", "resolution": "static", "status": "override", "relationshipSource": "--qp-text-color--strong" }, { "name": "--qp-toast-bottom", "description": "Uses the large spatial rhythm for toast bottom, with semantic remapping for Toast-specific treatment.", "designType": "layout", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-toast-font-size", "description": "Uses the body type level for toast font size, with semantic remapping for Toast-specific treatment.", "designType": "font-size", "baseVariableType": "inherited", "baseExpression": "var(--qp-font-size-md)", "variableType": "inherited", "declaredExpression": "var(--qp-font-size-lg)", "effectiveExpression": "var(--qp-font-size-lg)", "effectiveValue": "clamp(1.0625rem, 1rem + .35vw, 1.1875rem)", "resolution": "browser-dependent", "status": "remap", "relationshipSource": "--qp-font-size-lg" }, { "name": "--qp-toast-max-width", "description": "Choose the maximum readable width of Toast messages.", "designType": "size", "baseVariableType": "root", "baseExpression": "40rem", "variableType": "root", "declaredExpression": "640px", "effectiveExpression": "640px", "effectiveValue": "640px", "resolution": "static", "status": "override" }, { "name": "--qp-toast-min-width", "description": "Choose the minimum physical width of Toast messages.", "designType": "size", "baseVariableType": "root", "baseExpression": "0px", "variableType": "root", "declaredExpression": "420px", "effectiveExpression": "420px", "effectiveValue": "420px", "resolution": "static", "status": "override" }, { "name": "--qp-toast-padding", "description": "Choose the density and prominence of transient Toast messages.", "designType": "spacing", "baseVariableType": "root", "baseExpression": ".75rem 1rem", "variableType": "root", "declaredExpression": "1.25rem 2rem", "effectiveExpression": "1.25rem 2rem", "effectiveValue": "1.25rem 2rem", "resolution": "browser-dependent", "status": "override" }, { "name": "--qp-toast-radius", "description": "Uses the standard rounding for toast radius, with semantic remapping for Toast-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-md)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-lg)", "effectiveExpression": "var(--qp-radius-lg)", "effectiveValue": "18px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-toast-shadow", "description": "Derives toast shadow from the maximum-contrast color so elevation contrast stays synchronized with the palette.", "designType": "shadow", "baseVariableType": "derived", "baseExpression": "0 4px 16px color-mix(in srgb, var(--qp-color-black) 20%, transparent)", "variableType": "derived", "declaredExpression": "0 16px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08)", "effectiveExpression": "0 16px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08)", "effectiveValue": "0 16px 40px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08)", "resolution": "static", "status": "override", "relationshipSource": "--qp-color-black" }, { "name": "--qp-toast-text-color", "description": "Uses the canvas color for toast text color, with semantic remapping for Toast-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--qp-toc-link-focus-width", "description": "Uses the standard focus thickness for TOC link focus width, with semantic remapping for Toc-specific treatment.", "designType": "border-width", "baseVariableType": "inherited", "baseExpression": "var(--qp-focus-width)", "variableType": "inherited", "effectiveExpression": "var(--qp-focus-width)", "effectiveValue": "2px", "resolution": "static", "status": "base", "relationshipSource": "--qp-focus-width" }, { "name": "--qp-toc-link-min-height", "description": "Choose the minimum interactive height of TOC links.", "designType": "size", "baseVariableType": "root", "baseExpression": "2.5rem", "variableType": "root", "declaredExpression": "var(--qp-menu-link-min-height)", "effectiveExpression": "var(--qp-menu-link-min-height)", "effectiveValue": "0", "resolution": "static", "status": "override" }, { "name": "--qp-toc-link-radius", "description": "Uses the compact rounding for TOC link radius, with semantic remapping for Toc-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-radius-sm)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-md)", "effectiveExpression": "var(--qp-radius-md)", "effectiveValue": "12px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-md" }, { "name": "--qp-toc-nested-gap", "description": "Uses the extra-small spatial rhythm for TOC nested gap, with semantic remapping for Toc-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-xs)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-xs)", "effectiveValue": "calc(1rem * .25)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-xs" }, { "name": "--qp-toc-nested-indent", "description": "Uses the large spatial rhythm for TOC nested indent, with semantic remapping for Toc-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-space-lg)", "variableType": "inherited", "effectiveExpression": "var(--qp-space-lg)", "effectiveValue": "calc(1rem * 1.5)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-space-lg" }, { "name": "--qp-toc__link-background", "description": "Uses the framework-defined transparent color for TOC link background, with semantic remapping for Toc-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-color-transparent)", "variableType": "inherited", "effectiveExpression": "var(--qp-system-color-transparent)", "effectiveValue": "transparent", "resolution": "static", "status": "base", "relationshipSource": "--qp-system-color-transparent" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--muted)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-background--hover)", "effectiveExpression": "var(--qp-menu__link-background--hover)", "effectiveValue": "rgba(255, 255, 255, 0.06)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-background--hover" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-surface-background--hover)", "variableType": "inherited", "declaredExpression": "var(--qp-menu__link-background--hover)", "effectiveExpression": "var(--qp-menu__link-background--hover)", "effectiveValue": "rgba(255, 255, 255, 0.06)", "resolution": "static", "status": "remap", "relationshipSource": "--qp-menu__link-background--hover" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-toc__link-focus-color", "description": "Uses the primary accent color for TOC link focus color, with semantic remapping for Toc-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "effectiveExpression": "var(--qp-accent-color)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "base", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-toc__link-padding-block", "description": "Uses the compact control density for TOC link padding block, with semantic remapping for Toc-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-block-sm)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-block-sm)", "effectiveValue": "0.55rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-block-sm" }, { "name": "--qp-toc__link-padding-inline", "description": "Uses the compact-control inline inset for TOC link padding inline, with semantic remapping for Toc-specific treatment.", "designType": "spacing", "baseVariableType": "inherited", "baseExpression": "var(--qp-control-padding-inline)", "variableType": "inherited", "effectiveExpression": "var(--qp-control-padding-inline)", "effectiveValue": "0.75rem", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-control-padding-inline" }, { "name": "--qp-toc__link-text-color", "description": "Uses the muted foreground color for TOC link text color, with semantic remapping for Toc-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--muted)", "variableType": "inherited", "declaredExpression": "var(--qp-color-white)", "effectiveExpression": "var(--qp-color-white)", "effectiveValue": "#ffffff", "resolution": "static", "status": "remap", "relationshipSource": "--qp-color-white" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--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.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--strong)", "variableType": "inherited", "declaredExpression": "var(--theme-color-gold)", "effectiveExpression": "var(--theme-color-gold)", "effectiveValue": "#ffd62f", "resolution": "static", "status": "remap", "relationshipSource": "--theme-color-gold" }, { "name": "--qp-video-focus-color", "description": "Uses the primary accent color for video focus color, with semantic remapping for Video-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-accent-color)", "variableType": "inherited", "declaredExpression": "currentColor", "effectiveExpression": "currentColor", "effectiveValue": "currentColor", "resolution": "browser-dependent", "status": "override", "relationshipSource": "--qp-accent-color" }, { "name": "--qp-video-max-height", "description": "Choose the maximum displayed height of Video media.", "designType": "size", "baseVariableType": "root", "baseExpression": "min(80vh, 50rem)", "variableType": "root", "effectiveExpression": "min(80vh, 50rem)", "effectiveValue": "min(80vh, 50rem)", "resolution": "browser-dependent", "status": "base" }, { "name": "--qp-video-max-inline-size", "description": "Calculates Video width from its authored maximum height using the standard widescreen proportion.", "designType": "size", "baseVariableType": "derived", "baseExpression": "calc(var(--qp-video-max-height) * 1.7778)", "variableType": "derived", "effectiveExpression": "calc(var(--qp-video-max-height) * 1.7778)", "effectiveValue": "calc(min(80vh, 50rem) * 1.7778)", "resolution": "browser-dependent", "status": "base", "relationshipSource": "--qp-video-max-height" }, { "name": "--qp-video-play-icon-size", "description": "Choose the visual scale of the Video play glyph.", "designType": "size", "baseVariableType": "root", "baseExpression": "3rem", "variableType": "root", "declaredExpression": "80px", "effectiveExpression": "80px", "effectiveValue": "80px", "resolution": "static", "status": "override" }, { "name": "--qp-video-play-size", "description": "Choose the physical prominence of the Video play control.", "designType": "size", "baseVariableType": "root", "baseExpression": "3rem", "variableType": "root", "declaredExpression": "82px", "effectiveExpression": "82px", "effectiveValue": "82px", "resolution": "static", "status": "override" }, { "name": "--qp-video-poster-border", "description": "Uses the standard composite border for video poster border, with semantic remapping for Video-specific treatment.", "designType": "border", "baseVariableType": "inherited", "baseExpression": "var(--qp-border)", "variableType": "inherited", "effectiveExpression": "var(--qp-border)", "effectiveValue": "1px solid #37bfc1", "resolution": "static", "status": "base", "relationshipSource": "--qp-border" }, { "name": "--qp-video-poster-shadow", "description": "Uses the standard raised-content elevation for video poster shadow, with semantic remapping for Video-specific treatment.", "designType": "shadow", "baseVariableType": "inherited", "baseExpression": "var(--qp-raised-content-shadow)", "variableType": "inherited", "effectiveExpression": "var(--qp-raised-content-shadow)", "effectiveValue": "none", "resolution": "static", "status": "base", "relationshipSource": "--qp-raised-content-shadow" }, { "name": "--qp-video-radius", "description": "Uses the framework-defined absence of rounding for video radius, with semantic remapping for Video-specific treatment.", "designType": "radius", "baseVariableType": "inherited", "baseExpression": "var(--qp-system-radius-none)", "variableType": "inherited", "declaredExpression": "var(--qp-radius-lg)", "effectiveExpression": "var(--qp-radius-lg)", "effectiveValue": "18px", "resolution": "static", "status": "remap", "relationshipSource": "--qp-radius-lg" }, { "name": "--qp-video-ratio", "description": "Choose the framing proportion of Video media.", "designType": "size", "baseVariableType": "root", "baseExpression": "16 / 9", "variableType": "root", "effectiveExpression": "16 / 9", "effectiveValue": "16 / 9", "resolution": "static", "status": "base" }, { "name": "--qp-video__play-background", "description": "Derives video play background from the maximum-contrast color so translucent surface contrast stays synchronized with the palette.", "designType": "color", "baseVariableType": "derived", "baseExpression": "color-mix(in srgb, var(--qp-color-black) 65%, transparent)", "variableType": "derived", "declaredExpression": "rgba(0, 0, 0, .55)", "effectiveExpression": "rgba(0, 0, 0, .55)", "effectiveValue": "rgba(0, 0, 0, .55)", "resolution": "static", "status": "override", "relationshipSource": "--qp-color-black" }, { "name": "--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.", "designType": "color", "baseVariableType": "derived", "baseExpression": "color-mix(in srgb, var(--qp-color-black) 80%, transparent)", "variableType": "derived", "declaredExpression": "rgba(0, 0, 0, .66)", "effectiveExpression": "rgba(0, 0, 0, .66)", "effectiveValue": "rgba(0, 0, 0, .66)", "resolution": "static", "status": "override", "relationshipSource": "--qp-color-black" }, { "name": "--qp-video__play-text-color", "description": "Uses the canvas color for video play text color, with semantic remapping for Video-specific treatment.", "designType": "color", "baseVariableType": "inherited", "baseExpression": "var(--qp-text-color--inverse)", "variableType": "inherited", "effectiveExpression": "var(--qp-text-color--inverse)", "effectiveValue": "#ffffff", "resolution": "static", "status": "base", "relationshipSource": "--qp-text-color--inverse" }, { "name": "--theme-color-aqua", "description": "Aqua in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "#37bfc1", "effectiveExpression": "#37bfc1", "effectiveValue": "#37bfc1", "resolution": "static", "status": "theme-owned" }, { "name": "--theme-color-aqua-dark", "description": "A darker aqua in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "color-mix(in oklch, var(--theme-color-aqua), black 10%)", "effectiveExpression": "color-mix(in oklch, var(--theme-color-aqua), black 10%)", "effectiveValue": "color-mix(in oklch, #37bfc1, black 10%)", "resolution": "browser-dependent", "status": "theme-owned" }, { "name": "--theme-color-aqua-light", "description": "A lighter aqua in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "color-mix(in oklch, var(--theme-color-aqua), white 68%)", "effectiveExpression": "color-mix(in oklch, var(--theme-color-aqua), white 68%)", "effectiveValue": "color-mix(in oklch, #37bfc1, white 68%)", "resolution": "browser-dependent", "status": "theme-owned" }, { "name": "--theme-color-gold", "description": "Gold in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "#ffd62f", "effectiveExpression": "#ffd62f", "effectiveValue": "#ffd62f", "resolution": "static", "status": "theme-owned" }, { "name": "--theme-color-gold-light", "description": "A lighter gold in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "color-mix(in oklch, var(--theme-color-gold), white 82%)", "effectiveExpression": "color-mix(in oklch, var(--theme-color-gold), white 82%)", "effectiveValue": "color-mix(in oklch, #ffd62f, white 82%)", "resolution": "browser-dependent", "status": "theme-owned" }, { "name": "--theme-color-teal", "description": "Deep teal in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "#003a44", "effectiveExpression": "#003a44", "effectiveValue": "#003a44", "resolution": "static", "status": "theme-owned" }, { "name": "--theme-color-teal-dark", "description": "A darker teal in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "color-mix(in oklch, var(--theme-color-teal), black 24%)", "effectiveExpression": "color-mix(in oklch, var(--theme-color-teal), black 24%)", "effectiveValue": "color-mix(in oklch, #003a44, black 24%)", "resolution": "browser-dependent", "status": "theme-owned" }, { "name": "--theme-color-teal-soft", "description": "A softer teal in the FeatherQuest authored Color vocabulary.", "designType": "color", "variableType": "enum", "declaredExpression": "color-mix(in oklch, var(--theme-color-teal), white 28%)", "effectiveExpression": "color-mix(in oklch, var(--theme-color-teal), white 28%)", "effectiveValue": "color-mix(in oklch, #003a44, white 28%)", "resolution": "browser-dependent", "status": "theme-owned" } ], "excludedEnums": [ "--qp-color-blue", "--qp-color-blue-light", "--qp-color-ink", "--qp-color-ink-dark", "--qp-color-ink-soft", "--qp-color-mist", "--qp-color-mist-dark", "--qp-color-mist-light" ] }