/*
 * One cross-shell contract for legacy HTML surfaces.
 * Content-specific styles remain local; shell materials and controls do not.
 */
:root{
  --vc-bg:var(--ds-background);
  --vc-surface:var(--ds-surface-default);
  --vc-surface-raised:var(--ds-surface-raised-default);
  --vc-surface-emphasis:var(--ds-surface-emphasis);
  --vc-text:var(--ds-content);
  --vc-secondary:var(--ds-content-secondary);
  --vc-muted:var(--ds-content-muted);
  --vc-dim:var(--ds-content-dim);
  --vc-line:var(--ds-control-border);
  --vc-line-soft:var(--ds-border-soft);
  --vc-action:var(--ds-action);
  --vc-danger:var(--ds-status-danger);
}

html,
body,
body.public-page,
body[data-page],
body[data-release]{
  background-color:var(--vc-bg)!important;
  color:var(--vc-text);
  font-family:var(--ds-font-sans);
}

body,
body.public-page{
  background-image:
    linear-gradient(var(--ds-grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--ds-grid-color) 1px,transparent 1px)!important;
  background-size:var(--ds-grid-size) var(--ds-grid-size)!important;
  background-attachment:fixed;
}

::selection{
  background:var(--ds-action);
  color:var(--ds-background);
}

button,
a,
input,
select,
textarea{
  font-family:var(--ds-font-sans);
}

:is(.button,.public-login,.public-button,.status-refresh,.family-button,[role="button"]){
  min-height:var(--ds-control);
  border-radius:var(--ds-radius-control);
  border-color:var(--ds-control-border);
  transition:
    transform .2s var(--ds-ease),
    color .2s var(--ds-ease),
    background-color .2s var(--ds-ease),
    border-color .2s var(--ds-ease);
}

:is(.button,.public-login,.public-button,.status-refresh,.family-button):focus-visible{
  outline:2px solid var(--ds-focus-ring);
  outline-offset:3px;
}

:is(.button-accent,.button-main,.public-login,.family-button-primary){
  background:var(--ds-action);
  border-color:var(--ds-action);
  color:var(--ds-surface-default);
}

:is(.button-accent,.button-main,.public-login,.family-button-primary):hover{
  background:var(--ds-action-strong);
  border-color:var(--ds-action-strong);
}

:is(.button-quiet,.button-soft,.public-button-secondary,.family-button):not(.button-main):not(.public-login):not(.family-button-primary){
  background:var(--ds-surface-raised-default);
  color:var(--ds-content);
}

:is(.button-quiet,.button-soft,.public-button-secondary,.family-button):hover{
  background:var(--ds-surface-emphasis);
  border-color:var(--ds-content-muted);
}

:is(.site-footer,.auth-footer,.docs-footer,.seo-footer,.family-footer){
  border-color:var(--ds-border);
  color:var(--ds-content-muted);
  font-family:var(--ds-font-sans);
}

:is(.site-page main,.auth-v8,.status-dashboard,.public-docs-page .wrap,.how-page main,.family-main){
  color:var(--ds-content);
}

:is(.site-page,.auth-page,.status-page,.how-page,.public-docs-page) :is(.panel,.card,.support-item,.status-board,.status-health,.status-traffic,.status-quality,.status-daily,.auth-panel,.legal-content,.how-config,.how-benefit-grid article,.api-doc-block){
  border-color:var(--ds-border);
  background:var(--ds-surface-default);
  box-shadow:none;
}

:is(.site-page,.auth-page,.status-page,.how-page,.public-docs-page) :is(p,small,dt,dd,li){
  color:var(--ds-content-secondary);
}

.how-page .api-reference-band p{
  color:var(--ds-background)!important;
}

.auth-page .auth-legal{
  color:var(--ds-content-muted)!important;
}

.auth-page .auth-legal a{
  color:var(--ds-content-secondary)!important;
}

body[data-page="landing"] .debit-receipt > span,
body[data-page="landing"] .debit-receipt > small{
  color:var(--bg)!important;
}

body.how-page .public-actions>.public-login{
  color:var(--ds-surface-default)!important;
}

:is(.site-page,.auth-page,.status-page,.how-page,.public-docs-page) :is(input,select,textarea){
  border-color:var(--ds-control-border);
  border-radius:var(--ds-radius-control);
  background:var(--ds-control-background);
  color:var(--ds-content);
}

:is(.site-page,.auth-page,.status-page,.how-page,.public-docs-page) :is(input,select,textarea):focus{
  border-color:var(--ds-focus-ring);
  box-shadow:var(--ds-focus-shadow);
}

body[data-release] :is(.rail,.mobile-nav,.cabinet-panel,.data-table,.filters,.key-row,.integration-doc,.app-dialog .dialog-card,.toast){
  border-color:var(--ds-border);
  background:var(--ds-surface-default);
  box-shadow:none;
}

body[data-release] :is(.workspace-head,.section-label,.cabinet-panel>header,.data-table th,.data-table td){
  border-color:var(--ds-border-soft);
}

body[data-release] :is(.button,.icon-button,.client-button,.mobile-link,.nav-link){
  border-radius:var(--ds-radius-control);
}

body[data-release] :is(.button-accent,.nav-link.active,.client-button.active,.mobile-link.active){
  background:var(--ds-action);
  border-color:var(--ds-action);
  color:var(--ds-background);
}

body[data-release] :is(.field input,.field select,.field textarea,.dialog-fields input,.dialog-fields select,.dialog-fields textarea,.settings-form input,.promo-form input){
  border-color:var(--ds-control-border);
  background:var(--ds-control-background);
  color:var(--ds-content);
}

body[data-release] :is(.field input,.field select,.field textarea,.dialog-fields input,.dialog-fields select,.dialog-fields textarea,.settings-form input,.promo-form input):focus{
  border-color:var(--ds-focus-ring);
  box-shadow:var(--ds-focus-shadow);
}

@media(max-width:700px){
  :is(.site-page main,.auth-v8,.status-dashboard,.public-docs-page .wrap,.how-page main,.family-main){
    width:calc(100% - 24px);
    margin-inline:auto;
  }
}