@scope (upload-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --upload-gap-default:              var(--a-space-2);
    --upload-radius-default:           var(--a-radius-md);
    --upload-font-default:             var(--a-ui-size);
    --upload-border-default:           var(--a-border-subtle);
    --upload-border-hover-default:     var(--a-accent);
    --upload-border-dragover-default:  var(--a-accent-bg);
    --upload-bg-dragover-default:      var(--a-accent-muted);
    --upload-fg-default:               var(--a-fg-subtle);
    --upload-fg-hover-default:         var(--a-accent);
    --upload-label-fg-default:         var(--a-fg);
    --upload-label-weight-default:     var(--a-weight-medium);
    --upload-label-size-default:       var(--a-label-size);
    --upload-hint-fg-default:          var(--a-fg-muted);
    --upload-hint-size-default:        var(--a-ui-sm);
    --upload-bg-disabled-default:      var(--a-ui-bg-disabled);
    --upload-fg-disabled-default:      var(--a-ui-text-disabled);
    --upload-border-disabled-default:  var(--a-ui-border-disabled);
    --upload-focus-ring-default:       var(--a-focus-ring);
    --upload-focus-ring-invalid-default: var(--a-focus-ring-invalid);

    /* ── Spacing ── */
    --upload-dropzone-pad-default:     var(--a-space-6);

    /* ── Transitions ── */
    --upload-duration-default:         var(--a-duration-fast);
    --upload-easing-default:           var(--a-easing);
  }

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--upload-gap, var(--upload-gap-default));
    font-size: var(--upload-font, var(--upload-font-default));
  }

  /* Label via ::before */
  :scope::before {
    content: attr(label);
    font-size: var(--upload-label-size, var(--upload-label-size-default));
    font-weight: var(--upload-label-weight, var(--upload-label-weight-default));
    color: var(--upload-label-fg, var(--upload-label-fg-default));
  }
  :scope:not([label])::before,
  :scope[label=""]::before {
    display: none;
  }

  /* Dropzone */
  [data-dropzone] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--upload-dropzone-pad, var(--upload-dropzone-pad-default));
    border: 2px dashed var(--upload-border, var(--upload-border-default));
    border-radius: var(--upload-radius, var(--upload-radius-default));
    color: var(--upload-fg, var(--upload-fg-default));
    font-size: var(--upload-font, var(--upload-font-default));
    text-align: center;
    cursor: pointer;
    transition:
      border-color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
      background var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
      color var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default)),
      box-shadow var(--upload-duration, var(--upload-duration-default)) var(--upload-easing, var(--upload-easing-default));
  }
  [data-dropzone]:hover {
    border-color: var(--upload-border-hover, var(--upload-border-hover-default));
    color: var(--upload-fg-hover, var(--upload-fg-hover-default));
  }
  [data-dropzone]:focus-visible {
    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
    outline: none;
    box-shadow: var(--upload-focus-ring, var(--upload-focus-ring-default));
  }
  [data-dropzone][data-dragover] {
    border-color: var(--upload-border-dragover, var(--upload-border-dragover-default));
    background: var(--upload-bg-dragover, var(--upload-bg-dragover-default));
  }

  /* Hint via ::after on span */
  span[hint]::after {
    content: attr(hint);
    font-size: var(--upload-hint-size, var(--upload-hint-size-default));
    color: var(--upload-hint-fg, var(--upload-hint-fg-default));
  }
  span[hint=""]::after {
    display: none;
  }
  span:not([hint])::after {
    display: none;
  }

  /* File list */
  [data-filelist] {
    display: flex;
    flex-direction: column;
    gap: var(--upload-gap, var(--upload-gap-default));
    font-size: var(--upload-font, var(--upload-font-default));
  }
  [data-filelist]:empty {
    display: none;
  }

  /* Disabled */
  :scope[disabled] {
    pointer-events: none;
    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
  }
  :scope[disabled] [data-dropzone] {
    background: var(--upload-bg-disabled, var(--upload-bg-disabled-default));
    border-color: var(--upload-border-disabled, var(--upload-border-disabled-default));
    color: var(--upload-fg-disabled, var(--upload-fg-disabled-default));
    cursor: not-allowed;
  }
}
